14. 多行字符串
如果您发现自己需要在代码中编写多行字符串,那么您可以编写它:
常规:
但是有一种更简单的方法。只需使用反引号。
简写:
15. 展开 (spread) 操作符
ES6 中引入的展开运算符有几个用例,可以使 JavaScript 代码更高效,更有趣。它可以用来替换某些数组函数。展开操作符只是连续的三个点。
常规:
简写:
与 concat() 函数不同,您可以使用 spread 运算符在另一个数组内的任何位置插入数组。
您还可以将 spread 运算符与 ES6 解构表示法结合使用:
16. 强制参数
默认情况下,如果未传递值,JavaScript 会将函数参数设置为 undefined。其他一些语言会引发警告或错误。要强制执行参数赋值,可以使用 if 语句在未定义时抛出错误。
常规:
简写:
17. Array.find
如果您曾经在纯 JavaScript 中编写过 find 函数,那么您可能已经使用了 for 循环。在 ES6 中,引入了一个名为 find() 的新数组函数
常规:
简写:
18. Object[key]
你知道 Foo.bar 也可以写成 Foo [‘bar’]吗?起初,似乎没有理由应该这样写。但是,这种表示法可以为编写可重用代码块提供方便。
思考一下,验证函数的这个简化示例:
这个功能完美地完成了它的工作,但是请考虑这样一种情况,即您需要验证的表单有很多,表单都具有不同字段和规则。构建可在运行时配置的通用验证函数不是更好吗?
简写:
现在我们有了一个通用验证函数,可以在所有表单中重用,而无需为每个表单编写自定义验证函数。
19. 双取反运算
双取反运算符有一个非常实用的场景。您可以将它用作 Math.floor() 的替代品。双取反运算符的优点是它可以更快地执行相同的操作。
常规:
简写:
20. 数学指数幂函数
常规:
简写:
21. 将字符串转换为数字
有时,您的代码会接收 String 类型的参数,但需要以数字类型处理。这不是什么大问题,我们可以进行快速转换。
常规:
简写:
22. 对象属性赋值
考虑以下代码:
你会如何把它们合并为一个对象?
一种方法是编写一个将第二个对象的数据复制到第一个对象的函数。
最简单的方法是,使用 ES6 中引入的 Object.assign 函数:
您还可以使用 ES8 中引入的对象销毁表示法:
您可以合并的对象属性数量没有限制。如果确实具有相同属性名称的对象,则将按合并的顺序覆盖值。
23. 取反运算 和 IndexOf
使用数组执行查找时,indexOf() 函数用于检索您要查找的项目的位置。如果未找到该项,则返回值 -1。在 JavaScript 中,0 被认为是 ’falsy’,而大于或小于 0 的数字被认为是 ’truthy’。因此,必须像这样编写正确的代码。
常规:
简写:
取反(〜)运算符对 -1 以外的任何值,都返回 truthy 值。对它进行非运算,直接 !〜。
或者,我们也可以使用 includes() 函数:
24. Object.entries()
这是 ES8 中引入的一项功能,允许您将对象转换为键 / 值对数组。请参阅以下示例:
25. Object.values()
这也是 ES8 中引入的一个新功能,它执行与 Object.entries() 类似的功能,但没有 key 部分:
看到这里,都已经介绍完了。才疏学浅,如果您有其他好的技巧,欢迎留言评论。
相关文章:
Vue.js 应用性能优化一
Vue.js 应用性能优化二
Vue.js 应用性能优化三
如何使用 Vue.js 渲染 JSON 中定义的动态组件
构建 Vue.js 组件的 10 个技巧