es6三个点（...）扩展运算符用法

扩展运算符用法

扩展运算符（ spread ）是三个点（…），是ES6新增的一种运算符，其作用很多，例如可以将一个数组转为用逗号分隔的参数序列等作用。应用场景中通常使用在对象的扩展运算符和数组的运算符两种类型。

对象中的扩展运算符

扩展运算符在对象对象中用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

上述简单的例子可以看出…后面为对象，则将该对象的所有属性变量赋值在新对象中了。那么我在新的对象中除了写…bar外另外加一个新的属性会怎么样呢。

let bar = { a: 1, b: 2 };
let baz = { ...bar,c:3,b:4 }; // {a: 1, b: 4, c: 3}

可以看出来它与Object.assign方法很相似可以将自定义的属性添加到对象中，遇到了自定义属性与对象中属性名相同，自定义的属性在后面会覆盖扩展运算符对象内部的属性。
这样可以发现扩展运算符实现了拷贝的功能，拷贝分深拷贝和浅拷贝，那它是那哪种拷贝呢

let aa = {
	age: 18,
	name: 'aaa',
	address: {
		city: 'shanghai'
	}
}
let bb = {...aa};
bb.address.city = 'shenzhen';
console.log(aa.address.city);  // shenzhen

通过上面的例子看的出来改变了bb.address中city 值aa.address的city值也会改变，所以扩展运算符是浅拷贝
需要实现深拷贝就需要将对象中复杂数据类型进行扩展运算符拷贝。以上代码该如下写。

let aa = {
	age: 18,
	name: 'aaa',
	address: {
		city: 'shanghai'
	}
}
let bb = {
	...aa,
	address: {...aa.address}
};
bb.address.city = 'shenzhen';
console.log(aa.address.city);  // shanghai

数组中的扩展运算符

扩展运算符同样可以运用在对数组的操作中,有一下几种情况。
参数序列

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

数组复制

const arr1 = [1, 2];
const arr2 = arr1;
arr2[0] = 2;
arr1 // [2, 2]

与解构赋值结合生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

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

const [...rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, ...rest, last] = [1, 2, 3, 4, 5];
// 报错

符串转为真正的数组

[...'hello']
// [ "h", "e", "l", "l", "o" ]

扩展运算符的常见用法就大概以上这些。