- 1. 避免 if 过长
- 2. 双!操作符将任何变量转换为布尔值
- 3. 可选项 (?)
- 4. 如果if中返回值时， 就不要在写 else
- 5.避免forEach，多使用filter、 map、 reduce、 every 、some
- 6.不要使用 delete 来删除属性
- 7.仅当对象存在时才向其添加属性
- 8. 使用模板字符串
- 9. 条件简写
- 10.设置变量的默认值
- 11.使用 console timer
本文中，我将与你分享一些关于 JS 的技巧，可以提高你的 JS 技能，简化我们的代码。
1. 避免 if 过长
如果判断值满足多个条件，我们可能会这么写：
if (value === 'a' || value === 'b' || value === 'c') { ... }
像这样如果有多个条件，if 条件就会臃肿，可读性降低，我们可以这样简化：
if (['a', 'b', 'c'].includes(value)) { ... }
2. 双!操作符将任何变量转换为布尔值
!(NOT)运算符可以使用两次!!，这样可以将任何变量转换为布尔值(像布尔函数)，当你需要在处理它之前检查某个值时非常方便。
const toto = null
!!toto // false
Boolean(toto) // false
if (!!toto) { } // toto is not null or undefined
3. 可选项 (?)
在 JS 中，我们需要经常检查对象的某些属性是否存在，然后才能再处理它，不然会报错。 早期我们可能会这么干：
const toto = { a: { b: { c: 5 } } }
if (!!toto.a && !!toto.a.b && !!toto.a.b.c) { ... } // toto.a.b.c exist
如果对象嵌套很深，我们这写法就难以阅读，这时可以使用?来简化：
if (!!toto.a?.b?.c) { ... } // toto.a.b.c exist
// 如果键不存在，返回 `undefined`。
const test = toto.a?.b?.c?.d // undefined
4. 如果if中返回值时， 就不要在写 else
经常会看到这种写法：
if (...) {
return 'toto'
} else {
return 'tutu'
}
如果if有返回值了，可以这样写：
if (...) {
return 'toto'
}
return 'tutu'
5.避免forEach，多使用filter、 map、 reduce、 every 、some
作为初学者，我们使用了很多forEach函数，但 JS 为我们提供了很多选择，而且这些函数是 FP（函数式编程）。
filter
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const toto = [1, 2, 3, 4]
// 过滤奇数
const evenValue = toto.filter(currentValue => {
return currentValue % 2 == 0
}) // [2, 4]
map
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
const toto = [1, 2, 3, 4]
const valueMultiplied = toto.map(currentValue => {
return currentValue * 2
}) // [2, 4, 6, 8]
reduce
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
const toto = [1, 2, 3, 4]
const sum = toto.reduce((accumulator, currentValue) => {
return accumulator += currentValue
}, 0) // 10
Some & Every
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
什么时候使用？
所有项目都符合一个条件可以用 every
const toto = [ 2, 4 ] toto.every(val => val % 2 === 0) // true const falsyToto = [ 2, 4, 5 ] falsyToto.every(val => val % 2 === 0) // false
只要一个符合条件就行，用some：
const toto = [ 2, 4, 5 ] toto.some(val => val % 2 !== 0) // return true
6.不要使用 delete 来删除属性
从一个对象中 delete 一个属性是非常不好的（性能不好），此外，它还会产生很多副作用。
但是如果你需要删除一个属性，你应该怎么做？
可以使用函数方式创建一个没有此属性的新对象，如下所示：
const removeProperty = (target, propertyToRemove) => {
const { [propertyToRemove]: _, ...newTarget } = target
return newTarget
}
const toto = { a: 55, b: 66 }
const totoWithoutB = removeProperty(toto, 'b') // { a: 55 }
7.仅当对象存在时才向其添加属性
有时，如果对象已经定义了属性，我们需要向对象添加属性，我们可能会这样写：
const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true
if (condition) {
other.name = toto.name
}
❌不是很好的代码
✅ 可以用一些更优雅的东西!
const condition = true
const other = {
other: 'other',
...condition && { name: 'toto' }
}
8. 使用模板字符串
在 JS 中学习字符串时，我们需要将它们与变量连接起来：
const toto = 'toto' const message = 'hello from ' + toto + '!' // hello from toto!
如果还有其它变量，我们就得写很长的表达式，这时可以使用模板字符串来优化。
const toto = 'toto'
const message = `hello from ${toto}!` // hello from toto!
9. 条件简写
当条件为 true 时，执行某些操作，我们可能会这样写：
if(condition){
toto()
}
这种方式可以用 && 简写：
condition && toto()
10.设置变量的默认值
如果需要给一个变量设置一个默认值，可以这么做：
let toto console.log(toto) //undefined toto = toto ?? 'default value' console.log(toto) //default value toto = toto ?? 'new value' console.log(toto) //default value
11.使用 console timer
如果需要知道一个函数的执行时间，可以这么做：
for (i = 0; i < 100000; i++) {
// some code
}
console.timeEnd() // x ms
相关文章推荐：