spread運(yùn)算符功能

1 > ?主要用于函數(shù)調(diào)用

該運(yùn)算符將一個(gè)數(shù)組谊迄，變?yōu)閰?shù)序列

例如：

function add(x,y){

? ? return x + y;

};

var numbers =[1,2];
add(...numbers);//3

add(...[5,7]);//12

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

function f(v, w, x, y, z) { return v+w+x+y+z}

var args = [0, 1];

f(-1, ...args, 2, ...[3]);//5

2> 數(shù)組push方法(此方法返回?cái)?shù)組的length)(此方法會(huì)改變輸入數(shù)據(jù))

將一個(gè)數(shù)組添加到另一個(gè)數(shù)組的尾部 ? ?默認(rèn)push的參數(shù)不接收數(shù)組形式的

例如：

var r1=[1,2];

r1.push(3,4);

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

如果傳入數(shù)組

var r1=[1,2];

r1.push([5,6])

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

_______________________________

用拓展運(yùn)算符...

var r1=[1,2];

r1.push(...[3,4,5]);

console.log(r1);//[1,2,3,4,5]

//?ES5?的寫(xiě)法

var arr1?=?[0,?1,?2];

var arr2?=?[3,?4,?5];

Array.prototype.push.apply(arr1,?arr2);

//?ES6?的寫(xiě)法

var arr1?=?[0,?1,?2];

var arr2?=?[3,?4,?5];

arr1.push(...arr2);

3>?替代數(shù)組的 apply 方法 (數(shù)組可以直接傳入函數(shù) ?fn(...數(shù)組） )

apply方法的第二個(gè)參數(shù)是一個(gè)參數(shù)數(shù)組，可以是一個(gè)Array實(shí)例驼仪，也可是一個(gè)arguments對(duì)象,例如：

function fn(a,b){ return a+b?}

function fn1(a,b){ return fn.apply(this,arguments) }

function fn2(a,b){ return fn.apply(null,[a,b])}

console.log(fn1(1,2),fn2(2,3))

由于擴(kuò)展運(yùn)算符可以展開(kāi)數(shù)組期贫，所以不再需要apply方法菜秦，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。例如

function fn(a,b){ return a+b?}

fn(...[1,2])

例如：

//?ES5?的寫(xiě)法

functionf(x,?y,?z)?{

//?...

}

varargs?=?[0,?1,?2];

f.apply(null,?args);

//?ES6?的寫(xiě)法

functionf(x,?y,?z)?{

//?...

}

varargs?=?[0,?1,?2];

f(...args);

再例如：

//?ES5?的寫(xiě)法

functionf(x,?y,?z)?{

//?...

}

varargs?=?[0,?1,?2];

f.apply(null,?args);

//?ES6?的寫(xiě)法

functionf(x,?y,?z)?{

//?...

}

varargs?=?[0,?1,?2];

f(...args);

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

//?ES5?的寫(xiě)法

Math.max.apply(null,?[14,?3,?77])

//?ES6?的寫(xiě)法

Math.max(...[14,?3,?77])

//??等同于

Math.max(14,?3,?77);

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

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

//?ES5

[1,?2].concat(more)

//?ES6

[1,?2,?...more]

vararr1?=?['a','b'];

vararr2?=?['c'];

vararr3?=?['d','e'];

//?ES5?的合并數(shù)組

arr1.concat(arr2,?arr3);

//?[?'a',?'b',?'c',?'d',?'e'?]

//?ES6?的合并數(shù)組

[...arr1,?...arr2,?...arr3]

//?[?'a',?'b',?'c',?'d',?'e'?]

4.2> 與解構(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//?[]:

const[first,?...rest]?=?["foo"];

first//?"foo"

rest//?[]

—————————————————————————————————————

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

var [first,?...rest]?=?[1,?2,?3,?4,?5];//正確

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

var [...middle,rest]?=?[1,?2,?3,?4,?5];//報(bào)錯(cuò)

—————————————————————————————————————

4.3> 函數(shù)的返回值 ? ?return ...a

JavaScript 的函數(shù)只能返回一個(gè)值障陶，如果需要返回多個(gè)值，只能返回?cái)?shù)組或?qū)ο罅难怠U(kuò)展運(yùn)算符提供了解決這個(gè)問(wèn)題的一種變通方法抱究。

function fn(){

????var arr =[1,2,3]

????return [...arr]

}

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

[...'hello']

//?[?"h",?"e",?"l",?"l",?"o"?]

上面的寫(xiě)法带斑，有一個(gè)重要的好處鼓寺，那就是能夠正確識(shí)別 32 位的 Unicode 字符

'x\uD83D\uDE80y'.length//?4

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

上面代碼的第一種寫(xiě)法， JavaScript 會(huì)將 32 位 Unicode 字符勋磕，識(shí)別為 2 個(gè)字符侄刽，采用擴(kuò)展運(yùn)算符就沒(méi)有這個(gè)問(wèn)題。因此朋凉，正確返回字符串長(zhǎng)度的函數(shù)州丹，可以像下面這樣寫(xiě)。

function length(str)?{

????return [...str].length;

}

length('x\uD83D\uDE80y')//?3

