一些使 JavaScript 更加簡潔的小技巧
小編推薦： ofollow,noindex">掘金是一個面向程式員的高質量技術社群，從 一線大廠經驗分享到前端開發最佳實踐，無論是入門還是進階，來掘金你不會錯過前端開發的任何一個技術乾貨。
推薦9個使 JavaScript 程式碼變得更加簡潔的小技巧，大概5分鐘就能掌握。
1.清空或截斷陣列
在不重新給陣列賦值的情況下，清空或截斷陣列的最簡單方法是更改其 length 屬性值：
const arr = [11, 22, 33, 44, 55, 66]; // truncanting arr.length = 3; console.log(arr); //=> [11, 22, 33] // clearing arr.length = 0; console.log(arr); //=> [] console.log(arr[2]); //=> undefined
2.使用物件解構(destructuring)模擬命名引數
當您需要將一組可選變數傳遞給某個函式時，你很可能已經在使用配置物件了，如下所示：
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
// ...
}
這是一個古老但有效的模式，它試圖在 JavaScript 中模擬命名引數。 函式呼叫看起來很好。 另一方面，配置物件處理邏輯不必要地冗長。 使用ES2015 物件解構，您可以繞過這個缺點：
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
// ...
}
如果你需要使配置物件也可選，也很簡單：
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
// ...
}
愚人碼頭注：此處使用 ES6 的 預設引數 新特性，可以檢視 JavaScript 函式中預設引數 瞭解更多詳情。
3.使用物件解構來處理陣列
可以使用物件解構將陣列項分配給各個變數：
const csvFileLine = '1997,John Doe,US,[email protected],New York'; const { 2: country, 4: state } = csvFileLine.split(',');
4.switch 語句中使用範圍值
注意：經過一番思考後，我決定將這個技巧與本文中的其他技巧區分開來。 這不是一種節省時間的技術，不適用於現實生活中的程式碼。 請記住：“If”語句在這種情況下總是更好。
與這篇文章中的其他提示不同，它更像是一種好奇探索而不是真正使用的東西。
但是，出於歷史原因，我會在本文中保留它。
這是在 switch 語句中使用範圍值的簡單技巧：
function getWaterState(tempInCelsius) {
let state;
switch (true) {
case (tempInCelsius < = 0): state = 'Solid'; break; case (tempInCelsius > 0 && tempInCelsius < 100):
state = 'Liquid';
break;
default:
state = 'Gas';
}
return state;
}
5.使用 async/await 來 await多個async函式
可以使用 Promise.all 來 await 多個 async（非同步）函式。
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])
6.建立純(pure)物件
您可以建立一個 100％ 純物件，它不會從 Object 繼承任何屬性或方法（例如， constructor ， toString() 等）。
const pureObject = Object.create(null);
console.log(pureObject); //=> {}
console.log(pureObject.constructor); //=> undefined
console.log(pureObject.toString); //=> undefined
console.log(pureObject.hasOwnProperty); //=> undefined
7.格式化JSON程式碼
JSON.stringify 不僅可以簡單地將物件轉化為字串。你也可以用它來格式化JSON輸出：
const obj = {
foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } }
};
// The third parameter is the number of spaces used to
// beautify the JSON output.
JSON.stringify(obj, null, 4);
// =>"{
// =>"foo": {
// =>"bar": [
// =>11,
// =>22,
// =>33,
// =>44
// =>],
// =>"baz": {
// =>"bing": true,
// =>"boom": "Hello"
// =>}
// =>}
// =>}"
愚人碼頭注：JSON.parse() 和 JSON.stringify() 有一些高階用法，你可以點選這裡 檢視。
8.從陣列中刪除重複元素(陣列去重)
通過使用通過使用集合語法和 Spread(展開)運算子，您可以輕鬆地從陣列中刪除重複項：
const removeDuplicateItems = arr => [...new Set(arr)]; removeDuplicateItems([42, 'foo', 42, 'foo', true, true]); //=> [42, "foo", true]
9.平鋪多維陣列
使用 Spread(展開)，可以很容易去平鋪巢狀多維陣列：
const arr = [11, [22, 33], [44, 55], 66]; const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]
可惜，上面的方法僅僅適用於二維陣列。不過，通過遞迴，我們可以平鋪任意維度的巢狀陣列。
unction flattenArray(arr) {
const flattened = [].concat(...arr);
return flattened.some(item => Array.isArray(item)) ?
flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr);
//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]
就是這些啦！我希望這些巧妙的小技巧可以幫助你編寫更好，更漂亮的 JavaScript 。
英文原文： https://medium.freecodecamp.org/9-neat-javascript-tricks-e2742f2735c3