ES6學習筆記之擴充運算符

一.擴充運算符

1.擴充運算符（spread）是三個點（…）。将一個數組轉為用逗号分隔的參數序列，還能強制展開一個對象，通常用于對象的指派，使用靈活廣泛。

第一個作用：稱為“展開運算符”，就是把東西展開，可以用在數組和對象上。

var obj1 = {
    "a" :100,
    "b" :200,
    "c" :300,
}
var obj2 = {
    ...obj1,
    "d" :888
}
console.log(obj1)
console.log(obj2)
console.log(obj1 === obj2);
           

數組也可以強制展開，通常數組的指派，比如有兩個數組合成一個數組：

2.剩餘操作符

第二、三個作用：叫“剩餘操作符”是解構的一種，意思是把剩餘的參數放到一個數組中指派給它。一般針對數組或對象。

var [a,b,...c] = [1,2,3,4,5,6];
console.log(a);//1
console.log(b);//2
console.log(c);//[3,4,5,6]
           

注意“…”隻能出現最後一個參數，并且通過這個例子發現…能将零散的值收納為數組。

邏輯上，“…”是一個運算符。“…”能将數組打散為零散值。

補充個知識點，在ES6中當一個對象的key和value一緻時，可以省略value。

let obj={name："name"}
等價于 let obj={name}	
           

應用場景2：

以後的函數大機率都是接收一個JSON當參數，并且用ES6解構文法寫形參變量。

調用函數的時候傳的參數，一般是k:v，省略v

var name = "小明";
var height = 170;
var weight = 100;
function mm({height,name,weight}){
    console.log("姓名是：" + name)
    console.log("身高是：" + height)
    console.log("體重是：" + weight)
};
 
// mm({name:name,"height":height,"weight":weight})
mm({name,height,weight})
           

調用函數時參數順序打亂也不影響結構，因為解構，會自動比對key。

展開運算符和剩餘操作運算符的差別

關于展開運算符與剩餘操作符的直之間的差別，簡單的說，在某種程度上，剩餘操作符和展開運算符相反，展開運算符會“展開”數組變成多個元素，剩餘操作符會收集多個元素和“壓縮”成一個單一的元素。