ES6 擴充套件運算子詳解

解構賦值

擴充套件運算子(spread)就是我們知道的三個點(...)，它就好像rest引數的逆運算，將乙個陣列轉為用逗號分隔的引數序列。

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

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

複製陣列

let arr = [1, 2],

arr1 =[...arr];
console.log(arr1); 
//[1, 2]

//

陣列含空位
let arr2 = [1, , 3],
arr3 =[...arr2];
console.log(arr3); [1, undefined, 3]

合併陣列

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

[1, 2, 3, 4]
//本質也是：**將乙個陣列轉為用逗號分隔的引數序列，然後置於陣列中**

拓展運算子（...）用於取出 引數物件 所有 可遍歷屬性 然後拷貝到當前物件。

基本用法

let person = ;

let someone =;
console.log(someone);  
//

合併物件

let age = ;

let name = ;
let person =;
person;  
//

注意：自定義的屬性在拓展運算子後面，則拓展運算子物件內部同名的屬性將被覆蓋掉。同理，自定義的屬性在拓展運算度前面，則變成設定新物件預設屬性值。

let person = ;

let someone = ;
let someone1 = ;
console.log(someone);  
//

拓展運算子後面是空物件、null、undefined，沒有任何效果也不會報錯。

//

空物件let a = , a: 1, b: 2};
console.log(a);  
////
null 、 undefined
let b = ;
console.log(b);  
//

不定引數用來表示不確定引數個數，形如，...變數名，由...加上乙個具名引數識別符號組成。具名引數只能放在引數組的最後，並且有且只有乙個不定引數。

基本用法

function

f(...values)
f(1,2);      //
2f(1,2,3,4);  //
4

function

addnumbers(x,y,z)
var numbers = [1,2,3,4];
addnumbers(...numbers); //6
//函式呼叫中，擴充套件運算子（...）將乙個陣列，變為引數序列

擴充套件運算子與政策的函式引數可以結合使用，非常靈活：

function

f(x,y,z,v,w)
var args = [0,1,5];
var args1 = [0,1];
f(-1,...args,2,...[3]);//
-1, 0, 1, 5, 2
f(-1,...args1,2,...[3]);//
-1, 0, 1, 2, 3

ES6 擴充套件運算子

擴充套件運算子用3個點表示,功能是把陣列或者類陣列物件展開成一系列用逗號隔開的值 1，陣列 let arr red green blue console.log arr red,green,blue拷貝陣列 和object.assign一樣都是淺拷貝 let arr red green blue l...

ES6擴充套件運算子

首先，我們要讀仔細下面這句話，就很容易知道擴充套件運算子的使用了，可以在心裡反覆讀三遍 接下來，我們看下究竟怎麼個情況 宣告乙個方法 var foo function a,b,c console.log a console.log b console.log c 宣告乙個陣列 var arr 1,2...

es6擴充套件運算子

1 複製 拷貝 陣列 陣列元素都是基本資料型別 var arr a b c var copy arr console.log copy a b c arr copy false2 函式呼叫 陣列作引數 function add x,y var numbers 4 38 add numbers 423...