js扩展运算符

什么是扩展运算符？
答： 这个东西 -> …
那它有什么用？（往下瞅）

一、数组复制

let arr = [1, 2, 3, 4];
let arr1 = [...arr];
console.log(arr1);

像这里这么使用，输出的arr1数组将会和arr数组完全一样

---

但是这里是深复制还是浅复制呢？

let arr = [1, 2, 3, 4];
let arr1 = [...arr];
arr[0] = 9;
console.log(arr, arr1);

控制台输出结果：

显然，改变arr的值后，arr1的值并没有被改变，所以是深复制

---

二、数组合并

let arr = [1, 2, 3, 4];
let arr1 = [5, 6, 7, ...arr];
console.log(arr1);

像这种属于按位置插入式合并

---

其实更像合并的是：

let arr1 = [1, 2, 3, 4];
let arr2 = [5, 6, 7, 8];
let arr3 = [...arr1, ...arr2];
console.log(arr3);

是不是突然感觉好实用？

等会还没完！！！

---

举个常见的栗子：

对于数组去重问题（去掉数组中所有相同的元素），我们可以用Set方法来实现。

一般情况下我们会这样：

function fun(arr){
	return Array.from(new Set(arr));
}

这里Set负责去重，Array.from负责将Set类数组转换为数组。

如果我们用扩展运算符的话就更简洁了：

function fun(arr){
	return [...new Set(arr)];
}

这样就用 … 转化类数组了。

---

三、对象复制与合并

let obj = {
	name: 'zs',
	age: 18
}
let obj1 = {
	school: 'hgc',
	...obj
}
console.log(obj1);

这样就把obj的内容全都复制到obj里面了。

---

但是如果有相同的key呢？

let obj = {
	name: 'zs',
	age: 18
}
let obj1 = {
	age: 20,
	...obj
}
console.log(obj1);

这里是复制过来key的覆盖的了现有的key
是不是顺序的问题呢？
我们换个顺序

let obj = {
	name: 'zs',
	age: 18
}
let obj1 = {
	...obj,
	age: 20
}
console.log(obj1);

果然是这样的，所以…的作用真的就是把整个对象的键值对插到了对应位置。

---

那么对象可不可以像数组那样进行多个扩展运算符的复制插入呢？

let obj1 = {
	name: 'zs',
	age: 18
}
let obj2 = {
	from: 'China',
	sex: 'male'
}
let obj3 = {
	...obj1,
	...obj2
}
console.log(obj3);

可以熬，而且是按顺序来的，也就是如果有相同的key，后边的就会覆盖前面的。

四、作为函数参数

function foo(...args) {
	console.log(args);
	console.log(arguments);
	console.log(args[0]);
	console.log(arguments[0]);
}
foo(1, 2, 3, 4);

看看和arguments的差别

很显然，只是少了一些arguments的方法，在表值上没什么差别。