前端代码优化：优化js中的条件语句

在开发过程中，由于追求开发速度，我们往往很多时候都没有注意代码的可读性与性能，这里介绍几个技巧，让你写出可读性强、简洁的js代码

1、多个条件满足之一时，推荐使用Array.includes

// 优化前
function test(val) {
	if (val === 'js' || val === 'java' || val === 'python') {
		console.log('编程语言')
	}
}

// 优化后
function test(val) {
	cosnt arr = ['js', 'java', 'python']
	if (arr.includes(val)) {
		console.log('编程语言')
	}
}

2、减少嵌套，尽早返回

// 优化前
function test(val) {
	if (val) {
		if (val === 'js') {
			console.log(val)
		} else {
			console.log('其他')
		}
	} else {
		return
	}
}

// 优化后
function test(val) {
	if (!val) return
	val === 'js' ? console.log(val) : console.log('其他')
}

3、使用函数的默认参数与解构

// 优化前
function test(val, num) {
	const item = num || 1
	console.log(`this is ${item}${val}`)
}
test('js', 4)

// 优化后
function test(val, num = 1) {
	console.log(`this is ${num}${val}`)
}
test('java', 4)

如果默认参数是对象呢？我们就可以使用解构了

// 优化前
function test(val) {
	if (val && val.name) {
		console.log(val.name)
	} else {
		console.log('null')
	}
}
test({name: 'js', num: 1})

// 优化后
function test({name} = {}) {
	console.log(name)
}
test({name: 'js', num: 1})

4、使用map或者对象字面量替代switch语句

// 优化前
function test(num) {
	switch(num) {
		case 1:
			return ['js', 'java']
		case 2:
			return ['python', 'ruby']
		case 3:
			return ['php', 'c#']
		default
	}
	conosle.log(num)
}
test(1)

// 优化后，对象字面量方式
function test(num) {
	const arr = {
		1: ['js', 'java'],
		2: ['python', 'ruby'],
		3: ['php', 'c#'],
	}
	console.log(arr[num])
}
test(1)

// map方式
function test(num) {
	const arr = new Map()
		.set(1, ['js', 'java'])
		.set(2, ['python', 'ruby'])
		.set(3, ['php', 'c#'])
	console.log(arr.get(num))
}
test(1)

5、使用Array.every()或者Array.some()

// 优化前
const item = [
	{name: 'js', num: 2},
	{name: 'java', num: 4},
	{name: 'pyton', num: 2},
	{name: 'php', num: 1},
]
function test() {
	let isNumTwo = true
	for (let val of item) {
		if (!isNumTwo) break
		isNumTwo = (val.num === 2)
	}
	console.log(isNumTwo)  // false
}
test()

// 优化后
const item = [
	{name: 'js', num: 2},
	{name: 'java', num: 4},
	{name: 'pyton', num: 2},
	{name: 'php', num: 1},
]
function test() {
	const isNumTwo = item.some(val => val.num === 2)
	console.log(isNumTwo)  // true
}
test()