[[377080]]

 我相信你一定或多或少的接觸或使用過 JS 中的擴(kuò)展操作符(Spread Operator)，在基本形式中，擴(kuò)展操作符看起來像三個(gè)點(diǎn)，比如如下這樣：

[...arr] 

而實(shí)際上，它也就是這么用的，但是如果事情有這么簡(jiǎn)單，就不用我在這里寫了。擴(kuò)展操作符給我最大的印象就是，這玩意還挺方便的，然而最近寫代碼的時(shí)候經(jīng)常性的遇到需要使用擴(kuò)展操作符的場(chǎng)景，所以我干脆在網(wǎng)上找了些資料，把平時(shí)常見的應(yīng)用場(chǎng)景給羅列了下，發(fā)現(xiàn)這個(gè)操作符是真的強(qiáng)大，有多強(qiáng)大?來看看下面這些用法吧。

1. 字符串轉(zhuǎn)數(shù)組

字符串轉(zhuǎn)數(shù)組最普遍的做法是這樣：

let str = 'hello' 
let arr = str.split('') 
console.log(arr)  // ['h', 'e', 'l', 'l', 'o'] 

而使用了擴(kuò)展操作符后可以這樣：

let str = 'hello' 
let arr = [...str] 
console.log(arr)  // ['h', 'e', 'l', 'l', 'o'] 

2. 將類數(shù)組轉(zhuǎn)換為數(shù)組

在 JS 中有一種數(shù)據(jù)結(jié)構(gòu)叫做 NodeList，它和數(shù)組很相似，也被叫做“類數(shù)組”，類數(shù)組是什么?在 MDN 中是這么定義它的：

• “類數(shù)組：擁有一個(gè) length 屬性和若干索引屬性的任意對(duì)象。

類數(shù)組有哪些呢?以下這些可以看成是類數(shù)組：

• NodeList：document.querySelectorAll() 返回的對(duì)象;
• HTMLCollection：document.getElementsByTagName() 返回的對(duì)象;
• Arguments：函數(shù)里的參數(shù)對(duì)象;

類數(shù)組沒有數(shù)組的一些方法比如 push、map 等，所以經(jīng)常需要將它們轉(zhuǎn)成數(shù)組，而通常我們是這么轉(zhuǎn)化的：

let nodeList = document.querySelectorAll('div') 
console.log(nodeList instanceof NodeList)  // true 
 
let arr = Array.apply(null, nodeList) 
console.log(arr instanceof Array)  // true 
 
// 或者 
let arr2 = [].slice.call(nodeList) 
console.log(arr2 instanceof Array)  // true 
 
// 又或者 
let arr3 = Array.from(nodeList) 
console.log(arr3 instanceof Array)  // true 

而有了擴(kuò)展操作符可以這么做：

let nodeList = document.querySelectorAll('div') 
let arr = [...nodeList] 
console.log(arr instanceof Array)  // true 

3. 向數(shù)組中添加項(xiàng)

往數(shù)組中添加幾項(xiàng)通常這樣操作：

let arr = [5] 
 
// 從頭部添加 
arr.unshift(1, 2) 
console.log(arr)  // [1, 2, 5] 
 
// 從尾部添加 
arr.push(6, 7) 
console.log(arr)  // [1，2, 5, 6, 7] 
 
// 從任意位置添加 
arr.splice(2, 0, 3, 4) 
console.log(arr)  // [1，2, 3, 4, 5, 6, 7] 

使用擴(kuò)展操作符后：

let arr = [3, 4] 
arr = [1, 2, ...arr, 5, 6] 
console.log(arr)  // [1, 2, 3, 4, 5, 6] 

4. 拷貝數(shù)組和對(duì)象

通?？截愐粋€(gè)數(shù)組，可以這么做：

let arr = [1, 3, 5, 7] 
let arr2 = arr.concat() 
 
// 或者 
let arr3 = arr.slice() 
arr[0] = 2 
console.log(arr)   // [2, 3, 5, 7] 
console.log(arr2)  // [1, 3, 5, 7] 
console.log(arr3)  // [1, 3, 5, 7] 

但是有了擴(kuò)展操作符，拷貝數(shù)組就能寫得很簡(jiǎn)單：

let arr = [1, 3, 5, 7] 
let arr2 = [...arr] 
arr[0] = 2 
console.log(arr2)  // [1, 3, 5, 7] 

同樣的，擴(kuò)展操作符還能拷貝對(duì)象?？截悓?duì)象的通常做法：

let person = { name: '布蘭', age: 12} 
let p2 = Object.assign({}, person) 
person.age = 20 
console.log(person)  // { name: '布蘭', age: 20 } 
console.log(p2)      // { name: '布蘭', age: 12 } 

有了擴(kuò)展操作符，拷貝一個(gè)對(duì)象就相當(dāng)方便了：

