ES6 陣列的擴充套件（一）之擴充套件運算子

2021-08-19 09:50:28 字數 3922 閱讀 6513

擴充套件運算子是三個點...。它好比rest引數的逆運算，將乙個陣列轉為用逗號分隔的引數序列。

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


console.log(1,...[2,3,4],5) //1 2 3 4 5
該運算主要用於函式呼叫

function push(array,...items)


let a=[1,2]


push(a,3,3,3)


a //[1, 2, 3, 3, 3]
...運算子將乙個陣列，變為引數序列。

擴充套件運算子與正常的函式引數可以結合使用。

function f(v,w,x,y,z)


f(-1,...[1,2],2,...[3]) //-1，1，2，2，3


f(-1,...[1,2,3],2,...[3]) //-1，1，2，3,2
擴充套件運算子後面還可以放置表示式。

const x = 2


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


arr //['a','b']
若擴充套件運算子後面是乙個空陣列，則不產生任何效果。

[...,1]   //[1]
// es5


function f(x,y,z)


var args = [0, 1, 2]


//es6


function f(x, y, z)


let args = [0, 1, 2]


f(...args)
例項如下：

// es5


// es6


math.max(...[14,3,77]) //77


// 等同於


math.max(14,3,77) //77
// es5


var arr1 = [0,1,2];


var arr2 = [3,4,5];


arr1 //[0,1,2,3,4,5]


//es6


var arr1 = [0,1,2]


var arr2 = [3,4,5]


arr1.push(...arr2)

（1）複製陣列

陣列是復合的資料型別，直接複製的話，只是複製了指向底層資料結構的指標，而不是轉殖乙個全新的陣列。

var a1 = [1,2]


var a2 = a1


a2[0] = 2


a1 //[2,2]
上面**中，a2並不是a1的轉殖，而是指向同乙份資料的另乙個指標。修改a2，會直接導致a1的變化。

es5只能用變通的方法來複製陣列。

var a1 = [1,2]


var a2 = a1.concat()


a2[0] = 2


a1 //[1,2]
上面**中，a1會返回原陣列的轉殖，再修改a2不會對a1產生影響。

擴充套件運算子提供了複製陣列的簡便寫法。

var a1 = [1,2]


//寫法一


var a2 = [...a1]


//寫法二


var [...a2] = a1
（2）合併陣列

//es5


[1,2].concat([3,4,5]) // [1, 2, 3, 4, 5]


//es6


[1,2,...[3,4,5]] // [1, 2, 3, 4, 5]


var arr1 = ['a','b']


var arr2 = ['c']


var arr3 = ['d','e']


//es5


arr1.concat(arr2,arr3)


//es6


[...arr1,...arr2,...arr3]
（3）與解構賦值結合

擴充套件運算子可以與解構賦值結合起來，用於生成陣列。

var list = [0,1,2,3,4]


//es5


a = list[0]


rest = list.slice(1)


//es6


[a,...rest] = list
其他例子：

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


first // 1


rest // [2, 3, 4, 5]


var [first, ...rest] = 


first //undefined


rest //


const [first, ...rest] = ['foo']


first //'foo'


rest //
如果將擴充套件運算子用於陣列賦值，只能放在引數的最後一位，否則會報錯。

（4）字串

擴充套件運算子還可以將字串轉為真正的陣列。

[...'hello']   


// ["h", "e", "l", "l", "o"]
js會將四個位元組的unicode字元，識別為2個字元，採用擴充套件運算子就沒有這個問題。

返回字串長度的函式：

function length(str)


length('x\ud83d\ude80y') // 3


//不使用擴充套件運算子會有問題 


'x\ud83d\ude80y'.length //4
（5）實現了iterator介面的物件

任何iterator介面的物件，都可以用擴充套件運算子轉為真正的陣列。

let nodelist = document.queryselectorall('div)


let array = [...nodelist]
nodelist不是陣列，而是乙個類似陣列的物件。這時，擴充套件運算子可以將其轉為真正的陣列，原因就在於nodelist物件實現了iterator。

var arraylike = ;


// typeerror: cannot spread non-iterable object.


var arr = [...arraylike];
上面**中，arraylike是乙個類似陣列的物件，但是沒有部署iterator介面，擴充套件運算子就會報錯。可改為array.from方法將arraylike轉為真正的陣列。

var arraylike = array.from();


arraylike //['a','b','c']
（6）map和set結構，generator函式

擴充套件運算子內部呼叫的是資料結構的iterator介面，因此只要具有iterator介面的物件，都可以使用擴充套件運算子，比如map結構。

let map = new map([


[1,'one'],


[2,'two'],


[3,'three']


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


let arr2 = [...map.values()] // ["one", "two", "three"]
generator函式執行後，返回乙個遍歷器物件，因此也可以使用擴充套件運算子。

const go = function*() 


[...go()] // [1,2,3]

ES6之擴充套件運算子 「 」

es6中的擴充套件運算子就是三個點 可以用來將乙個陣列分割為由陣列內容組成的引數序列。1 可以將陣列轉換為分隔開的字串 2 擴充套件運算子可以用於函式呼叫 1 將引數集成為陣列 function show a show 1,2,3,4,5 1,2,3,4,5 2 將陣列展開為相對應的引數 funct...

es6之擴充套件運算子

在es6以前，如果我們要把兩個陣列拼接到一起，通常是使用陣列的concat方法，比如 const a jelly bob helen const b james adrew john const c a.concat b console.log c jelly bob helen james adr...

ES6 陣列的擴充套件 擴充套件運算子

1 擴充套件運算子 三個點 將乙個陣列轉為用逗號分隔的引數序列 作用 用於函式呼叫 function add x,y const numbers 2,6 add numbers 8 8 2 作用 求最大值 拼接陣列 複製陣列 a2複製a1,改a2不改變a1 合併陣列 將字串轉化為真正的陣列 1 最大...