25个JavaScript代码简写技巧(上篇)

对于任何JavaScript开发人员来讲，这篇文章很值得一读。这里记录了我多年来学习的JavaScript代码简洁写法，也给你们提供一些编码上的思考和取舍。

1. 三元(三目)运算符

若是只想在一行中编写if..else语句时，这是一个很好的节省代码的方式。

常规：

简写：

嵌套版三元运算：

2. 短路判断简写

将变量值分配给另外一个变量时，您可能但愿确保源变量不为null，undefined或为空。您能够编写带有多个条件的长 if 语句，也可使用短路判断。

常规：

简写：

再来点示例，尝试一下：

请注意，若是将variable1设置为false或0，则赋值为bar。

3. 声明变量简写

常规：

简写：

4. If真值判断简写

这多是微不足道的，但值得一提。在执行“if 检查”时，有时能够省略全等运算符。

常规：

简写：

注意：这两个例子并不彻底相同，由于只要likeJavaScript是一个真值，检查就会经过。

这是另外一个例子。若是a不等于true，那就作点什么吧。

常规：

简写：

5. For循环简写

若是您想要纯JavaScript而且不想依赖外部库（如jQuery或lodash），这个小技巧很是有用。

常规：

简写：

若是您只想访问索引，请执行如下操做：

若是要访问文字对象中的键，这也适用：

Array.forEach简写：

6. 短路判断赋值

若是预期参数为null或undefined，咱们能够简单地使用短路逻辑运算符，只需一行代码便可完成相同的操做，而不是编写六行代码来分配默认值。

常规：

简写：

7. 十进制基本指数

你可能已经看过这个了。它本质上是一种编写没有尾随零的数字的奇特方式。例如，1e7实质上意味着1后跟7个零。它表示一个十进制基数（JavaScript解释为浮点类型）等于10,000,000。

常规：

简写：

8. 对象属性简写

在JavaScript中定义对象很简单。 ES6提供了一种更简单的方法来为对象分配属性。若是变量名称与对象键相同，则可使用简写表示法。

常规：

简写：

9. 箭头函数简写

经典函数以简单的形式易于读写，可是一旦你开始将它们嵌套在其余函数调用中，它们每每会变得有点冗长和混乱。

常规：

简写：

重要的是要注意，箭头函数内部的 this 与常规函数的不一样，所以这两个示例并不严格等效。有关详细信息，请参阅有关箭头函数语法的文章。

10. 隐式返回简写

Return 是咱们常常使用的关键字，用于返回函数的最终结果。具备单个语句的箭头函数将隐式返回其执行结果（函数必须省略大括号（{}）以省略return关键字）。

要返回多行语句（例如对象），必须使用 () 而不是 {} 来包装函数体。这可确保将代码执行为单个语句。

常规：

简写：

11. 默认参数值

您可使用if语句定义函数参数的默认值。在ES6中，您能够在函数声明自己中定义默认值。

常规：

简写：

12. 模板字符串

您是否厌倦了使用 '+' 将多个变量链接成一个字符串？有没有更简单的方法？若是你可以使用ES6，那么你很幸运。您须要作的就是使用反引号，并使用 ${} 来包含变量。

常规：

简写：

13. 解构赋值简写

若是您正在使用任何流行的Web框架，那么颇有可能您将使用对象形式的数组或数据，在组件和API之间传递信息。数据对象到达组件后，您须要将其解构。

常规：

简写：

您甚至能够分配本身的变量名称，好比entity替换原来对象中的contact:

---

相关文章：

25个JavaScript代码简写技巧(下篇)

使用Array.isArray更好地检查数组

Vue.js应用性能优化一

Vue.js应用性能优化二

Vue.js应用性能优化三

如何使用Vue.js渲染JSON中定义的动态组件

构建Vue.js组件的10个技巧