本文已經經過原作者 ivan 授權翻譯。

在我多年的程式設計生涯中，我會優先考慮編寫程式碼的方式，不僅是為了讓程式碼更簡潔，還因為它有助於提高編碼效率，使編寫程式碼的速度更快。

寫1000行程式碼和寫300行程式碼是不一樣的，這對我們正在做的程式或指令碼有很大的幫助。程式設計時必須非常小心，因為在大型專案中，髒程式碼可能是一個嚴重的問題。

許多程式設計師批評 JS 語言沒有像Java或c++那樣的標準工作方式，但事實是JavaScript是目前使用的最好的語言之一，其中一些是Facebook和Netflix。像React這樣的庫提高了前端效能，至於後端，nextJs用於提高速度，這些組合讓當今的程式設計師抓狂。

**ECMAScript v6（縮寫為ES6或ES2015）**是JavaScript自2015年6月以來一直遵循的標準。

透過學習以下技巧，我們能夠改善編寫程式碼的方式。花點時間在控制檯上練習，學習好。

開始吧~

1.常量使用const代替var

常量是永遠不變的變數，這樣宣告變數可以確保它們永遠不變。

/* 舊方法 */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.宣告物件

用快捷方式宣告物件

/*   舊方法  The Object() class makes an unnecessary function call*/const myObject = new Object();/* 正確方式*/const myObject = {};

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() {}/* 最好 */const myFunct = () => {}// 重要說明：在某些情況下，建議不要將這些函式與箭頭一起使用，以避免讀取錯誤

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.布林值的快捷方式

/* 不適當*/const a = 5;let b;if (a === 5){  b = 3;} else {  b = 2;}/* 正確方式 */const a = 5;const b = a === 5 ? 3 : 2;

總結

回顧這篇文章，加以練習並學會如何以一種更乾淨的方式工作，提高處理速度。

完~，我是小智，我要去刷碗了，我們下期再見！

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