在这篇文章中,我将与你分享一些关于JS的技巧,可以提高你的JS技能 。
1.避免if过长如果判断值满足多个条件,我们可能会这么写:
if (value =https://www.isolves.com/it/cxkf/bk/2021-11-17/== 'a' || value === 'b' || value === 'c') { ... }
像这样如果有多个条件,if 条件就会很我,可读性降低,我们可以这样简化:
if (['a', 'b', 'c'].includes(value)) { ... }
2.双!操作符将任何变量转换为布尔值!(NOT)运算符可以使用两次!!,这样可以将任何变量转换为布尔值(像布尔函数),当你需要在处理它之前检查某个值时非常方便 。
const toto = null!!toto // falseBoolean(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.isolves.com/it/cxkf/bk/2021-11-17/toto.filter(currentValue => {return currentValue % 2 == 0}) // [2, 4]
map
map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值 。
const toto = [1, 2, 3, 4]const valueMultiplied = toto.map(currentValue =https://www.isolves.com/it/cxkf/bk/2021-11-17/> {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 } = targetreturn 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 importantconst 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!
推荐阅读
- win10优化设置,win10系统如何优化
- 金智妮|如何才能不“油腻”?成为南柱赫这样的清爽大帅哥原来这么简单!
- 饵料|“酒店卫生间开始有这种椅子了?这是用来干什么的?”
- 上午几点钓鱼最好?
- 如何挑选奶酪 有什么种类以及如何使用
- 雕刻|原来翡翠雕刻,是由这么多种方式雕刻的,你最喜欢哪一种雕刻方式
- Intel|首次使用EUV工艺 Intel “4nm”酷睿点亮:成功运行Win/Linux/Chrome三大系统
- Linux 中 ss 命令的使用实例
- 用Python爬取六大平台的弹幕、评论,看这一篇就够了
- 白帽黑客如何使用Metasploit进行SSH服务扫描技巧