ES6 --- 展开运算符（一）

作者：bo

2022 年 7 月 14 日
本文字数：764 字
阅读完需：约 3 分钟

ES6 展开运算符（...）

展开运算符... 和 Object.assign 的用法相似，但是后面的写法太长了，现在都在用...的方式

合并数组

let arr1 = [1, 2, 3];let arr2 = [4, 5, 6];

复制代码

在我们日常开发过程中，经常会合并两个数组的数据，在此之前，利用 for 循环依次将第二个数组每个数据输入到第一个数组中，这样不仅会降低开发效率，代码量也会很大。使用 es6 的展开运算符可以快速的合并两个数组。

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

复制代码

合并对象

与数组合并相似，使用 es6 的展开运算符可以快速的合并两个对象。

let school = {name: 'sylu'};let address = {add: 'shenyang'};
let mine = {...school, ...address};console.log(mine);		// {name: 'sylu', add: 'shenyang'}

复制代码

这样合并后，如果再改变原来对象的值，新对象的值也会改变，这就说明合并的过程是浅拷贝。解决这个问题，可以先将对象转化成字符串，再转化成 JSON，这样一来就是深拷贝，解决了这个问题。

let me = JSON.parse(JSON.stringify({...school, ...address}));

复制代码

这样其实也会有一个问题，就是如果对象里有函数，而 JSON.stringify 不支持将函数转化，这里就需要自己实现深拷贝。

手写深拷贝

(思路：递归拷贝，一层层拷贝)

function deepClone(obj){    if(obj == null) return obj;    if(obj instanceof Date) return new Date(obj);    if(obj instanceof RegExp) return new RegExp(obj);    if (typeof obj !== 'object') return obj;    let cloneObj = new obj.constructor;    for(let key in obj){        if(obj.hasOwnProperty(key)) {            cloneObj[key] = deepClone(obj[key]);        }    }    return cloneObj;}let obj = {age: 18}let n = deepClone(obj);console.log(n);

复制代码

手写深拷贝也是面试经常会遇到的问题（必须拿捏）👌

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/1fc24389acc0f4fd7dba231b9】。文章转载请联系作者。

bo

关注

还未添加个人签名 2022.07.11 加入

还未添加个人简介

发布

暂无评论

创作场景

ES6 --- 展开运算符（一）

ES6 展开运算符（...）

合并数组

合并对象

手写深拷贝

bo

评论