ECMAScript 2015（ES6）有用的提示與技巧

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

EcmaScript 2015（ES6）已經出來好幾年了，能夠巧妙地使用各類新功能。列出並討論其中一些，你會發現它們頗有用。若是你知道其餘好方法，請在評論中回覆，共同窗習。

1.必傳參數

ES6提供了默認參數值，沒有該參數的狀況下調用函數時使用的默認值。

在如下示例中，將required（）函數設置爲 a 和 b 參數的默認值。 這意味着若是未傳遞a或b，則調用required（）函數，將收到錯誤。

const required = () => {throw new Error('Missing parameter')};
//The below function will trow 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」

Array的reduce方法很是通用。它一般用於將項目數組轉換爲單個值，可是你能夠用它作更多的事情。

大多數這些技巧都依賴於初始值是數組或對象而不是像字符串或變量這樣的簡單值。

2.1 使用reduce同時進行 map 和 filter 操做

假設有一個項目列表的狀況，而且想要更新每一個項目（即 Array.map 操做），而後只過濾幾個項目（即 Array.filter ）,這意味着須要兩次循環遍歷列表！

在下面的示例中，咱們但願將數組中的項的值加倍，而後選擇大於50的項。咱們使用強大的 reduce 方法高效的同時作到：

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」 代替是 「map」 或 「filter」

若是仔細查看上面的示例（2.1），就會知道 reduce 能夠代替 map 或 filter ！

2.3 使用 reduce 來判斷括號是否對稱

// 返回 0 表示對稱
const isParensBalanced = (str) => {
  return str.split('').reduce((counter, char) => {
    if (counter < 0) { // 匹配到 ')' 在 '(' 前面
      return counter;
    } else if ( char === '(') {
      return ++counter;
    } else if ( char === ')') {
      return --counter;
    } else {
      return counter; //其它字符
    }
  }, 0) // 初始化值爲0
}

isParensBalanced('(())') // 0 <---對稱
isParensBalanced('(asdfds') // 0 <---對稱
isParensBalanced('(()') // 1 <---不對稱
isParensBalanced(')(') // 0 <---不對稱

2.4 計算重複的數組項（轉換數組→對象）

有時你但願複製數組項或將數組轉換爲對象。 你可使用 reduce。

在下面的例子中，計算cars 中每一個值重複數量，並將這組對應的數據放到一個對象中：

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 還能夠作更多的事情，建閱讀 MDN上列出的示例。

3. 對象解構

3.1 屬性挑揀

有時候你想挑揀須要的屬性排除一些平須要的屬性（多是由於它們包含敏感信息或者太大了）。咱們不須要遍歷整個對象來挑揀它們，只需將這些不須要的數據提取到對應變量中，並將有用的保存在rest參數中。

在下面的示例中，咱們不須要的屬性如_internal和tooBig屬性，咱們能夠將它們分配給_internal和tooBig變量（名字要同樣），並將剩餘的保存到在 rest parameter cleanObject 參數中：

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

4.1 使用 set 時行數組去重

在ES6中，可使用 set 輕鬆時行數組去重，由於 set 只容許存儲唯一的值:

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [...new Set(arr)] // [1, 2, 3]

4.2 使用數組的方法

使用擴展運算符（...） 將 set 轉換爲數組很簡單且在集合上使用全部數組方法！

let mySet = new Set([1,2, 3, 4, 5]);
var filtered = [...mySet].filter((x) => x > 3) // [4, 5]

5. 數組解構

5.1 交換值

let param1 = 1;
let param2 = 2;

[param1, param2] = [param2, param1];
console.log(param1) // 2
console.log(param2) // 1

5.2 從一個函數接收和分配多個值

在下面的例子中，咱們在/post獲取一個post，並在/comments 獲取相關 comments 。因爲使用 async/wait，該函數以數組的形式返回結果。使用數組析構，咱們能夠直接將結果賦值到相應的變量中。

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

原文地址：https://medium.freecodecamp.o...

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。