写点什么

优雅编码 | 18 个 Javascript 代码的小技巧

用户头像
devpoint
关注
发布于: 2021 年 01 月 24 日
优雅编码 | 18个Javascript代码的小技巧

在多年的编程工作中,总会优先考虑编写代码的方式,不仅是为了使代码整洁,而且因为它有助于加快开发及协作效率,减少 BUG 的出现。


同样的实现需求,不断的优化精简代码,总结归纳经验,形成技巧,不断去提升编写代码的质量。


编程时必须非常小心,因为在大型项目中,“脏”代码可能是一个严重的问题。


很多程序员批评Javascript语言没有像JavaC++这样的标准执行方式,但事实是 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代替forEachfor来求和


求数组的总和的示例:


/* 不足方式 */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;
复制代码


发布于: 2021 年 01 月 24 日阅读数: 22
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
优雅编码 | 18个Javascript代码的小技巧