[譯] 一些ES6的小技巧

西二線上發表於2018-04-02

原文： Check out these useful ECMAScript 2015 (ES6) tips and tricks

有任何錯誤請在評論指出，感激不盡。

EcmaScript 2015 (ES6) 已經出現了很多年了，我們可以使用它的一些新特性。

1.設定必須的函式引數

ES6 提供了 預設的引數值，可以讓你在函式的引數中指定預設值當引數沒有傳遞其值的時候。

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.
複製程式碼

在這個例子中，我們對函式 add 的引數 a 和 b 設定了一個預設值，這個預設值為一個函式。當函式 add 被執行時，且引數 a 和 b 有一個沒有傳遞值的時候，這個 required 函式就會執行，我們就會得到一個報錯 Error: Missing parameter.

2.非常強力的"reduce"

Array 的方法 reduce 是一個有非常多用處的函式。 它一個非常具有代表性的作用是將一個陣列轉換成一個值。但是你可以用它來做更多的事。

? Tip: 這些小技巧的的初始值都是一個陣列或者一個物件而不是一個像字串之類的簡單的值

2.1 使用reduce做到同時有map和filter的作用

假設有這樣的一個場景，你有一個list，裡面有一些item， 你需要更新這些item， 更新完以後你需要使用filter來過濾掉你不需要的item。但是這樣的話你需要遍歷這個陣列兩次！

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]
複製程式碼

在這個例子裡面，我們想要讓陣列裡面的值翻倍，然後我們只想要裡面大於 50 的元素。注意一下我們是如何使用 reduce 方法做到同時有讓元素的值翻倍，然後過濾的。

2.2 使用"reduce"代替"map"和"filter"

在原文中沒有體現這部分程式碼，只說了注意2.1的程式碼。在這裡我新增一下這部分程式碼:

2.2.1 使用"reduce"代替"map"
function map(arr, exec) {
    var res = arr.reduce((res, item, index) => {
        var newItem = exec(item, index)
        res.push(newItem)
        return res
    }, [])
    return res
}

[1, 2, 3].map((item) => item * 2) // [2, 4, 6]

map([1, 2, 3], item => item * 2) // [2, 4, 6]
複製程式碼
2.2.2 使用"reduce"代替"filter"
function filter(arr, exec) {
    var res = arr.reduce((res, item, index) => {
        if (exec(item, index)) {
            res.push(item)
        }
        return res
    }, [])
    return res
}

[1, 2, 3].filter((item, index) => index < 2) // [1, 2]
filter([1, 2, 3], (item, index) => index < 2) // [1, 2]
複製程式碼

2.3 使用"redece"來判斷括號是否匹配

這也是個例子來說明 reduce 這個函式功能的強大。給你一串字串，你想要知道這串字串的括號是否是匹配的。

常規的做法是使用棧來匹配，但是這裡我們使用 reduce 就可以做到，我們只需要一個變數 counter ，這個變數的初始值是 0 , 當遇到 ( 的時候，counter ++ 當遇到 ) 的時候， counter -- 。 如果括號是匹配的，那麼這個 counter 最終的值是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.4 計算陣列中元素出現的次數(將陣列轉為物件)

如果你想計算陣列中元素出現的次數或者想把陣列轉為物件，那麼你可以使用 reduce 來做到。

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 }
複製程式碼

作者建議前往MDN學習，檢視更多例子MDN

// 我也去看了一眼MDN，發現reduce真是個黑科技，promise序列這個應用非常秒啊。

3.物件解構

3.1 移除不想要的屬性

有時候你想要移除物件中的一些不需要的屬性，這個物件可能是包含了某些敏感的資訊或者只是因為這個物件太大了。我們可以使用解構來代替去遍歷這些屬性。

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

在這個例子中，我們想要移除 _internal 和 tooBig 這兩個屬性，我們可以將他們分配給變數 _internal 和 tooBig 中，剩下的屬性存放在 cleanObject 中，這就是我們想要的。

3.2 在函式引數中使用巢狀物件解構

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
複製程式碼

在這個例子中 engine 是一個巢狀在 car 裡面的物件，如果我們只需要 engine 裡面的屬性 vin 我們可以這樣做。

