擴充套件運算子的運用

// es5 的寫法

函式呼叫

function

f(x, y, z)
var args =[0
,1,2
];f.(
null
, args)
;// es6的寫法
function
f(x, y, z)
let args =[0
,1,2
];f(
...args)
;// es5 的寫法
math.max.
(null,[
14,3,
77])// es6 的寫法
math.
max(
...[14,
3,77]
)// 等同於
math.
max(14,
3,77)
;

我們都知道陣列是引用型別，直接賦值，兩個陣列的指標指向的是同乙個引用位址，改變其中乙個陣列內部成員的值也會同時改變另乙個陣列內對應的值。

因此，在es5中，我們用concact方法來轉殖陣列。

const a1 =[1

,2];
// 寫法一
const a2 =
[...a1]
;// 寫法二
const
[...a2]
= a1;

在上面的轉殖陣列的寫法中，我們看到，在es5中我們是用合併空陣列的方式模擬出轉殖陣列的效果，因此我們同樣也可以用…運算子進行合併陣列的操作。

const arr1 =

['a'
,'b'];
const arr2 =
['c'];
const arr3 =
['d'
,'e'];
// es5 的合併陣列
arr1.
concat
(arr2, arr3)
;// [ 'a', 'b', 'c', 'd', 'e' ]
// es6 的合併陣列
[...arr1,
...arr2,
...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]

將字串轉成陣列

[

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

'x\ud83d\ude80y'

.length // 4
[...
'x\ud83d\ude80y'
].length // 3

let nodelist = document.

queryselectorall
('div');
let array =
[...nodelist]
;

…在es2018中被引入到物件中，因此物件也可以像陣列一樣合併。

在es2015中，我們用object.assign()來合併物件，在es2018中就可以用…運算子代替。

let ab =

;// 等同於
let ab = object.
assign
(, a, b)
;

擴充套件運算子

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

擴充套件運算子

首先點明，es6的新特性之擴充套件運算子 spread 就是三個點 和es6的可變引數形式一樣。擴充套件運算子是很強大的乙個運算子，它能簡化很多在es5中會比較繁雜的操作。對於這個運算子，概念性的東西不多，所以這裡我就簡明扼要的給出一些它的常用場景 1 可變引數。雖然可變引數嚴格說不是擴充套件運算子...

擴充套件運算子

使用擴充套件運算子 拷貝陣列。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 結構賦值 物件的解構賦值用於從...