在开发过程中,由于追求开发速度,我们往往很多时候都没有注意代码的可读性与性能,这里介绍几个技巧,让你写出可读性强、简洁的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()