寫在前面
之前學習react 過程中，遇到… 知道的不是很清楚，只是知道例如下面這樣…arr1 相當於2, 4, 5, 6
let arr1 = [2, 4, 5, 6]
let arr2 = [...arr1]
arr2 輸出爲 [2, 4, 5, 6]
程序員一定要一直保持學習的狀態，反正我就是秉着這樣的心態在前端這個領域一直摸索，以至於我的頸椎、前腦門、曾經一抓一大把的頭髮。。。你們懂得
言歸正傳，我查了好多資料，現在整理一下我對這個…得認知：
人家有個專業名詞，叫做es6的擴展運算符，是一種展開語法，有什麼用處呢，我們來看看
在MDN上面的介紹比較詳細了:
展開語法(Spread syntax), 可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開；還可以在構造字面量對象時, 將對象表達式按key-value的方式展開。(譯者注: 字面量一般指 [1, 2, 3] 或者 {name: “mdn”} 這種簡潔的構造方式)可以在函數調用/數組構造時, 將數組表達式或者string在語法層面展開
什麼意思呢？就想我開篇寫的那樣 …arr1 就相當於2, 4, 5, 6
let arr2 = […arr1] 就相當於let arr2 = [2, 4, 5, 6]，…起到的作用將一個數組轉爲用逗號分隔的參數序列
具體用處簡單總結如下：
- 合併數組
// ES5 的寫法
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
Array.prototype.push.apply(arr1, arr2) ==> [1, 2, 3, 4, 5, 6]
// ES6 的寫法
arr1.push(...arr2)
- 數組最大元素
var args = [1, 3, 5];
// ES5 的寫法
Math.max.apply(null, args) ==>5
// ES6 的寫法
Math.max(...args) ==>5
// 是不是簡單了許多
- 可以解構賦值結合, 用於生成數組，就是把剩餘的東西放到一個array裏面賦值給它。一般只針對array的解構
let arr = [1, 2, 3, 4]
let first = arr[0]
let rest = arr.slice(1)
console.log(item) ==>[2, 3, 4]
// 使用擴展運算符
[first, ...rest] = arr
console.log(item) ==>[2, 3, 4]
* 需要注意的是：如果將擴展運算符用於數組賦值，只能放在參數的最後一位，否則會報錯
- 在對象的使用
let obj1 = {
a: 1,
b: 2
}
let obj2 = {
c: 3,
...obj1
}
- 擴展運算符還可以將字符串轉爲數組
[...'strToArr'] ==> ['s', 't', 'r', 'T', 'o', 'A', 'r', 'r']
- 好多獲取dom的方法，例如querySelectorAll方法返回的是一個nodeList對象。它不是數組，而是一個類似數組的對象。可以擴展運算符可以將其轉爲真正的數組
let domArr =[...document.querySelectorAll('.list')]
- 擴展運算符內部調用的是數據結構的 Iterator 接口(遍歷器)，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結構
let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]
今天肩膀有點痛哦，加油吧，小夥伴們 !!!
對了，補充一下，如果在vue項目中用到…報錯，需要安裝一個插件： npm install --save-dev babel-plugin-transform-object-rest-spread
在.babelrc文件中配置： {“plugins”:[“transform-object-rest-spread”]}