英文 | https://javascript.plainenglish.io/35-javascript-short-hands-coding-methodologies-28ea2d7d0a5e
翻譯 | 楊小二
我是Rakshit Shah，我在 IT 行業的工作經驗已經超過5年了。我是一名全棧開發人員。JavaScript确實是所有全棧開發人員的必會的技術。其他技術（Angular、Java、VueJS 等）的文法會有所不同，但我們應該更多地關注概念與實際應用！
在本文中，我将向你展示我多年來掌握的JavaScript開發技巧。當你開發很棒的腳本時，這些可能對你有用！
優化和高度可讀的代碼将增加你對日常工作生活的興趣。
現在，就讓我們開始吧。
1、聲明變量
在函數的開頭聲明指派變量是一種很好的做法。在同時聲明多個變量時，這種速記方法可以為你節省大量時間和空間。
不友好寫法：
let x;
let y;
let z = 3; 友好寫法：
let x, y, z=3; 2、使用三元運算符
當你開始使用三元條件而不是使用 if...else 語句時，你的生活會變得更輕松。
不友好寫法：
const age = 26;
let eligibility;
if(age > 18){
eligibility = "Allowed";
}
else{
eligibility = "Not Allowed";
} 友好寫法：
let eligibility = (age > 18) ? "Allowed" : "Not Allowed"; 你還可以像這樣嵌套 if 語句：
let eligibility = age > 10 ? "greater than 10" : (age < 5 ? "less than 5" : "between 5 and 10"); 3、JavaScript For 循環
如果你想要純JavaScript 并且不想依賴諸如 jQuery 或 lodash 之類的外部庫，那麼這個小技巧非常有用。
不友好寫法：
const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++) 友好寫法：
for (let fruit of fruits) 如果你隻想通路索引，請執行以下操作：
for (let index in fruits) 如果你想通路文字對象中的鍵，這也适用：
const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
console.log(key) // output: continent, country, city Array.forEach 的簡寫：
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
[5, 7, 2].forEach(logArrayElements);
// a[0] = 5
// a[1] = 7
// a[2] = 2 4、數組查找
如果你曾經負責用純 JavaScript 編寫 find 函數，你可能會使用 for 循環。在 ES6 中，引入了一個名為 find() 的新數組函數。
不友好寫法：
const pets = [
{ type: 'Dog', name: 'Max'},
{ type: 'Cat', name: 'Karl'},
{ type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
for(let i = 0; i<pets.length; ++i) {
if(pets[i].type === 'Dog' && pets[i].name === name) {
return pets[i];
}
}
} 友好寫法：
pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' } 5、If Presence
這可能是微不足道的，但值得一提。在進行“if 檢查”時，有時可以省略指派運算符。
不友好寫法：
if (isLovely === true) 友好寫法：
if (isLovely) 另外，請注意，這兩個示例并不完全相等，因為隻要 isLovely 是一個真值，它檢查就會通過。
這是另一個例子。如果 a 不等于 true，則執行某些操作。
不友好寫法：
let a;
if ( a !== true ) {
// do something...
} 友好寫法：
let a;
if ( !a ) {
// do something...
} 額外加餐：格式化 JSON 代碼
當你想在不使用任何第三方工具的情況下格式化 JSON 對象或 JSON 響應時。打開你的浏覽器控制台并點選以下指令來格式化你的JSON。
stringify 方法接受三個輸入。值、替換器和空間。也許，你隻知道價值！
接下來的兩個是可選參數。這就是為什麼我們沒有以一般方式使用它們。要縮進我們的 JSON，我們必須使用 space 參數。
console.log(JSON.stringify({name:"Rax",Age:26},null,'\t')); 6、 箭頭函數
經典函數以其簡單的形式易于閱讀和編寫，但是一旦你開始将它們嵌套在其他函數調用中，它們就會變得有點冗長和混亂。
不友好寫法：
function sayHi(name) {
console.log('Hello Rax', name);
}
setTimeout(function() {
console.log('Loaded')
}, 2000);
list.forEach(function(item) {
console.log(item);
}); 友好寫法：
sayHi = name => console.log('Hello Rax', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item)); 需要注意的是，箭頭（類似于 Java Lambda 表達式）函數中 this 的值與普通函數的确定方式不同，是以，這兩個示例并不嚴格等效。
7、多行字元串
如果你發現自己需要在代碼中編寫多行字元串，你可以這樣編寫：
不友好寫法：
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
+ 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
+ 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
+ 'veniam, quis nostrud exercitation ullamco laboris\n\t'
+ 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
+ 'irure dolor in reprehenderit in voluptate velit esse.\n\t' 但是，有一個更簡單的方法。隻需使用反引号` ...`。
友好寫法：
const lorem = `Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse.` 8、模闆文字
你是否厭倦了使用 ' + ' 将多個變量連接配接成一個字元串？難道沒有更簡單的方法來做到這一點嗎？如果你能夠使用 ES6，那麼，你很幸運。你需要做的就是使用反引号和 ${} 來包含你的變量。
不友好寫法：
const welcome = 'You have logged in as ' + firstName + ' ' + lastName + '.'
const db = 'http://' + host + ':' + port + '/' + database; 友好寫法：
const welcome = `You have logged in as ${firstName} ${lastName}`;
const db = `http://${host}:${port}/${database}`; 9、十進制指數
你可能已經看到了這個。它本質上是一種不帶尾随零的數字書寫方式。例如，1e5 實質上意味着 1 後跟 5 個零。它表示一個等于 1,00,000 的十進制基數（JavaScript 将其解釋為浮點類型）。
不友好寫法：
for (let i = 0; i < 10000; i++) {} 友好寫法：
for (let i = 0; i < 1e7; i++) {}
// All the below will evaluate to true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000; 10、短路評估
如果預期的參數為空或未定義，則無需編寫五六行代碼來配置設定預設值，我們可以簡單地使用短路邏輯運算符并僅用一行代碼完成相同的事情。
不友好寫法：
let dbHost;
if (process.env.DB) {
dbHost = process.env.DB;
} else {
dbHost = '127.0.0.1';
} 友好寫法：
const dbHost = process.env.DB || '127.0.0.1'; 加餐：擷取數組中的最後一項
如果你想從數組的末尾取元素，你可以使用帶有負整數的切片方法。
let array = [0, 1, 2, 3, 4, 5, 6, 7]
console.log(array.slice(-1));
>>>[7]
console.log(array.slice(-2));
>>>[6, 7]
console.log(array.slice(-3));
>>>[5, 6, 7] 11、對象屬性
在 JavaScript 中定義對象字面量讓生活變得更輕松。ES6 提供了一種更簡單的方法來為對象配置設定屬性。如果變量名稱與對象鍵相同，則可以利用速記符号。
不友好寫法：
const x = 2020, y = 2021;
const obj = { x:x, y:y }; 友好寫法：
const obj = { x, y }; 12、隐式回報
return 是我們經常使用的關鍵字，用于傳回函數的最終結果。帶有單個語句的箭頭函數将隐式傳回其計算結果（該函數必須省略大括号 ({}) 以省略 return 關鍵字）。
要傳回多行語句（例如對象字面量），必須使用 () 而不是 {} 來包裝函數體。這確定代碼被評估為單個語句。
不友好寫法：
function calcCircumference(diameter) {
return Math.PI * diameter
} 友好寫法：
calcCircumference = diameter => (
Math.PI * diameter;
) 13、解構指派
如果你正在使用任何流行的 Web 架構，你很有可能會使用對象文字形式的數組或資料在元件和 API 之間傳遞資訊。一旦資料對象到達一個元件，你就需要解壓它。
不友好寫法：
const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity; 友好寫法：
import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props; 你甚至可以配置設定自己的變量名稱：
const { store, form, loading, errors, entity:contact } = this.props; 大多數情況下，Visual Studio 代碼編輯器提供用于自動導入或自動完成的插件。
14、展開運算符
ES6 中引入的擴充運算符有幾個用例，可以使 JavaScript 代碼使用起來更加高效和有趣。它可用于替換某些數組函數。展開運算符是用三個點表示的。
不友好寫法：
// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice() 友好寫法：
// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr]; 與 concat() 函數不同，你可以使用擴充運算符在另一個數組内的任何位置插入一個數組。
const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6]; 你還可以将擴充運算符與 ES6 解構符号結合使用：
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 } 15、預設參數值
你可以使用 if 語句來定義函數參數的預設值。在 ES6 中，你可以在函數聲明本身中定義預設值。
不友好寫法：
function volume(l, w, h) {
if (w === undefined)
w = 3;
if (h === undefined)
h = 4;
return l * w * h;
} 友好寫法：
volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24 加餐：截斷數組
如果你想破壞性地從數組末尾删除值，有比使用 splice() 更快的替代方法。
例如，如果你知道原始數組的大小，則可以重新定義其長度屬性，如下所示：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;console.log(array); // Result: [0, 1, 2, 3] 這是一個特别簡潔的解決方案。但是，我發現 slice() 方法的運作時間更快。如果速度是你的主要目标，請考慮使用以下内容：
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);console.log(array);
// Result: [0, 1, 2, 3] 16、Object [key] 好處
你知道 Foo.bar 也可以寫成 Foo['bar'] 嗎？起初，你似乎沒有理由這樣寫。但是，這種表示法為你提供了編寫可重用代碼的建構塊。
考慮這個驗證函數的簡化示例：
function validate(values) {
if(!values.first)
return false;
if(!values.last)
return false;
return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true 這個函數完美地完成了它的工作。但是，請考慮一個場景，你有很多表單需要應用驗證，但具有不同的字段和規則。建構一個可以在運作時配置的通用驗證函數不是很好嗎？
// object validation rules
const schema = {
first: {
required:true
},
last: {
required:true
}
}
// universal validation function
const validate = (schema, values) => {
for(field in schema) {
if(schema[field].required) {
if(!values[field]) {
return false;
}
}
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true 現在我們有了一個驗證函數，我們可以在所有表單中重用，而無需為每個表單編寫自定義驗證函數。
17、指數幂
它對數學指數幂函數很有用：
不友好寫法：
Math.pow(2,3); // 8
Math.pow(2,2); // 4
Math.pow(4,3); // 64 友好寫法：
2**3 // 8
2**4 // 4
4**3 // 64 18、将字元串轉換為數字
有時你的代碼會接收到字元串格式的資料，但需要以數字格式進行處理。這沒什麼大不了的，我們可以進行快速轉換。
不友好寫法：
const num1 = parseInt("100");
const num2 = parseFloat("100.01"); 友好寫法：
const num1 = +"100"; // converts to int data type
const num2 = +"100.01"; // converts to float data type 19、Object.entries()
這是 ES8 中引入的一項功能，允許你将文字對象轉換為鍵/值對數組。請參閱下面的示例：
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.entries(credits);
console.log(arr);
/** Output:
[ [ 'producer', 'John' ],
[ 'director', 'Jane' ],
[ 'assistant', 'Peter' ]
]
**/ 20、Object.values()
這也是 ES8 中引入的一個新特性，它執行類似于 Object.entries() 的功能，但沒有關鍵部分：
const credits = { producer: 'John', director: 'Jane', assistant: 'Peter' };
const arr = Object.values(credits);
console.log(arr);
/** Output:
[ 'John', 'Jane', 'Peter' ]
**/ 加餐：使用 === 而不是 ==
==（或 !=）運算符在需要時執行自動類型轉換。===（或 !==）運算符不會執行任何轉換。它比較值和類型，這可以被認為比 == 更快。
[10] === 10 // is false
[10] == 10 // is true
'10' == 10 // is true
'10' === 10 // is false
[] == 0 // is true
[] === 0 // is false
'' == false // is true but true == "a" is false
'' === false // is false 另外，請注意，undefined、null、0、false、NaN、''（空字元串）都是假的。
21、按位索引
使用數組執行查找時，indexOf() 函數用于檢索你要查找的項目的位置。如果未找到該項目，則傳回值 -1。在 JavaScript 中，0 被認為是“假的”，而大于或小于 0 的數字被認為是“真”的。是以，必須像這樣編寫正确的代碼。
不友好寫法：
if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
} 友好寫法：
if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
} 按位（~）運算符将傳回除 -1 以外的任何值的真值。否定它就像！~一樣簡單。或者，我們也可以使用 includes() 函數：
if(arr.includes(item)) { // Returns true if the item exists, false //if it doesn't
} 22、對象屬性指派
考慮以下代碼：
let fname = { firstName : 'Black' };
let lname = { lastName : 'Panther'} 你如何将它們合并為一個對象？一種方法是編寫一個函數，将資料從第二個對象複制到第一個對象上。不幸的是，這可能不是你想要的——你可能需要建立一個全新的對象而不改變任何現有對象。最簡單的方法是使用 ES6 中引入的 Object.assign 函數：
let full_names = Object.assign(fname, lname); 你還可以使用 ES8 中引入的對象銷毀符号：
let full_names = {...fname, ...lname}; 你可以合并的對象屬性數量沒有限制。如果你确實有具有相同屬性名稱的對象，則值将按照它們合并的順序被覆寫。
23、Double Bitwise NOT 速記
按位運算符是你在 JavaScript 初學者教程中學到的功能之一，而且，你永遠無法在任何地方實作它們。同意嗎？此外，如果你不處理二進制，誰願意使用 1 和 0？
然而，雙位非運算符有一個非常實用的用例。你可以将其用作 Math.floor() 的替代品。Double Bitwise NOT 運算符的優點是它執行相同操作的速度要快得多。您可以在此處閱讀有關按位運算符的更多資訊。
不友好寫法：
Math.floor(4.9) === 4 //true 友好寫法：
~~4.9 === 4 //true 24、短路評估
将變量值配置設定給另一個變量時，你可能希望確定源變量不為空、未定義或為空。你可以編寫帶有多個條件的長 if 語句，也可以使用短路評估。
不友好寫法：
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
let variable2 = variable1;
} 友好寫法：
const variable2 = variable1 || 'new'; 不相信我？自行測試（在es6console中粘貼以下代碼）：
let variable1;
let variable2 = variable1 || 'bar';
console.log(variable2 === 'bar'); // prints true
variable1 = 'foo';
variable2 = variable1 || 'bar';
console.log(variable2); // prints foo 請注意，如果将 variable1 設定為 false 或 0，将配置設定值欄。
25、強制參數
預設情況下，如果未傳遞值（簡而言之，未配置設定任何值），JavaScript 會将函數參數設定為 undefined。其他一些語言會抛出警告或錯誤。要強制參數配置設定，你可以使用 if 語句在未定義時抛出錯誤，或者你可以利用“強制參數速記”。
不友好寫法：
function foo(bar) {
if(bar === undefined) {
throw new Error('Missing parameter!');
}
return bar;
} 友好寫法：
mandatory = () => {
throw new Error('Missing parameter!');
}
foo = (bar = mandatory()) => {
return bar;
} 加餐：交換兩個變量
為了交換兩個變量，我們經常使用第三個變量。但是它可以通過數組解構指派輕松完成。
不友好寫法：
let x = "rakshit", y = "shah";
const temp = x;
x = y;
y = temp; 友好寫法：
[x,y] = [y,x] 26、将任何東西轉換為布爾值
在開發任何代碼時，你可能會遇到需要布爾值來比較或進行真/假檢查的情況。這種方法在這種情況下會很有用！
const foo = 'some string lines';
const toBool = !!foo
console.log(toBool) // true 27、 将任何東西轉換為數字
通過使用 + 運算符，你可以實作它。
const foo = '522'
const toNumber = +foo
console.log(toNumber) // 522
const toNegativeNumber = -foo
console.log(toNegativeNumber) // -522 28、将數組轉換為對象
const arr = [ 'foo', 'bar', 1]
const obj = { ...arr }
console.log(obj) // {0: "foo", 1: "bar", 2: 1} 29、删除Array中的重複項
Set 對象允許你存儲任何類型的唯一值，無論是原始值還是對象引用。
const arr = ['a', 'b', 'c', 'b', 'd']
const newArr = [... new Set(arr)]
console.log(newArr) // ["a", "b", "c", "d"] 30、經常注釋你的代碼
通常，開發人員讨厭或忘記為他們開發的函數、算法或代碼添加注釋。顯然，如果你在需要的地方發表評論，這将對你的同行有所幫助。
注釋是總結代碼片段目的的好方法，可以為你的開發夥伴節省自行确定它所需的時間。
如果代碼沒有完成，它被注釋成完成的任務，它還允許他們捕捉可能的錯誤。一般來說，最好對每個功能都留下一個注釋。
如果你不确定是否應該發表評論，那就去做吧！如果它太雜亂，以後可以随時删除。
當你覺得有些代碼缺失或需要在未來完成時，隻需添加 TODO 注釋即可。
//declares and initializes var x
<script>
var x = 5;
//TODO: Add a function to find factorial of value x.
</script> 結論
我知道還有許多其他技巧和良好做法，是以，如果你有任何要添加的内容，或者你對我分享的内容有任何回報或更正，請添加評論。
不要自私，請與你的朋友分享知識。
學習更多技能
請點選下方公衆号
![JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明 三、函數的調用[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)