ES6+ 展开语法如何使用

发布时间：2023-03-23 13:22:50 所属栏目：教程来源：

导读：ES6 新增了 ... 的语法糖，主要用于展开语法和剩余语法中，本节先来说说展开语法。展开语法顾名思义可以理解为把整体展开成个体，在 ES5 中如果想把一个数组的内容拷贝到另一个数组中，可以使用 for 循环数组的每一项

ES6 新增了 ... 的语法糖，主要用于展开语法和剩余语法中，本节先来说说展开语法。展开语法顾名思义可以理解为把整体展开成个体，在 ES5 中如果想把一个数组的内容拷贝到另一个数组中，可以使用 for 循环数组的每一项，然后添加到目标数组中去。但是如果使用展开语法就很方便地完成这个操作了。下面我们就来看看展开语法是如何使用的。

在 ES5 经常会遇到数组和对象的浅拷贝，我们都知道数组和对象都是引用类型，所以不能像字符串那样直接赋值，在 ES5 中数组和对象的拷贝都是通过循环来实现的，下面我们来看几个例子：

var arr1 = [, , ];
var arr2 = [];
arr1.forEach(function(value){
arr2.push(value);
})
console.log(arr2);   // [1, 2, 3]
上面的代码是把 arr1 数组中的项拷贝到 arr2 中去，还可以使用数组提供的 concat 和 slice 方法来实现。

var arr1 = [, , ];
var arr2 = [].concat(arr1);
var arr3 = arr1.slice();
arr1.push()
console.log(arr1); //[1, 2, 3, 4]
console.log(arr2); //[1, 2, 3]
console.log(arr3); //[1, 2, 3]
在拷贝完后，对 arr1 数组添加元素，可以看到 arr2 和 arr3 没有发生变化，说明它们不是一个引用地址。这是 ES5 所提供的拷贝方式，那么 ES6 是如何简化的呢？

var arr1 = [, , ];
var arr2 = [...arr1];
arr1.push()
console.log(arr1);   //[1, 2, 3, 4]
console.log(arr2);   //[1, 2, 3]
使用 ... 展开语法可以实现与上面 ES5 实现的相同效果，而且比较简洁地表达了把 arr1 中的每一项展开放入 arr2 中。

ES5 中针对字面量对象的拷贝方式比较少，没有数组提供的类似的方法可以使用，只能使用循环，但是还可以使用 JSON.stringify 和 JSON.parse 来实现，但是这个方法存在一些缺陷。下面看 ES5 中字面量的拷贝实例：

let obj = {a: , b: };
let copy1 = {};
for(let key in obj) {
copy1[key] = obj[key]
}
let copy2 = JSON.parse(JSON.stringify(obj))
上面的两种方法给出了 ES5 拷贝字面量对象的方法，比较麻烦，也容易出错。ES6 给出了它的答案：

let obj = {a: , b: };
let copy = {...obj};
使用展开语法对 obj 进行展开，完美地实现了拷贝过程。

Tips: 这里有必要说明一下，以上的方法都是浅拷贝（只拷贝数组和对象的第一层结构）的过程，对于数组和对象第一层以后的内容，如果是引用类型的存储方式，则不会进行拷贝操作，也就是不会进行深拷贝。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!