是涉及到操作 32 位 Unicode 字符的函數(shù)杂彭，都有這個(gè)問(wèn)題墓毒。因此，最好都用擴(kuò)展運(yùn)算符改寫(xiě)亲怠。

4.5?實(shí)現(xiàn)了 Iterator 接口的對(duì)象 （用...把有迭代器的對(duì)象 轉(zhuǎn)為 數(shù)組）

任何 Iterator 接口的對(duì)象所计，都可以用擴(kuò)展運(yùn)算符轉(zhuǎn)為真正的數(shù)組

varnodeList?=?document.querySelectorAll('div');

vararray?=?[...nodeList];

上面代碼中，querySelectorAll方法返回的是一個(gè)nodeList對(duì)象团秽。它不是數(shù)組主胧，而是一個(gè)類(lèi)似數(shù)組的對(duì)象叭首。這時(shí)，擴(kuò)展運(yùn)算符可以將其轉(zhuǎn)為真正的數(shù)組踪栋，原因就在于NodeList對(duì)象實(shí)現(xiàn)了 Iterator 接口焙格。

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

let?arrayLike?=?{

'0':'a',

'1':'b',

'2':'c',

length:?3

};

//?TypeError:?Cannot?spread?non-iterable?object.

let?arr?=?[...arrayLike];

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

4.6?Map 和 Set 結(jié)構(gòu)肝陪， Generator 函數(shù)

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

var map = new Map([

[1, 'one'],

[2, 'two'],

[3, 'three'],

]);

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

Generator 函數(shù)運(yùn)行后捏检，返回一個(gè)遍歷器對(duì)象荞驴，因此也可以使用擴(kuò)展運(yùn)算符。

vargo?=function*(){

yield?1;

yield?2;

yield?3;

};

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

上面代碼中贯城，變量go是一個(gè) Generator 函數(shù)熊楼，執(zhí)行后返回的是一個(gè)遍歷器對(duì)象，對(duì)這個(gè)遍歷器對(duì)象執(zhí)行擴(kuò)展運(yùn)算符能犯，就會(huì)將內(nèi)部遍歷得到的值鲫骗，轉(zhuǎn)為一個(gè)數(shù)組。

如果對(duì)沒(méi)有iterator接口的對(duì)象踩晶，使用擴(kuò)展運(yùn)算符执泰，將會(huì)報(bào)錯(cuò)。

varobj?=?{a:?1,?b:?2};

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

總結(jié)：

1渡蜻，用...可把數(shù)組作為函數(shù)的參數(shù)

2, 解構(gòu)與擴(kuò)展運(yùn)算符結(jié)合使用

3术吝，只要是 有 迭代器接口（方法），的對(duì)象茸苇，就可以使用... 運(yùn)算符排苍，因?yàn)榇诉\(yùn)算符 內(nèi)部是通過(guò)迭代器對(duì)象實(shí)現(xiàn)的！

4学密，函數(shù)調(diào)用淘衙，函數(shù)傳參，函數(shù)返回值時(shí)使用此運(yùn)算符

注意：

1腻暮， [arr1,...arr2] ?與? [...arr1,...arr2] 的區(qū)別

var arr1 = [1,2]; var arr2 = [3,4,5];

[arr1,...arr2];//返回一個(gè)二維數(shù)組 ?[[1,2],3,4,5]

[...arr1,...arr2];//[1,2,3,4,5]

2,使用語(yǔ)法 ?( ...[] ), ? [ ...[] ] ?,?[..."abc"]

3, 需要注意的數(shù)據(jù)結(jié)構(gòu)彤守。注意偽數(shù)組毯侦，類(lèi)似于數(shù)組的對(duì)象（比如，JQ獲取的DOM節(jié)點(diǎn)集合具垫，函數(shù)的參數(shù)列表）

4侈离，普通對(duì)象 沒(méi)有 部署迭代器接口（在此對(duì)象上沒(méi)有迭代器這個(gè)方法）

[...{"a":1}];//(var)[Symbol.iterator] is not a function; ? ?因?yàn)閿U(kuò)展運(yùn)算符內(nèi)部實(shí)現(xiàn)用的是迭代器對(duì)象

那普通對(duì)象部署迭代器接口后，是否可以用for-of遍歷?

5做修，for-of出現(xiàn)的意義：應(yīng)該是 一統(tǒng) 集合遍歷?

6霍狰，迭代器對(duì)象是在數(shù)據(jù)上抡草，比如定義為 偽對(duì)象的方法; 迭代器對(duì)象在數(shù)組數(shù)據(jù)的原型上饰及。

7, 定義數(shù)組時(shí)，用于代替一部分索引的值? const [first,?...rest]?=?[1,?2,?3,?4,?5]; ?

8康震，作為函數(shù)返回值 燎含，函數(shù)參數(shù)，函數(shù)調(diào)用里的使用注意：

函數(shù)返回值 ?return [...集合]

?函數(shù)參數(shù) （...集合）

? 函數(shù)調(diào)用 ?fn(...集合)

9腿短，總結(jié)： 使用語(yǔ)法 ? ? [...任何有迭代器接口方法的集合]