简化我们代码的11个JS技巧

目录
文章目录隐藏
  1. 1. 避免 if 过长
  2. 2. 双!操作符将任何变量转换为布尔值
  3. 3. 可选项 (?)
  4. 4. 如果if中返回值时, 就不要在写 else
  5. 5.避免forEach,多使用filter、 map、 reduce、 every 、some
  6. 6.不要使用 delete 来删除属性
  7. 7.仅当对象存在时才向其添加属性
  8. 8. 使用模板字符串
  9. 9. 条件简写
  10. 10.设置变量的默认值
  11. 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

相关文章推荐:

总结 11 个让你眼前一亮的 JavaScript 技巧

一位前端开发者总结的 15 个超实用的 JavaScript 技巧

前端开发遵循的 10 个 JavaScript 技巧和实践

超实用的 JS 单行代码,摸鱼必备!

提高你摸鱼时间的 20 个 Javascript 技巧

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 简化我们代码的11个JS技巧

发表回复