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。

展开运算符和剩余操作运算符的区别
关于展开运算符与剩余操作符的直之间的区别，简单的说，在某种程度上，剩余操作符和展开运算符相反，展开运算符会“展开”数组变成多个元素，剩余操作符会收集多个元素和“压缩”成一个单一的元素。

原文地址：https://blog.csdn.net/wjswangjinsheng/article/details/104710626