关于es6:es6扩展运算符三个点

51次阅读

共计 1166 个字符,预计需要花费 3 分钟才能阅读完成。

对象的扩大运算符

对象中的扩大运算符 (…) 用于取出参数对象中的所有可遍历属性,拷贝到以后对象之中

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

如果用户自定义的属性,放在扩大运算符前面,则扩大运算符外部的同名属性会被笼罩掉。

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

例子

let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, b: '2-edited'};
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); //  {a: 1, b: "2-edited"}

下面这个例子扩大运算符拷贝的对象是根底数据类型,因而对 obj2 的批改并不会影响 obj1,如果改成这样:

let obj1 = {a: 1, b: 2, c: {nickName: 'd'}};
let obj2 = {...obj1};
obj2.c.nickName = 'd-edited';
console.log(obj1); // {a: 1, b: 2, c: {nickName: 'd-edited'}}
console.log(obj2); // {a: 1, b: 2, c: {nickName: 'd-edited'}}

这里能够看到,对 obj2 的批改影响到了被拷贝对象 obj1,起因下面曾经说了,因为 obj1 中的对象 c 是一个援用数据类型,拷贝的时候拷贝的是对象的援用。

数组的扩大运算符

扩大运算符同样能够使用在对数组的操作中。
能够将数组转换为参数序列

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 arr1 = [1, 2];
const arr2 = [...arr1];

扩大运算符能够与解构赋值联合起来,用于生成数组

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"]

总结的不全,能够参考阮一峰老师的:https://es6.ruanyifeng.com/?s…

正文完
 0