使用这11个代码,可以大大地简化我们的代码。
在这篇文章中,我将与你分享一些关于JS的技巧,可以提高你的JS技能。
作者:CodeOz
译者:前端小智
来源:dev
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。我们正在招聘,年薪:25-60万+奖金,有兴趣的可以点我了解详情。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
1.避免
if
过长如果判断值满足多个条件,我们可能会这么写:
if (value =https://www.it610.com/article/=='a' || value =https://www.it610.com/article/=='b' || value =https://www.it610.com/article/=='c') { ... }
像这样如果有多个条件,
if
条件就会很我,可读性降低,我们可以这样简化:if (['a', 'b', 'c'].includes(value)) { ... }
2.双
!
操作符将任何变量转换为布尔值!(NOT)运算符可以使用两次
!!
,这样可以将任何变量转换为布尔值(像布尔函数),当你需要在处理它之前检查某个值时非常方便。const toto = null!!toto // false
Boolean(toto) // falseif (!!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 = https://www.it610.com/article/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) // trueconst 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.仅当对象存在时才向其添加属性
【使用这11个代码,可以大大地简化我们的代码。】有时,如果对象已经定义了属性,我们需要向对象添加属性,我们可能会这样写:
const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = trueif (condition) {
other.name = toto.name
}
?不是很好的代码
? 可以用一些更优雅的东西!
const condition = trueconst 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 totoconsole.log(toto) //undefinedtoto = toto ?? 'default value'console.log(toto) //default valuetoto = 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... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- 放屁有这三个特征的,请注意啦!这说明你的身体毒素太多
- 一个小故事,我的思考。
- 9班|9班 刘志雪
- 这辈子我们都不要再联系了
- 猎杀IP
- 闲杂“细雨”
- 眼观耳听美食的日子
- 由浅入深理解AOP
- 开花店的前景怎么样()
- 【译】20个更有效地使用谷歌搜索的技巧