JS学习笔记-ES6-扩展运算符

参考：阮一峰-es6扩展运算符

1、数组扩展运算符

扩展运算符（spread）是三个点（…）。
扩展运算符与正常的函数参数可以结合使用，非常灵活。

function a (a,b){}
var arg=[0,1]
a(3,...arg)

扩展运算符后面还可以放置表达式。

const arr = [
  ...(x > 0 ? ['a'] : []),
  'b',
];

如果扩展运算符后面是一个空数组，则不产生任何效果。

[...[], 1]
// [1]

1. 替代函数的 apply 方法
2. 扩展运算符的应用
   （1）复制数组

var a=[1,2,3]
var b=[...a];//写法一
var [...b]=a//写法二

（2）合并数组
它们的成员都是对原数组成员的引用，这就是浅拷贝。如果修改了引用指向的值，会同步反映到新数组。

var a =[0,1,2]
var b =[1,2,3]
var c=[...a,...b]
console.log(c)//[0, 1, 2, 1, 2, 3]
浅拷贝

（3）与解构赋值结合
扩展运算符可以与解构赋值结合起来，用于生成数组。

[a,...b]=list

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

[a,...b]=[0,1,2,3]
console.log(a)//0
console.log(b)//[1, 2, 3]
[...b,a]=[0,1,2,3]//报错：Rest element must be last element

（4）字符串

var str="sxl";
var b=[...str]
console.log(b)//["s", "x", "l"]

（5）实现了 Iterator 接口的对象
任何定义了遍历器（Iterator）接口的对象，都可以用扩展运算符转为真正的数组。
（6）Map 和 Set 结构，Generator 函数
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; /

Generator 函数

2、对象扩展运算符

（1）解构赋值
对象的解构赋值用于从一个对象取值，相当于将目标对象自身的所有可遍历的（enumerable）、但尚未被读取的属性，分配到指定的对象上面。所有的键和它们的值，都会拷贝到新对象上面。

let [a,b,...c]=[0,1,2,3,4]
console.log(a)//0
console.log(b)//1
console.log(c)// [2, 3, 4]
c获取等号右边的所有尚未读取的键，将它们连同值一起拷贝过来。

• 解构赋值必须是最后一个参数，否则会报错。同数组
• 解构赋值的拷贝是浅拷贝，即如果一个键的值是复合类型的值（数组、对象、函数）、那么解构赋值拷贝的是这个值的引用，而不是这个值的副本。
• 扩展运算符的解构赋值，不能复制继承自原型对象的属性。
  （2）
• 对象的扩展运算符（…）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。

var person ={name:"xiaoming",
     age:19,}
 var person1={...person}
 console.log(person1)//{name: "xiaoming", age: 19}

• 如果扩展运算符后面是一个空对象，则没有任何效果。

{...{},person}//person: {name: "xiaoming", age: 19}

• 如果扩展运算符后面不是对象，则会自动将其转为对象。

{...1} // {}

• 如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象，因此返回的不是空对象。

{..."sxl"}//{0: "s", 1: "x", 2: "l"}

• 对象的扩展运算符等同于使用Object.assign()方法。

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);

• 如果想完整克隆一个对象，还拷贝对象原型的属性，可以采用下面的写法。

const clone1 = {
  __proto__: Object.getPrototypeOf(obj),
  ...obj
};

// 写法二
const clone2 = Object.assign(
  Object.create(Object.getPrototypeOf(obj)),
  obj
);

// 写法三
const clone3 = Object.create(
  Object.getPrototypeOf(obj),
  Object.getOwnPropertyDescriptors(obj)
)

• 扩展运算符可以用于合并两个对象。

let ab = { ...a, ...b };

• 如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。
• 如果把自定义属性放在扩展运算符前面，就变成了设置新对象的默认属性值。
• 与数组的扩展运算符一样，对象的扩展运算符后面可以跟表达式。
• 扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的。

3、函数扩展运算符