Js代码优化规则和技巧（JavaScript优化）

净化代码方法

1. IF语句简化
假设我们有下面的代码

if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

我们可以这样解决

let options = ['duck', 'dog', 'cat' ]
if (options.includes(value)) {
	//....
}

将判断条件过长的条件判断放到一个变量中存储，比看臃肿的表达式要舒服的多

2. 使用默认参数和解构赋值

• 在JavaScript中我们总需要检查 null/undefined 值和指定默认值

function test (fruit, num) {
	if (!fruit) return
	const n = num || 1
	console.log(`we have ${n} 个 ${fruit}`)
}
test('banner') // we have 1 个 banner
tset('banner', 10) // we have 10 个 banner

事实上，我们可以通过声明默认的函数参数来消除变量n

function test (fruit, num = 1) {
	if (!fruit) return
	console.log(`we have ${num} 个 ${fruit}`)
}
test('banner') // we have 1 个 banner
tset('banner', 10) // we have 10 个 banner

// 注意：每一个声明都有自己默认参数，例：我们也可以给fruit设置一个默认值 function test (fruit = 'apple', num = 1)

// 如果 fruit是一个对象 
function testObj ({name} = {}) { // 从对象中解构出name
	console.log(name || 'unKnown')
}
test() // unKnown
test({name: 'banner', color: 'red'}) // banner

• 在javaScript中，我们可以对object 和 array 进行解构赋值。

//  Object 对象解构赋值
let obj = { name: 'zs', age: 18 }
let {name, age} = obj
console.log(name) // 'zs'
console.log(age) // 18

// array 数组解构赋值
let arr = [ 1, 2, 3, 4, 5 ]
let [one , two] = arr
console.log(one) // 1
console.log(two) // 2

3. 少嵌套，早返回
假设我们有下面的代码

function test (fruit, num) {
	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
	if (fruit) {
		if (redFruit.includes(fruit)) {
			console.log('red')
			if (num > 10) {
				console.log('多个红色水果')
			}
		}
	} else {
		throw new Error('没有水果')
	}
}

test(null) // error: 没有水果
test('apple') // red
test('apple', 20) // red, 多个红色水果

以上代码：

- 1个if/eles语句筛出无效的条件语句
- 3层嵌套的语句（条件1，2和3）

及早返回使得我们的代码更加易读：
- 通过及早return，我们减少了一层嵌套语句，尤其当你有很长的if语句(想象你需要滚动到很长才能知道有else语句)

function tset (fruit, num) {
	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
	if (!fruit) throw new Error('没有水果')
	if (redFruit.includes(fruit)) {
		console.log('red')
		if (num > 10) {
			console.log('很多红色水果')
		}
	}
}


// 针对上面的例子，我们可以通过倒置判断条件和及早的return来进一步减少if嵌套
function test (fruit, num) {
	const redFruit = ['apple', 'strawberry', 'cherry', 'cranberries']
	if (!fruit) throw new Error('没有水果')
	if (!redFruit.includes(fruit)) return;
	if (num > 10) {
		console.log('很多红色水果')
	}
}

4. 其他

- 命名规范
- 保持代码的干净整洁：多余代码或多余注释
- 代码风格：代码缩进，使用单引号、双引号等

本文借鉴

本文地址：https://blog.csdn.net/S_B_Girl/article/details/110198540