99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

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

成都創(chuàng)新互聯(lián)公司專注于南湖網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供南湖營(yíng)銷型網(wǎng)站建設(shè)，南湖網(wǎng)站制作、南湖網(wǎng)頁(yè)設(shè)計(jì)、南湖網(wǎng)站官網(wǎng)定制、成都小程序開(kāi)發(fā)服務(wù)，打造南湖網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供南湖網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

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

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

該運(yùn)算符主要用于函數(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)用，它們的都使用了擴(kuò)展運(yùn)算符。該運(yùn)算符將一個(gè)數(shù)組，變?yōu)閰?shù)序列。

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

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

擴(kuò)展運(yùn)算符后面還可以放置表達(dá)式。

const arr = [
 ...(x > 0 ? ['a'] : []),
 'b'
]

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

[...[], 1]

注意，擴(kuò)展運(yùn)算符如果放在括號(hào)中，javaScript引擎就會(huì)認(rèn)為這是函數(shù)調(diào)用。如果這時(shí)不是函數(shù)調(diào)用，就會(huì)報(bào)錯(cuò)。

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

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

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

上面前兩種情況都會(huì)報(bào)錯(cuò)，因?yàn)閿U(kuò)展運(yùn)算符所在的括號(hào)不是函數(shù)調(diào)用，而第三種情況console.log(…[1, 2])就不會(huì)報(bào)錯(cuò)，因?yàn)檫@時(shí)是函數(shù)調(diào)用。

下面是擴(kuò)展運(yùn)算符取代apply方法的一個(gè)實(shí)際的例子，應(yīng)用Math.max方法，簡(jiǎn)化求出一個(gè)數(shù)組最大元素的寫(xiě)法。

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

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

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

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

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

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

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

下面是另外一個(gè)例子。

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

擴(kuò)展運(yùn)算符的應(yīng)用

1）復(fù)制數(shù)組

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

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

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

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

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

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

ES6寫(xiě)法

const a1 = [1, 2]
// 寫(xiě)法1
const a2 = [...a1]
// 寫(xiě)法2
const [...a2] = a1

2)合并數(shù)組

擴(kuò)展運(yùn)算符提供了數(shù)組合并的新寫(xiě)法。

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

不過(guò)，這兩種方法都是淺拷貝，使用的時(shí)候需要注意。

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ù)組，但是它們的成員都是對(duì)原數(shù)組成員的引用，這就是淺拷貝，如果修改了原數(shù)組的成員，會(huì)同步反映到新數(shù)組。

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

擴(kuò)展運(yùn)算符可以與解構(gòu)賦值結(jié)合起來(lái)，用于生成數(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 // []

如果將擴(kuò)展運(yùn)算符用于數(shù)組賦值，只能放在參數(shù)的最后一位，否則會(huì)報(bào)錯(cuò)。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報(bào)錯(cuò)

（4）字符串

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

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

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

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

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

上面代碼中，arrayLike是一個(gè)類似數(shù)組的對(duì)象，但是沒(méi)有部署 Iterator 接口，擴(kuò)展運(yùn)算符就會(huì)報(bào)錯(cuò)。這時(shí)，可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。

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

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

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

看完上述內(nèi)容，是不是對(duì)es6數(shù)組中擴(kuò)展運(yùn)算符的用法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。