es6數(shù)組中擴展運算符的用法

發(fā)布時間：2020-07-30 14:39:13 來源：億速云閱讀：113 作者：小豬欄目：web開發(fā)

這篇文章主要講解了es6數(shù)組中擴展運算符的用法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

擴展運算符(spread)是三個點(…)。它好比rest參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列。

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

該運算符主要用于函數(shù)調(diào)用。

function push(array, ...items) {
 array.push(...items)
}
function add(x, y) {
 return x + y
}

const numbers = [4, 38]
add(...numbers) // 42

上面代碼中，array.push(…items)和add(…numbers)這兩行，都是函數(shù)的調(diào)用，它們的都使用了擴展運算符。該運算符將一個數(shù)組，變?yōu)閰?shù)序列。

擴展運算符與正常的函數(shù)參數(shù)可以結(jié)合使用，非常靈活。

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

擴展運算符后面還可以放置表達式。

const arr = [
 ...(x > 0 &#63; ['a'] : []),
 'b'
]

如果擴展運算符后面是一個空數(shù)組，則不產(chǎn)生任何效果。

[...[], 1]

注意，擴展運算符如果放在括號中，javaScript引擎就會認為這是函數(shù)調(diào)用。如果這時不是函數(shù)調(diào)用，就會報錯。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

上面前兩種情況都會報錯，因為擴展運算符所在的括號不是函數(shù)調(diào)用，而第三種情況console.log(…[1, 2])就不會報錯，因為這時是函數(shù)調(diào)用。

下面是擴展運算符取代apply方法的一個實際的例子，應用Math.max方法，簡化求出一個數(shù)組最大元素的寫法。

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

// ES6的寫法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77)

上面代碼中，由于javaScript不提供求數(shù)組最大元素的函數(shù)，所以只能套用Math.max函數(shù)，將數(shù)組轉(zhuǎn)為一個參數(shù)序列，然后求最大值。有了擴展運算符以后，就可以直接用Math.max了。

另一個例子是通過push函數(shù)，將一個數(shù)組添加到另一個數(shù)組的尾部。

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

上面代碼的ES5寫法中，push方法的參數(shù)不能是數(shù)組，所以只好通過apply方法變通使用push方法。有了擴展運算符，就可以直接將數(shù)組傳push方法。

下面是另外一個例子。

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

擴展運算符的應用

1）復制數(shù)組

數(shù)組是復合的數(shù)據(jù)類型，直接復制的話，只是復制了指向底層數(shù)據(jù)結(jié)構(gòu)的指針，而不是克隆一個全新的數(shù)組。

const a1 = [1, 2]
const a2 = a1 
a2[0] = 2
a1 // [2, 2]

上面代碼中，a2并不是a1的克隆，而是指向同一份數(shù)據(jù)的另一個指針，修改a2，會直接導致a1的變化。

ES5只能用變通方法來復制數(shù)組。

const a1 = [1, 2]
const a2 = a1.concat()

a2[0] = 2 
a1 //[1, 2]

ES6寫法

const a1 = [1, 2]
// 寫法1
const a2 = [...a1]
// 寫法2
const [...a2] = a1

2)合并數(shù)組

擴展運算符提供了數(shù)組合并的新寫法。

const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
// ES5的合并數(shù)組
arr1.concat(arr2, arr3)
// ES6的合并數(shù)組
[...arr1, ...arr2, ...arr3]

不過，這兩種方法都是淺拷貝，使用的時候需要注意。

const a1 = [{foo: 1}]
const a2 = [{bar: 2}]
const a3 = a1.concat(a2)
const a4 = [...a1, ...a2]

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代碼中，a3和a4是用兩種不同方法合并而成的新數(shù)組，但是它們的成員都是對原數(shù)組成員的引用，這就是淺拷貝，如果修改了原數(shù)組的成員，會同步反映到新數(shù)組。

3）與解構(gòu)賦值結(jié)合

擴展運算符可以與解構(gòu)賦值結(jié)合起來，用于生成數(shù)組。

// ES5 
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list

下面是另外一些例子。

const [first, ...rest] = [1, 2, 3, 4, 5]
first // 1
rest // [2, 3, 4, 5]

const [first, ...rest] = []
first // undefined
rest // []

如果將擴展運算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯

（4）字符串

擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。

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

對于那些沒有部署Iterator接口的類似數(shù)組的對象，擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組。

let arrayLike = {
 '0': 'a',
 '1': 'b',
 length:２
}

// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];

上面代碼中，arrayLike是一個類似數(shù)組的對象，但是沒有部署 Iterator 接口，擴展運算符就會報錯。這時，可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。

擴展運算符內(nèi)部調(diào)用的是數(shù)據(jù)結(jié)構(gòu)的 Iterator 接口，因此只要具有 Iterator 接口的對象，都可以使用擴展運算符，比如 Map 結(jié)構(gòu)。

let map = new Map([
 [1, 'one'],
 [2, 'two'],
 [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

看完上述內(nèi)容，是不是對es6數(shù)組中擴展運算符的用法有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

es6數(shù)組中擴展運算符的用法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