let person = { name: '布蘭', age: 12 } 
let p2 = {...person} 
person.age = 20 
console.log(person)  // { name: '布蘭', age: 20 } 
console.log(p2)      // { name: '布蘭', age: 12 } 
 
// 甚至還可以這么寫 
let {...p3} = person 

• “注意：擴(kuò)展操作符只能深拷貝結(jié)構(gòu)為一層的對(duì)象，如果對(duì)象是兩層的結(jié)構(gòu)，那么使用擴(kuò)展操作符拷貝會(huì)是淺拷貝。

5. 合并數(shù)組或?qū)ο?/span>

數(shù)組合并通常是這么做的：

let arr1 = [1, 3, 5] 
let arr2 = [2, 4, 6] 
let arr3 = arr1.concat( arr2 ) 
console.log(arr3)  // [1, 3, 5, 2, 4, 6] 

使用擴(kuò)展操作符后，可以這么寫：

let arr1 = [1, 3, 5] 
let arr2 = [2, 4, 6] 
let arr3 = [...arr1, ...arr2] 
console.log(arr3)  // [1, 3, 5, 2, 4, 6] 

對(duì)了，它除了能合并數(shù)組外還能合并對(duì)象呢。合并對(duì)象，通常的做法是：

let p1 = { name: '布蘭' } 
let p2 = { age: 12 } 
let p3 = Object.assign({}, p1, p2) 
console.log(p3)  // { name: '布蘭', age: 12} 

用擴(kuò)展操作符合并對(duì)象：

let p1 = { name: '布蘭' } 
let p2 = { age: 12 } 
let p3 = { ...p1, ...p2 } 
console.log(p3)  // { name: '布蘭', age: 12} 

6. 解構(gòu)對(duì)象

經(jīng)常我們給對(duì)象設(shè)置參數(shù)的時(shí)候會(huì)這么做：

let person = { 
    name: '布蘭', 
    age: 12, 
    sex: 'male' 
} 
let name = person.name 
let age = person.age 
let sex = person.sex 

而有了擴(kuò)展操作符，我們就可以這么寫，不過其實(shí)如下這種寫法并不是擴(kuò)展操作符的寫法🤣，而是剩余操作符的寫法，雖然寫出來后看起來差不多，但就在操作對(duì)象這一點(diǎn)上，基本上可以認(rèn)為它和擴(kuò)展操作符是相反的操作，擴(kuò)展操作符是用來展開對(duì)象的屬性到多個(gè)變量上，而剩余操作符是用來把多個(gè)參數(shù)凝聚到一個(gè)變量上。

let person = { 
    name: '布蘭', 
    age: 12, 
    sex: 'male' 
} 
let { name, ...reset } = person 
console.log(name)   // '布蘭' 
console.log(reset)  // { age: 12, sex: 'male' } 

7. 給對(duì)象添加屬性

給對(duì)象加屬性通常這樣加：

let person = { name: '布蘭' } 
person.age = 12 
console.log(person)  // { name: '布蘭', age: 12 } 

使用擴(kuò)展操作符給對(duì)象添加屬性：

let person = { name: '布蘭' } 
person = {...person, age: 12} 
console.log(person)  // { name: '布蘭', age: 12 } 

關(guān)于使用擴(kuò)展操作符給對(duì)象添加屬性，這里有 2 個(gè)小技巧：

1.給新對(duì)象設(shè)置默認(rèn)值：

// 默認(rèn) person 對(duì)象的 age 屬性值 為 12 
let person = {age: 12, ...{ name: '布蘭' } } 
console.log(person)  // { age: 12, name: '布蘭' }  

2.重寫對(duì)象屬性

let person = { name: '布蘭', age: 12 } 
 
// person 對(duì)象的 age 屬性被重寫為 20 
person = {...person, age: 20 } 
console.log(person)  // { name: '布蘭', age: 20 } 

8. 設(shè)置對(duì)象 Getter

設(shè)置對(duì)象 Getter 通常做法是這樣：

let person = { name: '布蘭' } 
Object.defineProperty(person, 'age', { 
    get() { return 12 }, 
    enumerable: true, 
    configurable: true 
}) 
console.log(person.age)  // 12 

而有了擴(kuò)展操作符后可以這么寫：

let person = { name: '布蘭' } 
person = { 
    ...person,  
    get age() { return 12 } 
} 
console.log(person.age)  // 12 

9. 將數(shù)組作為函數(shù)參數(shù)展開

如果我們有一個(gè)形參是多個(gè)參數(shù)的函數(shù)，但是當(dāng)調(diào)用的時(shí)候發(fā)現(xiàn)入?yún)s是一個(gè)數(shù)組，常規(guī)做法是這樣：

let arr = [1, 3, 5] 
function fn(a, b, c) { }  
fn.apply(null, arr) 

