擴充套件運算子

2021-08-20 02:48:55 字數 2406 閱讀 9458

首先點明,

es6的新特性之擴充套件運算子(spread)就是三個點(...),和es6的可變引數形式一樣。

擴充套件運算子是很強大的乙個運算子,它能簡化很多在es5中會比較繁雜的操作。

對於這個運算子,概念性的東西不多,所以這裡我就簡明扼要的給出一些它的常用場景:

1:可變引數。

(雖然可變引數嚴格說不是擴充套件運算子(spread),而是剩餘運算子(rest),但是鑑於它也是三個點:...,我就寫在了一起以便記憶)

//例一:

function add(...values)

return sum;

}add(2, 5, 3) // 10

//例二:

// arguments變數的寫法

function sortnumbers()

// rest引數的寫法

const sortnumbers = function(...numbers)

arguments物件不是陣列,而是乙個類似陣列的物件。

所以為了使用陣列的方法,必須使用array.prototype.slice.call先將其轉為陣列。

rest 引數就不存在這個問題,它就是乙個真正的陣列,陣列特有的方法都可以使用。

//既然說到了可變引數,就再舉個例子吧:

//例三:

function push(array, ...items) );

}var a = ;

push(a, 1, 2, 3)

//注意,可變引數只能出現在最後乙個引數位置

2.展開陣列:

//例一:

// 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])

// 等同於

math.max(14, 3, 77);

3.複製陣列:

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

const a1 = [1, 2];

const a2 = a1;

a2[0] = 2;

a1 // [2, 2]

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

const a1 = [1,2];

const a2 = a1.concat();

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

//其實也用到了其展開陣列的功能。

const a1 = [1,2];

//法一:

const a2 = [...a1];

const [...a2] =a1;

4.合併陣列:
var arr1 = ['a', 'b'];

var arr2 = ['c'];

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

// es5的合併陣列

arr1.concat(arr2, arr3);

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

// es6的合併陣列

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

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

5.與解構賦值結合:

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

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 //

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

*/

6.將字串轉化為真正的陣列:

其實,任何實現了iterator介面的物件都可用擴充套件運算子轉化為真正的陣列。

比如:arguments物件。

//例:

[...'hello']

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

擴充套件運算子

三個點,主要是用來將陣列幻化為用逗號分隔的引數序列。合併陣列 與解構賦值結合 如果將擴充套件運算子用於陣列賦值,只能放在引數的最後一位,否則會報錯。將字串轉為真正的陣列 可以將類似陣列的物件轉為真正的陣列 map和set結構,generator函式 擴充套件運算子內部呼叫的是資料解構的iterato...

擴充套件運算子

使用擴充套件運算子 拷貝陣列。const a,b 1,2,3 a 1 b 2,3 bad const len items.length const itemscopy let i for i 0 i len i good const itemscopy items 1 結構賦值 物件的解構賦值用於從...

擴充套件運算子

擴充套件運算子可以用在函式引數,陣列和物件上 函式裡面成為rest引數 function add values return sum add 2,5,3 10這樣就不需要用arguments引數了。a 1,2,3,4,5 5 1,2,3,4,5 function aaa a undefined aa...