讓人愛不釋手的 JS 擴展操作符13種寫法
我相信你一定或多或少的接觸或使用過 JS 中的擴展操作符(Spread Operator)，在基本形式中，擴展操作符看起來像三個點，比如如下這樣：
- [...arr]
而實際上，它也就是這么用的，但是如果事情有這么簡單，就不用我在這里寫了。擴展操作符給我最大的印象就是，這玩意還挺方便的，然而最近寫代碼的時候經常性的遇到需要使用擴展操作符的場景，所以我干脆在網上找了些資料，把平時常見的應用場景給羅列了下，發現這個操作符是真的強大，有多強大?來看看下面這些用法吧。
1. 字符串轉數組
字符串轉數組最普遍的做法是這樣：
- let str = 'hello'
- let arr = str.split('')
- console.log(arr) // ['h', 'e', 'l', 'l', 'o']
而使用了擴展操作符后可以這樣：
- let str = 'hello'
- let arr = [...str]
- console.log(arr) // ['h', 'e', 'l', 'l', 'o']
2. 將類數組轉換為數組
在 JS 中有一種數據結構叫做 NodeList，它和數組很相似，也被叫做“類數組”，類數組是什么?在 MDN 中是這么定義它的：
- “類數組：擁有一個 length 屬性和若干索引屬性的任意對象。
類數組有哪些呢?以下這些可以看成是類數組：
- NodeList：document.querySelectorAll() 返回的對象;
- HTMLCollection：document.getElementsByTagName() 返回的對象;
- Arguments：函數里的參數對象;
類數組沒有數組的一些方法比如 push、map 等，所以經常需要將它們轉成數組，而通常我們是這么轉化的：
- 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
而有了擴展操作符可以這么做：
- let nodeList = document.querySelectorAll('div')
- let arr = [...nodeList]
- console.log(arr instanceof Array) // true
3. 向數組中添加項
往數組中添加幾項通常這樣操作：
- 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]
使用擴展操作符后：
- let arr = [3, 4]
- arr = [1, 2, ...arr, 5, 6]
- console.log(arr) // [1, 2, 3, 4, 5, 6]
4. 拷貝數組和對象
通常拷貝一個數組，可以這么做：
- 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]
但是有了擴展操作符，拷貝數組就能寫得很簡單：
- let arr = [1, 3, 5, 7]
- let arr2 = [...arr]
- arr[0] = 2
- console.log(arr2) // [1, 3, 5, 7]
同樣的，擴展操作符還能拷貝對象。拷貝對象的通常做法：
- 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 }
有了擴展操作符，拷貝一個對象就相當方便了：
- 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
- “注意：擴展操作符只能深拷貝結構為一層的對象，如果對象是兩層的結構，那么使用擴展操作符拷貝會是淺拷貝。
5. 合并數組或對象
數組合并通常是這么做的：
- let arr1 = [1, 3, 5]
- let arr2 = [2, 4, 6]
- let arr3 = arr1.concat( arr2 )
- console.log(arr3) // [1, 3, 5, 2, 4, 6]
使用擴展操作符后，可以這么寫：
- let arr1 = [1, 3, 5]
- let arr2 = [2, 4, 6]
- let arr3 = [...arr1, ...arr2]
- console.log(arr3) // [1, 3, 5, 2, 4, 6]
對了，它除了能合并數組外還能合并對象呢。合并對象，通常的做法是：
- let p1 = { name: '布蘭' }
- let p2 = { age: 12 }
- let p3 = Object.assign({}, p1, p2)
- console.log(p3) // { name: '布蘭', age: 12}
用擴展操作符合并對象：
- let p1 = { name: '布蘭' }
- let p2 = { age: 12 }
- let p3 = { ...p1, ...p2 }
- console.log(p3) // { name: '布蘭', age: 12}
6. 解構對象
經常我們給對象設置參數的時候會這么做：
- let person = {
- name: '布蘭',
- age: 12,
- sex: 'male'
- }
- let name = person.name
- let age = person.age
- let sex = person.sex
而有了擴展操作符，我們就可以這么寫，不過其實如下這種寫法并不是擴展操作符的寫法🤣，而是剩余操作符的寫法，雖然寫出來后看起來差不多，但就在操作對象這一點上，基本上可以認為它和擴展操作符是相反的操作，擴展操作符是用來展開對象的屬性到多個變量上，而剩余操作符是用來把多個參數凝聚到一個變量上。
- let person = {
- name: '布蘭',
- age: 12,
- sex: 'male'
- }
- let { name, ...reset } = person
- console.log(name) // '布蘭'
- console.log(reset) // { age: 12, sex: 'male' }
7. 給對象添加屬性
給對象加屬性通常這樣加：
- let person = { name: '布蘭' }
- person.age = 12
- console.log(person) // { name: '布蘭', age: 12 }
使用擴展操作符給對象添加屬性：
- let person = { name: '布蘭' }
- person = {...person, age: 12}
- console.log(person) // { name: '布蘭', age: 12 }
關于使用擴展操作符給對象添加屬性，這里有 2 個小技巧：
1.給新對象設置默認值：
- // 默認 person 對象的 age 屬性值 為 12
- let person = {age: 12, ...{ name: '布蘭' } }
- console.log(person) // { age: 12, name: '布蘭' }
2.重寫對象屬性
- let person = { name: '布蘭', age: 12 }
- // person 對象的 age 屬性被重寫為 20
- person = {...person, age: 20 }
- console.log(person) // { name: '布蘭', age: 20 }
8. 設置對象 Getter
設置對象 Getter 通常做法是這樣：
- let person = { name: '布蘭' }
- Object.defineProperty(person, 'age', {
- get() { return 12 },
- enumerable: true,
- configurable: true
- })
- console.log(person.age) // 12
而有了擴展操作符后可以這么寫：
- let person = { name: '布蘭' }
- person = {
- ...person,
- get age() { return 12 }
- }
- console.log(person.age) // 12
9. 將數組作為函數參數展開
如果我們有一個形參是多個參數的函數，但是當調用的時候發現入參卻是一個數組，常規做法是這樣：
- let arr = [1, 3, 5]
- function fn(a, b, c) { }
- fn.apply(null, arr)
使用擴展操作符后，就簡單多了：
- let arr = [1, 3, 5]
- function fn(a, b, c) { }
- fn(...arr)
10. 無限參數的函數
如果有這么一個累加函數，他會把所有傳遞進來的參數都加起來，普通做法是把參數都整合到數組里，然后這樣做：
- function doSum(arr) {
- return arr.reduce((acc, cur) => acc + cur)
- }
- console.log( doSum([1, 3]) ) // 4
- console.log( doSum([1, 3, 5]) ) // 9
如果參數不是數組，而是需要一個個傳遞，相當于函數必須支持無限參數，那可能會這么做：
- 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
而有了擴展操作符，就簡單多了：
- 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. 擴展函數的剩余參數
有的時候一個函數需要傳遞很多的參數，比如小程序頁面(WePY)的 onLoad 生命周期函數里就可能有很多別的頁面傳遞過來的參數，然后還需要在函數里進行一些數據初始化工作，這樣一來就會顯得很臃腫不美觀，比如：
- function init(a, b, x, y) {
- // 進行一系列初始化數據工作
- }
而使用了擴展操作符后，我們就可以按照業務把參數進行解構，把本該在一個函數里進行初始化的工作拆分成多個，可以這么做：
- function other( x, y ) {}
- function init(a, b, ...restConfig) {
- // 使用 a 和 b 參數進行操作
- // 其余參數傳給原始函數
- return other( ...restConfig )
- }
12. 結合 Math 函數使用
比如當需要對一個數組求最大值的時候，通常會這么做：
- 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
但是使用擴展操作符后，能夠把給數組求最大值寫得更加簡潔：
- let arr = [3, 1, 8, 5, 4]
- let max = Math.max(...arr)
- console.log(max) // 8
13. 在 new 表達式中使用
假設有一個數組格式的日期，想要通過 Date 構造函數創建一個日期實例的話，可能會這么做：
- let arr = [2021, 1, 1]
- let date = new Date([].toString.call(arr))
- console.log(date) // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'
- // 或者
- let date2 = new (Function.prototype.bind.apply(
- Date,
- [null].concat(arr)
- ))
- console.log(date2) // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'
而有了擴展操作符就簡單多了：
- let arr = [2021, 1, 1]
- let date = new Date(...arr)
- console.log(date) // 'Mon Feb 01 2021 00:00:00 GMT+0800 (中國標準時間)'
總結
這個操作符真可謂使用簡單無腦，但是功能效率上不得不說很強大，所以我們要做的就是只要記住在什么時候使用它就好了，于是乎為了讓大家能更好的記住這 13 種使用場景，我特意做了一個圖，方便大家記憶，是不是很貼?。以上這些只列了 13 種寫法，我覺得作為一個這么強大的操作符，肯定有更多使用的場景。
