ES6 的幾個小技巧

tumars發表於2018-03-27

前言

本文系翻譯自 Check out these useful ECMAScript 2015 (ES6) tips and tricks

本文首發於個人部落格：www.ferecord.com/check-out-t…。如若轉載請附上原文地址，以便更新溯源。

EcmaScript 2015 (即 ES6) 已經發布兩年多了，它的很多新功能都可以被技巧性的使用。這篇文章把一些小技巧列出來，希望能對你有用。

1. 強制引數

ES6 提供了預設引數的概念，當函式的引數未傳入或者傳入值為 undefined 時，會應用引數的預設值。

預設值可以是個表示式，所以我們可以將預設值設定為一個執行函式，如果該引數沒有傳值，就會執行我們的預設函式：

const required = () => {throw new Error('Missing parameter')};

//The below function will throw an error if either "a" or "b" is missing.
const add = (a = required(), b = required()) => a + b;

add(1, 2) //3
add(1) // Error: Missing parameter.
複製程式碼

2. 強大的 reduce

reduce 是一個多才多藝的陣列方法，請跟隨我看一下。

2.1 使用 reduce 替代 map + filter

設想你有這麼個需求：要把陣列中的值進行計算後再濾掉一些值，然後輸出新陣列。很顯然我們一般使用 map 和 filter 方法組合來達到這個目的，但這也意味著你需要迭代這個陣列兩次。

來看看我們如何使用 reduce 只迭代陣列一次，來完成同樣的結果。下面這個例子我們需要把陣列中的值乘 2 ，並返回大於 50 的值：

const numbers = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce((finalList, num) => {
  
  num = num * 2; //double each number (i.e. map)
  
  //filter number > 50
  if (num > 50) {
    finalList.push(num);
  }
  return finalList;
}, []);

doubledOver50; // [60, 80]
複製程式碼

2.2 使用 reduce 檢測括號是否對齊封閉

下面這個例子我們用 reduce 來檢測一段 string 中的括號是否前後對應封閉。

思路是定義一個名為 counter 的變數，它的初始值為 0 ，然後迭代字串，迭代過程中碰到(就加 1，碰到)就減 1，如果括號前後對應的話，最終couter的值會是 0。

//Returns 0 if balanced.
const isParensBalanced = (str) => {
  return str.split('').reduce((counter, char) => {
    if(counter < 0) { //matched ")" before "("
      return counter;
    } else if(char === '(') {
      return ++counter;
    } else if(char === ')') {
      return --counter;
    }  else { //matched some other char
      return counter;
    }
    
  }, 0); //<-- starting value of the counter
}

isParensBalanced('(())') // 0 <-- balanced
isParensBalanced('(asdfds)') //0 <-- balanced
isParensBalanced('(()') // 1 <-- not balanced
isParensBalanced(')(') // -1 <-- not balanced
複製程式碼

2.3 使用 reduce 計算陣列中的重複項

如果你想計算陣列中的每個值有多少重複值，reducer 也可以快速幫到你。下面的例子我們計算陣列中每個值的重複數量，並輸出一個物件來展示：

var cars = ['BMW','Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce(function (obj, name) { 
   obj[name] = obj[name] ? ++obj[name] : 1;
  return obj;
}, {});

carsObj; // => { BMW: 2, Benz: 2, Tesla: 1, Toyota: 1 }
複製程式碼

reduce 的非常強大，建議各位 把 reduce 的介紹通讀一遍：Reduce_MDN

3. 物件解構

3.1 移除物件的多餘屬性

有時你可能希望移除一個物件中的某些屬性，我們一般會通過迭代這個物件（如 for..in 迴圈）來移除那些我們不想要的屬性。實際上我們可以通過物件解構的方法將不想要的屬性提取出來，並將想留下來的變數儲存在*rest* 引數中。

在下面的這個例子中，我們從物件中移除_internal和tooBig這兩個屬性：

let {_internal, tooBig, ...cleanObject} = {el1: '1', _internal:"secret", tooBig:{}, el2: '2', el3: '3'};

console.log(cleanObject); // {el1: '1', el2: '2', el3: '3'}
複製程式碼

3.2 巢狀物件解構

下面的示例中，engine屬性是物件car內的巢狀物件。我們可以通過物件解構快速的獲取到engine中的屬性，比如vin:

var car = {
  model: 'bmw 2018',
  engine: {
    v6: true,
    turbo: true,
    vin: 12345
  }
}

const modelAndVIN = ({model, engine: {vin}}) => {
  console.log(`model: ${model} vin: ${vin}`);
}

modelAndVIN(car); // => model: bmw 2018  vin: 12345
複製程式碼

3.3 合併物件

ES6 增加了展開運算子（也就是三個點），展開運算子常常用在處理陣列解構上，在物件的解構上它也同樣好用。

下面的示例中我們合併兩個物件，新物件中相同的屬性會被放在後面的物件覆蓋：

let object1 = { a:1, b:2,c:3 }
let object2 = { b:30, c:40, d:50}
let merged = {...object1, ...object2} //spread and re-add into merged

console.log(merged) // {a:1, b:30, c:40, d:50}
複製程式碼

4. 使用 Sets 陣列去重

使用 Sets 可以快速給陣列去重，因為 Sets 中的值不可重複。

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]
複製程式碼

5. 陣列解構

5.1 交換變數的值

let param1 = 1;
let param2 = 2;

//swap and assign param1 & param2 each others values
[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1
複製程式碼

5.2 從函式接受和分配多個值

很多時候你的函式都會將多個資料放在陣列內，以返回一個單一值（例如 Promise 函式，它的決議值只能是個單一值），我們可以使用陣列解構簡便的從返回結果中獲取這些值。

下面的這個例子中，我們使用 fetch 傳送了兩個請求，並使用 Promise.all() 將兩個結果儲存在陣列中，函式的執行結果是返回這個陣列。

function getFullPost(){
  return Promise.all([
    fetch('/post'),
    fetch('/comments')
  ]);
}


// 在 async 函式中
const [post, comments] = await getFullPost();
複製程式碼

本文完。 have a nice day (￣▽￣)~*

相關文章