编写更简洁 JavaScript 代码的 14 种技巧

做为一位现职 IT 技师，我累积了许多撰写 JavaScript 标识符的实战经验。特别是在合作开发小型应用领域时，标识符的强化和简约性对工程项目的可移植性和时效性都十分关键。在这首诗中，我将撷取我沃苏什卡归纳的 14 种撰写更简约 JavaScript 标识符的基本功，期望能给听众增添协助。

1. 尽量采用 const 和 let

采用 const 和 let 能让你的标识符更平衡、更复本、更快保护。这原因在于采用 var 新闻稿表达式，表达式会提高至表达式返回值或自上而下返回值，难负面影响表达式的开放性。而采用 const 和 let 新闻稿表达式，能防止此种难题。

// badvar a = 1;var b = 2;// goodconst a = 1;const b = 2;

2. 采用模版字面上量

在 JavaScript 标识符中，要输入数组时，他们一般来说采用数组连接符 +：

const name = Tom;console.log(My name is + name); // My name is Tom

但，采用模版字面上量能让标识符更简约：

const name = Tom;console.log(`My name is ${name}`); // My name is Tom

3. 采用斜线表达式

斜线表达式是 ES6 中的新特性，它能让标识符更简约。斜线表达式没有自己的 this，arguments，super，或 new.target，这些被继承自外部返回值。

// badfunction foo(param) { return param + 1;}// goodconst foo = param => param + 1;

4. 采用解构赋值

采用解构赋值能让你从数组或对象中提取值，赋值给定义的表达式。这能让你的标识符更干净、更简约，而且更难阅读。

// badconst obj = { x: 1, y: 2 };const x = obj.x;const y = obj.y;// goodconst { x, y } = { x: 1, y: 2 };

5. 防止冗杂的条件语句

在撰写 JavaScript 标识符时，应尽量防止冗杂的条件语句，这能使标识符更简约、更易读。

// badif (a === true) { // do this} else { // do that}// goodif (a) { // do this} else { // do that}

6. 采用数组和对象的扩展运算符

采用数组和对象的扩展运算符能让你更方便地操作它们，这能让你的标识符更干净、更简约。

// badconst arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr3 = arr1.concat(arr2);// goodconst arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr3 = […arr1, …arr2];

7. 采用对象字面上量

在 JavaScript 中，如果要定义一个对象，他们一般来说采用 new Object()或对象字面上量。对象字面上量是一个比new Object() 更简约、更优雅的语法。

// badconst obj = new Object();obj.x = 1;obj.y = 2;// goodconst obj = { x: 1, y: 2 };

8. 防止嵌套过多的标识符块

嵌套过多的标识符块会让标识符难以读懂，也不利于标识符的保护。因此，在撰写 JavaScript 标识符时应尽量防止嵌套过多的标识符块。

9. 尽量采用对象的简写语法

在 JavaScript 中，如果对象的键和值相同，能采用简写语法。这样能让你的标识符更简约、更易读。

// badconst obj = { x: x, y: y,};// goodconst obj = { x, y };

10. 链式操作

在 JavaScript 中，链式操作是一种常见的标识符风格。链式操作能让标识符更简约、更易读。

// badconst arr = [1, 2, 3];const newArr = arr.filter(item => item > 1).map(item => item * 2);// goodconst arr = [1, 2, 3];const newArr = arr .filter(item => item > 1) .map(item => item * 2);

11. 采用 let 替换闭包的 var

采用 let 能防止因闭包而增添的难题。let 会新闻稿块级返回值内的表达式，也防止了一些很难出错的标识符行为。

// badfor (var i = 0; i < 10; i++) { setTimeout(() => console.log(i), 1000);}// goodfor (let i = 0; i < 10; i++) { setTimeout(() => console.log(i), 1000);}