簡評：一開始 JavaScript 只是為網頁增添一些實時動畫效果，現在 JS 已經能做到前後端通吃了，而且還是年度流行語言。本文分享幾則 JS 小竅門，可以讓你事半功倍 ~

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

12345678

constarr=[11,22,33,44,55,66];// truncantingarr.length=3;console.log(arr);//=> [11, 22, 33]// clearingarr.length=0;console.log(arr);//=> []console.log(arr[2]);//=> undefined

2. 使用物件解構（object destructuring）來模擬命名引數

如果需要將一系列可選項作為引數傳入函式，你很可能會使用物件（Object）來定義配置（Config）。

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; // ... }

1234567

doSomething({foo:'Hello',bar:'Hey!',baz:42});functiondoSomething(config){constfoo=config.foo!==undefined?config.foo:'Hi';constbar=config.bar!==undefined?config.bar:'Yo!';constbaz=config.baz!==undefined?config.baz:13;// ...}

不過這是一個比較老的方法了，它模擬了 JavaScript 中的命名引數。

在 ES 2015 中，你可以直接使用物件解構：

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ... }

123	functiondoSomething({foo='Hi',bar='Yo!',baz=13}){// ...}

讓引數可選也很簡單：

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ... }

123	functiondoSomething({foo='Hi',bar='Yo!',baz=13}={}){// ...}

3. 使用物件解構來處理陣列

可以使用物件解構的語法來獲取陣列的元素：

const csvFileLine = '1997,John Doe,US,john@doe.com,New York'; const { 2: country, 4: state } = csvFileLine.split(',');

12	constcsvFileLine='1997,John Doe,US,[email protected],New York';const{2:country,4:state}=csvFileLine.split(',');

4. 在 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; }

123456789101112131415

functiongetWaterState(tempInCelsius){let state;switch(true){case(tempInCelsius0):state='Solid';break;case(tempInCelsius>0&&tempInCelsius100):state='Liquid';break;default:state='Gas';}returnstate;}

5. await 多個 async 函式

在使用 async/await 的時候，可以使用 Promise.all 來 await 多個 async 函式

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

1	await Promise.all([anAsyncCall(),thisIsAlsoAsync(),oneMore()])

6. 建立 pure objects

你可以建立一個 100% pure object，它不從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

12345

constpureObject=Object.create(null);console.log(pureObject);//=> {}console.log(pureObject.constructor);//=> undefinedconsole.log(pureObject.toString);//=> undefinedconsole.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" // => } // => } // =>}"

1234567891011121314151617181920

constobj={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"// =>        }// =>    }// =>}"

8. 從陣列中移除重複元素

通過使用集合語法和 Spread 操作，可以很容易將重複的元素移除：

const removeDuplicateItems = arr => [...new Set(arr)]; removeDuplicateItems([42, 'foo', 42, 'foo', true, true]); //=> [42, "foo", true]

123	constremoveDuplicateItems=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]

12	constarr=[11,[22,33],[44,55],66];constflatArr=[].concat(...arr);//=> [11, 22, 33, 44, 55, 66]

不過上面的方法僅適用於二維陣列，但是通過遞迴，就可以平鋪任意維度的巢狀陣列了：

function 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]

123456789

functionflattenArray(arr){constflattened=[].concat(...arr);returnflattened.some(item=>Array.isArray(item))?flattenArray(flattened):flattened;}constarr=[11,[22,33],[44,[55,66,[77,[88]],99]]];constflatArr=flattenArray(arr);//=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

希望這些小技巧能幫助你寫好 JavaScript ~