18个编写JavaScript代码的技巧-技术圈

英文 | https://medium.com/javascript-in-plain-english/18-tips-for-writing-javascript-code-like-a-hero-17ca1dc49da9

翻译 | web前端开发（ID：web_qdkf)

在我多年的编程工作中，我总是优先考虑编写代码的方式，不仅是为了使代码干净，而且还因为它可以提高处理速度，并且可以更快地编写代码。

写1000行代码与写300行代码不同之处在于，这对我们正在执行的程序或脚本有很大帮助。

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

许多程序员批评JavaScript语言没有像Java或C ++这样的标准工作方式，但事实是Javascript是当今使用的最佳语言之一。

像React这样的库可以提高前端性能，而对于后端，nextJs可以提高速度，这些技术可以组合使用。

通过学习以下技巧，将能够帮助你改善编写代码的方式。花点时间在控制台上练习。

1、对常量使用“ const”而不是“ var”

常量是永远不变的变量，以这种方式声明变量，我们确保它们永远不变

/* Wrong */var i = 1;/* Correct */const i = 1;

2、对更改的变量使用“ let”代替“ var”

让语句声明了块作用域的本地变量，这个变量将发生变化：

/* Wrong */var myVal = 1;for (var i; i < 10; i++){  myVal = 1 + i;}/* Correct */let myVal = 1;for (let i; i < 10; i++){  myVal += i}

3、声明对象

快捷方式声明对象的示例：

/* Wrong */const myObject = new Object();/* Correct */const myObject = {};

4、声明数组

声明数组的快捷方式示例：

/* Wrong */const myArray = new Array();/* Correct */const myArray = [];

5、连接字符串

连接字符串的示例非常有用：

/* Wrong */const myStringToAdd = "world";const myString = "hello " + myStringToAdd;/* Correct */const myStringToAdd = "world";const myString = `hello ${myStringToAdd}`;

6、使用对象方法的简写

对象中有用功能的示例：

/* Wrong */const customObject = {  val: 1,  addVal: function () {   return customObject.val + 1;  }}/* Correct */const customObject = {  val: 1,  addVal(){    return customObject.val++  }}

7、创建对象的值

创建具有值的新对象的示例：

/* Wrong */const value = 1;const myObject = {  value: value}/* Correct */const value = 1;const myObject = {  value}

8、为对象分配值

将对象值分配给另一个对象的示例：

/* Wrong */const object1 = { val: 1, b: 2 };let object2 = { d: 3, z: 4 };object2.val = object1.val;object2.b = object1.b;/* Correct */const object1 = { val: 1, b: 2 };const object2 = { ...object1, d: 3, z: 4 }

9、给数组赋值

快捷方式示例在数组中分配值：

/* Wrong */const myArray = [];myArray[myArray.length] = "hello world";/* Correct */const myArray = [];myArray.push('Hello world');

10、串联数组

连接数组的示例：

/* Wrong */const array1 = [1,2,3,4];const array2 = [5,6,7,8];const array3 = array1.concat(array2);/* Correct */const array1 = [1,2,3,4];const array2 = [5,6,7,8];const array3 = [...array1, ...array2]

11、获取对象的多个属性

使用对象参数创建函数的示例：

/* Wrong */function getFullName(client){  return `${client.name} ${client.last_name}`;}/* Correct */function getFullName({name, last_name}){  return `${name} ${last_name}`;}

12、从对象获取值

获取值和创建变量的示例：

/* Wrong */const object1 = { a: 1 , b: 2 };const a = object1.a;const b = object1.b;/* Correct */const object1 = { a: 1 , b: 2 };const { a, b } = object1;‍

13、创建功能

快捷功能示例：

/* Wrong */function myFunc() {}/* Wrong */const myFunc = function() {}/* Correct */const myFunct = () => {}

14、默认值

在功能参数中设置默认值的示例：

/* Wrong */const myFunct = (a, b) => {  if (!a) a = 1;  if (!b) b = 1;  return { a, b };}/* Correct */const myFunct = (a = 1, b = 1) => {  return { a, b };}

15、用“ reduce”代替“ forEach”和“ for”来求和

数组的快捷方式总和的示例：

/* Wrong */const values = [1, 2, 3, 4, 5];let total = 0;values.forEach( (n) => { total += n})/* Wrong */const values = [1, 2, 3, 4, 5];let total = 0;for (let i; i < values.length; i++){  total += values[i];}/* Correct */const values = [1, 2, 3, 4, 5];const total = values.reduce((total, num) => total + num);

16、存在于数组中

/* Wrong */const myArray = [{a: 1}, {a: 2}, {a: 3}];let exist = false;myArray.forEach( item => { if (item.a === 2) exist = true})/* Correct */const myArray = [{a: 1}, {a: 2}, {a: 3}];const exist = myArray.some( item => item.a == 2)

17、布尔值的快捷方式

/* Wrong */const a = 1;const b = 1;let isTrue = falseif (a === b) {  isTrue = true}/* Correct */const a = 1;const b = 1;const isTrue = a === b

18、值的快捷方式

/* Wrong */const a = 5;let b;if (a === 5){  b = 3;} else {  b = 2;}/* Correct */const a = 5;const b = a === 5 ? 3 : 2;

结论

通过这篇文章的学习，你可以练习如何以更清洁的方式工作并提高处理速度。当我发现有新或者更好的技巧时，我会进行改进，并与你一起来分享，同时，也希望你可以将你的一些好的技巧，在留言区告诉我。

请记住，如果你有任何疑问请告诉我，我将非常高兴为你提供帮助。

最后，感谢你的阅读。

本文完〜