关于es6 扩展运算符

关于es6 扩展运算符的小结

_双眸

于 2021-06-12 18:59:05 发布

50
收藏
分类专栏： 前端 文章标签： javascript
版权

前端
专栏收录该内容
35 篇文章0 订阅
订阅专栏
参考：es6 扩展运算符 三个点（…）

基础用法一
1.由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。
function f(x, y, z) { // …}
var args = [0, 1, 2];
f(…args);

2.数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。扩展运算符提供了复制数组的简便写法。
const a1 = [1, 2];
// 写法一
const a2 = […a1];
// 写法二
const […a2] = a1;

3.合并数组
// ES5
[1, 2].concat(more)
// ES6
[1, 2, …more]

4.扩展运算符可以与解构赋值结合起来，用于生成数组。如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。
const [first, …rest] = [1, 2, 3, 4, 5]; first = 1， rest = [2, 3, 4, 5]
const […butLast, last] = [1, 2, 3, 4, 5];// 报错

5.扩展运算符还可以将字符串转为真正的数组。
[…‘hello’] // [ “h”, “e”, “l”, “l”, “o” ]

6，扩展运算符（ … ）用于取出参数对象的所有可遍历属性，拷贝到当前对象之中。等同于使用 Object.assign 方法。
let aClone = { …a };
// 等同于
let aClone = Object.assign({}, a);

扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，如果对没有
Iterator 接口的对象，使用扩展运算符，将会报错。可以改为使用Array.from方法将arrayLike转为真正的数组。

例如：
next({ ...to, replace: true }) 写法
…把to里面的属性序列化出来，和replace加在一起变成一个新对象，传给next；相当于之前的复杂写法：

next(Object.assign({},to,{replace:true}))
1
基础用法二

————————————————
版权声明：本文为CSDN博主「_双眸」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010633266/article/details/117853975