3.3 合併物件

ES6 新增了一個擴充套件運算子，... 使用三個點來表示，它經常用來解構陣列的值， 但是它也可以用在物件中。

在這個例子中，我們在一個新的物件中使用擴充套件運算子，後面一個物件的屬性值會把前面一個物件的屬性值覆蓋。

第二個物件中的屬性 b 和 c 的值把第一個物件中屬性 b 與 c 的值覆蓋掉了

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 使用Array的方法

可以通過(...)擴充套件運算子將 Set 轉換成 Array 這樣我們就可以在 Set 使用所有 Array 的方法了。

這個例子展示瞭如何在 Set 中使用 filter 方法

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

5.陣列的解構

5.1 交換2個值

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 函式返回多個值

async function getFullPost(){
  return await Promise.all([
    fetch('/post'),
    fetch('/comments')
  ]);
}
// const [post, comments] = getFullPost();
const [post, comments] = await getFullPost();
// 註釋掉的那一行是作者寫的，但是我跑不通，我覺得getFullPost是個Promise，所以需要加await。
複製程式碼

我們使用 async\await 來獲取2個介面的資料 /post 和 /comments ， 函式返回的是一個陣列，所以可以使用解構來獲得這兩個介面的返回值。

作者原文章的內容就到這裡，但是我想補充一下map。

6. Map

在物件中的 key 只能是 string 沒辦法接受一個 Object 當作 key 會被自動轉換成字串，例子如下：

const data = {};
const element = document.getElementById('myDiv');

data[element] = 'metadata';
data['[object HTMLDivElement]'] // "metadata"
複製程式碼

所以對於鍵值對的資料解構，map 比 Object 更加合適。

6.1 在map中使用物件當作key

const M = new Map()
let o = {p: 'Hello World'}
M.set(o, 'hello world')
M.get(o) // hello world
let O = {p: 'Hello World'}
M.get(O) // undefined
複製程式碼

注意： O != o 所以這個 M.get(O) 是 undefined

6.2 WeakMap的作用

在普通的map中，如果一個 object 被當作 key 引用了，當除了map以外，其他的變數都丟掉對這個 object 的引用，那map還是會阻止垃圾回收機制去回收這個 object 這就會導致記憶體洩漏。所以就有了WeakMap。

字面意思，WeakMap裡面的key是弱引用，並且 WeakMap中只能以 Object 當作 key 因為其他的你都可以用 Map搞啊~~那麼 WeakMap的幾個小技巧。

6.2.1 使用DOM節點作為鍵名
let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);
複製程式碼

以上例子來自 Ruanyifeng

我們用WeakMap來存DOM節點的某些狀態，當這個DOM節點被刪除時，myElement失去了引用，全世界都失去了引用，WeakMap裡面所存的狀態就會消失，所以不會存在記憶體洩漏的問題。

6.2.2 使用WeakMap來部署私有屬性

我們都知道，在JS中實現例項的私有屬性是比較困難的，有個辦法是使用閉包，但是閉包有個問題，例項被強引用，不能被垃圾回收機制處理。如下程式碼:

var Person = (function() {
    var privateData = {},
        privateId = 0;
    function Person(name) {
        Object.defineProperty(this, "_id", { value: privateId++ });
        privateData[this._id] = {
            name: name
        };
    }
    Person.prototype.getName = function() {
        return privateData[this._id].name;
    };
    return Person;
}());
複製程式碼

privateData對每個例項都是強引用，所以垃圾回收機制是處理不了的。

我們可以用weakMap很好的解決這個問題。

var privateData = new WeakMap();
var Person = (function() {
    function Person(name) {
        privateData.set(this, { name: name });
    }
    Person.prototype.getName = function() {
        return privateData.get(this).name;
    };
    return Person;
}());
複製程式碼

以上程式碼weakMap不會對例項造成強引用，也就是說，垃圾回收機制是可能把這個例項回收掉的，如果沒有其他人對這個例項保持著引用，是會被回收的，也就不會導致記憶體洩露了。

以上例子來自JavaScript實現私有屬性

相關文章