使用这11个代码，可以大大地简化我们的代码。

前端小智发布于 11 月 18 日

English

在这篇文章中，我将与你分享一些关于JS的技巧，可以提高你的JS技能。

作者：CodeOz
译者：前端小智
来源：dev

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

我们正在招聘，年薪：25-60万+奖金，有兴趣的可以点我了解详情。

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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

原文：https://dev.to/codeoz/improve...

交流

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

javascript 前端

阅读 1.4k发布于 11 月 18 日

本作品系原创，采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议

终身学习者

我要先坚持分享20年，大家来一起见证吧。

前端小智

62.4k 声望

93.8k 粉丝

1 条评论

得票数最新

小凯同学：

学习了，感谢大佬分享

回复11 月 19 日

继续阅读

ES10 中 Object.fromEntries() 怎么用？

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文 GitHub [链接] 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

前端小智赞 4阅读 800

摊牌了，作为开发者，我经常用这14个 Github 偷偷学习

前端小智赞 15阅读 961

immutablejs 是如何优化我们的代码的？

前一段时间群里有小伙伴问 lucifer 我一个问题：”immutablejs 是什么？有什么用？“。我当时的回答是：immutablejs 就是 tree + sharing，解决了数据可变性带来的问题，并顺便优化了性能。今天给大家来详细解释一...

lucifer赞 11阅读 1.1k

重构代码的tricks

js的设计模式是针对于整体代码的设计是否合理，给出了一些具体的解决办法。而重构代码就是依赖于设计模式而实现的一个必要手段，可以说设计模式就是重构代码的目标，但他的手段却不仅仅只有设计模式这些大而全的...

villainhr赞 6阅读 2.2k评论 1

JS优化小技巧

1. if多条件判断 {代码...} 2. if...else... {代码...} 3. Null, Undefined, 空值检查 {代码...} 4. foreach循环 {代码...} 5. 函数条件调用 {代码...} 6. switch条件 {代码...} 7. 多行字符串 {代码...} 8. 隐式...

給自己一個微笑赞 2阅读 284

从 Vue3 源码学习 Proxy & Reflect

前端小智赞 1阅读 325

如何才能让自己写的代码特别清晰

编码约定是编程的风格指南。其中包括编程最佳实践和原则。这里我们将讨论一些编码约定。遵循约定的好处干净的代码代码质量代码可读性使代码维护更容易“干净的代码简单而直接。干净的代码读起来就像写得很好的散文...

sunnywu阅读 162

Swift 代码小抄

无论是你学习的第一门语言是 Swift 还是之前学过 Objective-C，在学习 Swift 的过程中，一定会感叹它真的是一门超赞的语言。但如果你不熟悉它的某些语法，就可能会被某些写法吓到。在这里我会介绍一些在写 Swift ...

SwiftGG翻译组阅读 964

浙ICP备15005796号-2 浙公网安备33010602002000号ICP 经营许可浙B2-20201554

漫思