...擴展運算符妙用 - ES5中push方法的參數不能是數組

含義

擴展運算符（ spread ）是三個點（...）。它比如 rest 參數的逆運算，將一個數組轉爲用逗號分隔的參數序列。

console.log(...[1, 2, 3]) // 1 2 3
console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5
[...document.querySelectorAll('div')] // [<div>, <div>, <div>]

該運算符主要用於函數調用。

array.push(...items)和add(...numbers)這兩行，都是函數的調用，它們的都使用了擴展運算符。該運算符將一個數組，變爲參數序列。

function push(array, ...items) {
	array.push(...items)
}
function add(x, y) {
	return x + y
}
var numbers = [4, 38]
add(...numbers) // 42

擴展運算符與正常的函數參數能夠結合使用，很是靈活。

function f(v, w, x, y, z) {}
var args = [0, 1]
f(-1, ...args, 2, ...[3])

ES5中push方法的參數不能是數組

ES5 寫法中，push方法的參數不能是數組，因此只好經過apply方法變通使用push方法。
有了擴展運算符，就能夠直接將數組傳入push方法。

// ES5 的寫法
function f(x, y, z) {}
var args = [0, 1, 2]
f.apply(null, args)

// ES6 的寫法
function f(x, y, z) {}
var args = [0, 1, 2]
f(...args)

Math.max.apply(null, [14, 3, 77]) // ES5 的寫法
Math.max(...[14, 3, 77]) // ES6 的寫法
Math.max(14, 3, 77) // 等同於

// ES5
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
Array.prototype.push.apply(arr1, arr2)

// ES6
var arr1 = [0, 1, 2]
var arr2 = [3, 4, 5]
arr1.push(...arr2)

new (Date.bind.apply(Date, [null, 2015, 1, 1])) // ES5
new Date(...[2015, 1, 1]) // ES6

函數的返回多個值

• JavaScript 的函數只能返回一個值，若是須要返回多個值，只能返回數組或對象。擴展運算符提供瞭解決這個問題的一種變通方法。
• 下面代碼從數據庫取出一行數據，經過擴展運算符，直接將其傳入構造函數Date。

var dateFields = readDateFields(database)
var d = new Date(...dateFields)

字符串

擴展運算符還能夠將字符串轉爲真正的數組。

[...'hello'] // [ "h", "e", "l", "l", "o" ]

上面的寫法，有一個重要的好處，那就是可以正確識別 32 位的 Unicode 字符。

'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3

上面代碼的第一種寫法， JavaScript 會將 32 位 Unicode 字符，識別爲 2 個字符，採用擴展運算符就沒有這個問題。所以，正確返回字符串長度的函數，能夠像下面這樣寫。

function length(str) {
	return [...str].length
}
length('x\uD83D\uDE80y') // 3

凡是涉及到操做 32 位 Unicode 字符的函數，都有這個問題。所以，最好都用擴展運算符改寫。

let str = 'x\uD83D\uDE80y' // str 即 'x🚀y'
str.split('').reverse().join('') // 'y\uDE80\uD83Dx' 即 'y��x'
[...str].reverse().join('') // 'y\uD83D\uDE80x' 即 'y🚀x'

上面代碼中，若是不用擴展運算符，字符串的reverse操做就不正確。

只要具備 Iterator 接口的對象，均可以使用擴展運算符 (緣由)

遍歷器（Iterator）是一種接口，爲各類不一樣的數據結構提供統一的訪問機制。任何數據結構只要部署Iterator接口，就能夠完成遍歷操做（即依次處理該數據結構的全部成員）。
任何 Iterator 接口的對象，均可以用擴展運算符轉爲真正的數組。

var nodeList = document.querySelectorAll('div')
var array = [...nodeList]

上面代碼中，querySelectorAll方法返回的是一個nodeList對象。它不是數組，而是一個相似數組的對象。這時，擴展運算符能夠將其轉爲真正的數組，緣由就在於NodeList對象實現了 Iterator 接口。

對於那些沒有部署 Iterator 接口的相似數組的對象，擴展運算符就沒法將其轉爲真正的數組。

let arrayLike = {
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3
}
let arr = [...arrayLike] // Uncaught TypeError: arrayLike is not iterable
Array.from(arrayLike) // ["a", "b", "c"]

上面代碼中，arrayLike是一個相似數組的對象，可是沒有部署 Iterator 接口，擴展運算符就會報錯。這時，能夠改成使用Array.from方法將arrayLike轉爲真正的數組。

Map 和 Set 結構， Generator 函數 (只要具備 Iterator 接口的對象，均可以使用擴展運算符)

擴展運算符內部調用的是數據結構的 Iterator 接口，所以只要具備 Iterator 接口的對象，均可以使用擴展運算符，好比 Map 結構。

let map = new Map([
	[1, 'one'],
	[2, 'two'],
	[3, 'three'],
])
let arr = [...map.keys()] // [1, 2, 3]

Generator 函數運行後，返回一個遍歷器對象，所以也可使用擴展運算符。

var go = function*(){
	yield 1
	yield 2
	yield 3
}
[...go()] // [1, 2, 3]

上面代碼中，變量go是一個 Generator 函數，執行後返回的是一個遍歷器對象，對這個遍歷器對象執行擴展運算符，就會將內部遍歷獲得的值，轉爲一個數組。
若是對沒有iterator接口的對象，使用擴展運算符，將會報錯。

var obj = {a: 1, b: 2}
let arr = [...obj] // Uncaught TypeError: obj is not iterable