在多年的编程工作中，总会优先考虑编写代码的方式，不仅是为了使代码整洁，而且因为它有助于加快开发及协作效率，减少 BUG 的出现。
同样的实现需求，不断的优化精简代码，总结归纳经验，形成技巧，不断去提升编写代码的质量。
编程时必须非常小心，因为在大型项目中，“脏”代码可能是一个严重的问题。
很多程序员批评Javascript语言没有像Java或C++这样的标准执行方式，但事实是 Javascript 是当今使用的最佳语言之一，其中一些是 Facebook 和 Netflix。像 React 这样的库提高了前端性能，至于后端，nextJs 用于提高速度，这些组合让今天的程序员抓狂。
ECMAScript v6（缩写为 ES6 或 ES2015）是 Javascript 自 2015 年 6 月以来一直遵循的标准。在此之前，我们将在浏览器和 Node.js 中使用 JS 版本。
通过学习以下技巧，将能够改善编写代码的方式，再次总结一下编写过程中的小技巧。
1、常量定义使用const代替var
常量是永远不变的变量，以这种方式声明变量，可以确保它们永远不变，避免因为变量变化导致的 BUG。
/* 旧的方式 */ var i = 1;/* 改进方式 */ const i = 1;
复制代码
2、对变化的变量使用let代替var
let语句声明了一个局部作用域的块作用域变量，这个变量将会改变:
/* 不足的方式 */var myVal = 1;for (var i; i < 10; i++){ myVal = 1 + i;}
/* 改进方式 */let myVal = 1;for (let i; i < 10; i++){ myVal += i}
复制代码
3、对象声明
使用快捷方式声明对象：
/* 旧的方式：Object()类进行了一个不必要的函数调用*/const myObject = new Object();
/* 改进方式 */const myObject = {};
复制代码
4、数组声明
使用快捷方式声明数组：
/* 旧的方式：Array()类进行了一个不必要的函数调用*/const myArray = new Array();
/* 改进方式 */const myArray = [];
复制代码
5、字符串拼接
下面拼接字符串的示例非常实用：
/* 旧的方式 */const myStringToAdd = "world";const myString = "hello " + myStringToAdd;
/* 改进方式 */const myStringToAdd = "world";const myString = `hello ${myStringToAdd}`;
复制代码
6、使用对象方法的简写
对象中实用的示例：
/* 不足的方式 */const customObject = { val: 1, addVal: function () { return customObject.val + 1; }}
/* 改进方式 */const customObject = { val: 1, addVal(){ return customObject.val++ }}
复制代码
7、创建一个对象的值
创建具有值的新对象的示例：
/* 不足的方式 */const value = 1;const myObject = { value: value}
/* 改进方式 */const value = 1;const myObject = { value}
复制代码
8、给对象赋值
将对象值分配给另一个对象的示例：
/* 旧的方式 */const object1 = { val: 1, b: 2 };let object2 = { d: 3, z: 4 };object2.val = object1.val;object2.b = object1.b;
/* 改进方式 */const object1 = { val: 1, b: 2 };const object2 = { ...object1, d: 3, z: 4 }
复制代码
9、给数组赋值
在数组中分配值的实用示例：
/* 不足方式 */const myArray = [];myArray[myArray.length] = "hello world";
/* 改进方式 */const myArray = [];myArray.push('Hello world');
复制代码
10、数组拼接
拼接数组的示例：
/* 不足 */const array1 = [1,2,3,4];const array2 = [5,6,7,8];const array3 = array1.concat(array2);
/* 改进方式 */const array1 = [1,2,3,4];const array2 = [5,6,7,8];const array3 = [...array1, ...array2]
复制代码
11、获取对象的多个属性
使用对象参数创建函数的示例：
/* 不足方式 */function getFullName(client){ return `${client.name} ${client.last_name}`;}
/* 改进方式 */function getFullName({name, last_name}){ return `${name} ${last_name}`;}
复制代码
12、获取对象的值
获取值并创建变量：
/* 不足方式 */const object1 = { a: 1 , b: 2 };const a = object1.a;const b = object1.b;
/* 改进方式 */const object1 = { a: 1 , b: 2 };const { a, b } = object1;
复制代码
13、创建函数
带有箭头的快捷函数示例：
/* 旧的方式 */function myFunc() {}/* 好的方式 */const myFunc = function() {}/* 最佳方式：可以避免this问题 */const myFunct = () => {}
复制代码
箭头函数可以避免 this 指向问题。
14、参数默认值
在函数参数中设置默认值的示例：
/* 不足方式 */const myFunct = (a, b) => { if (!a) a = 1; if (!b) b = 1; return { a, b };}
/* 正确方式 */const myFunct = (a = 1, b = 1) => { return { a, b };}
复制代码
15、使用reduce代替forEach和for来求和
求数组的总和的示例：
/* 不足方式 */const values = [1, 2, 3, 4, 5];let total = 0;values.forEach( (n) => { total += n})
/* 不充分的方式 */const values = [1, 2, 3, 4, 5];let total = 0;for (let i; i < values.length; i++){ total += values[i];}
/* 正确方式 */const values = [1, 2, 3, 4, 5];const total = values.reduce((total, num) => total + num);
复制代码
16、数组元素是否存在
/* 不足方式 */const myArray = [{a: 1}, {a: 2}, {a: 3}];let exist = false;myArray.forEach( item => { if (item.a === 2) exist = true})
/* 正确方式 */const myArray = [{a: 1}, {a: 2}, {a: 3}];const exist = myArray.some( item => item.a == 2)
复制代码
17、if 布尔值的快捷方式
/* 不足方式 */const a = 1;const b = 1;let isTrue = falseif (a === b) { isTrue = true}
/* 正确方式 */const a = 1;const b = 1;const isTrue = a === b
复制代码
18、if 值的快捷方式
/* 不足方式 */const a = 5;let b;if (a === 5){ b = 3;} else { b = 2;}
/* 正确方式 */const a = 5;const b = a === 5 ? 3 : 2;
复制代码
评论