使用擴(kuò)展操作符后，就簡(jiǎn)單多了：

let arr = [1, 3, 5] 
function fn(a, b, c) { }  
fn(...arr) 

10. 無限參數(shù)的函數(shù)

如果有這么一個(gè)累加函數(shù)，他會(huì)把所有傳遞進(jìn)來的參數(shù)都加起來，普通做法是把參數(shù)都整合到數(shù)組里，然后這樣做：

function doSum(arr) { 
    return arr.reduce((acc, cur) => acc + cur) 
} 
console.log( doSum([1, 3]) )     // 4 
console.log( doSum([1, 3, 5]) )  // 9 

如果參數(shù)不是數(shù)組，而是需要一個(gè)個(gè)傳遞，相當(dāng)于函數(shù)必須支持無限參數(shù)，那可能會(huì)這么做：

function doSum() { 
    let sum = 0 
    for(let i = 0, l = arguments.length; i < l; i++){ 
        sum += arguments[i] 
    } 
    return sum 
     
    // 或者 
    // let args = [].slice.call(arguments)  
    // return args.reduce((acc, cur) => acc + cur) 
} 
console.log( doSum(1, 3) )        // 4 
console.log( doSum(1, 3, 5) )     // 9 
console.log( doSum(1, 3, 5, 7) )  // 16 

而有了擴(kuò)展操作符，就簡(jiǎn)單多了：

function doSum(...arr) { 
    return arr.reduce((acc, cur) => acc + cur) 
} 
console.log( doSum(1, 3) )        // 4 
console.log( doSum(1, 3, 5) )     // 9 
console.log( doSum(1, 3, 5, 7) )  // 16 

11. 擴(kuò)展函數(shù)的剩余參數(shù)

有的時(shí)候一個(gè)函數(shù)需要傳遞很多的參數(shù)，比如小程序頁(yè)面(WePY)的 onLoad 生命周期函數(shù)里就可能有很多別的頁(yè)面?zhèn)鬟f過來的參數(shù)，然后還需要在函數(shù)里進(jìn)行一些數(shù)據(jù)初始化工作，這樣一來就會(huì)顯得很臃腫不美觀，比如：

function init(a, b, x, y) { 
    // 進(jìn)行一系列初始化數(shù)據(jù)工作 
} 

而使用了擴(kuò)展操作符后，我們就可以按照業(yè)務(wù)把參數(shù)進(jìn)行解構(gòu)，把本該在一個(gè)函數(shù)里進(jìn)行初始化的工作拆分成多個(gè)，可以這么做：

function other( x, y ) {} 
function init(a, b, ...restConfig) { 
    // 使用 a 和 b 參數(shù)進(jìn)行操作 
    // 其余參數(shù)傳給原始函數(shù) 
    return other( ...restConfig ) 
} 

12. 結(jié)合 Math 函數(shù)使用

比如當(dāng)需要對(duì)一個(gè)數(shù)組求最大值的時(shí)候，通常會(huì)這么做：

let arr = [3, 1, 8, 5, 4] 
function max(arr) { 
    return [].concat(arr).sort((a, b) => b - a) 
} 
console.log(max(arr)[0])  // 8 
 
// 或者 
arr.reduce((acc, cur) => Math.max(acc, cur))  // 8 
 
// 又或者 
Math.max.apply(null, arr)  // 8 

但是使用擴(kuò)展操作符后，能夠把給數(shù)組求最大值寫得更加簡(jiǎn)潔：

let arr = [3, 1, 8, 5, 4] 
let max = Math.max(...arr) 
console.log(max)  // 8 

13. 在 new 表達(dá)式中使用

假設(shè)有一個(gè)數(shù)組格式的日期，想要通過 Date 構(gòu)造函數(shù)創(chuàng)建一個(gè)日期實(shí)例的話，可能會(huì)這么做：

let arr = [2021, 1, 1] 
let date = new Date([].toString.call(arr)) 
console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)' 
 
// 或者 
let date2 = new (Function.prototype.bind.apply( 
    Date,  
    [null].concat(arr) 
)) 
console.log(date2)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)'  

而有了擴(kuò)展操作符就簡(jiǎn)單多了：

let arr = [2021, 1, 1] 
let date = new Date(...arr) 
console.log(date)  // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)' 

總結(jié)

這個(gè)操作符真可謂使用簡(jiǎn)單無腦，但是功能效率上不得不說很強(qiáng)大，所以我們要做的就是只要記住在什么時(shí)候使用它就好了，于是乎為了讓大家能更好的記住這 13 種使用場(chǎng)景，我特意做了一個(gè)圖，方便大家記憶，是不是很貼?。以上這些只列了 13 種寫法，我覺得作為一個(gè)這么強(qiáng)大的操作符，肯定有更多使用的場(chǎng)景。