前端js代码优化方法

本篇笔记不定期更新

一、IF语句简化

假设我们有下面的代码

• 1. 使用includes简化if判断

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

我们可以这样解决

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

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

• 2. 通过条件判断给变量赋值布尔值

let b
if (a === 'a') {
	b = true
} else {
	b = flase
}

// 简写
b = a === 'a'  // 代码简单明了

• 3. 简单的条件判断使用三元运算

let b
if (a === 'a') {
	b = 1
} else {
	b = 2
}

// 三元运算
b = a === 'a' ? 1 : 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

三、少嵌套，早返回

假设我们有下面的代码

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('很多红色水果')
	}
}

四、 减少遍历，快速获取对象的属性名和属性值

• 使用Object.keys快速获取对象的属性名
• 使用Object.valuse快速获取对象的属性值

let obj = {
	name: 'zs',
	age: 18
}
// 方法一：遍历对象
let keys = []
let values = []
for (key in obj) {
	keys.push(key) // keys: ['name', 'age']
	values.push(obj[key]) // valuse：['zs', 18]
}

// 方法二：使用Objcet.keys和Object.valuse
let keys = Object.keys(obj) // ['name', 'age']
let values = Object.values(obj) // ['zs', 18]

五、字符串拼接使用${}

let person = {
	name: 'zs',
	age: 18
}

// 字符串拼接使用'+'号
function say (person) {
	console.log('大家好，我叫' + person.name + ',今年' + person.age + '岁')
}

// 字符串拼接使用${}, 显而易见清晰多了
function say(person) {
	console.log(`大家好，我叫${person.name},今年${person.age}岁`)
}

// 还可以结合解构赋值一起使用
function say({name, age}}) {
	console.log(`大家好，我叫${name},今年${age}岁`)
}

六、在数组中查找最大值和最小值

let arr = [1,2,3,4,5,9]
// 可遍历数组获取，但是使用Math对象方法和展开运算符(...)简洁明了
Math.max(...arr) // 9 
Math.min(...arr) // 1

七、null / undefined 检查

let a 
if (a !== null || a !== undefined || a !== '') {
	let b = a
} else {
	let b = ''
}

// 简写
let b = a || ''

八、给多个变量赋值

let a, b, c
a = 1
b = 2
c = 3

// 简写
let [a, b, c] = [1,2,3]
// console.log(a) ⇒ 1

九、其他

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