项目中根据各种需求或多或少会需要用到拷贝,通过查询整理之后今天简单的记录一下。

我们可以利用 slice、concat 返回一个新数组的特性可以实现数组的拷贝。

var arr = ['a', 1, true, null, undefined];
var new_arr = arr.concat();
console.log(arr) // ["a", 1, true, null, undefined]
console.log(new_arr) // ["a", 1, true, null, undefined] var arr = ['a', 1, true, null, undefined];
var new_arr = arr.slice();
console.log(arr) // ["a", 1, true, null, undefined]
console.log(new_arr) // ["a", 1, true, null, undefined]

我们会发现,无论是新数组还是旧数组都发生了变化,也就是说使用 concat 方法,克隆的并不彻底。这里可以联系值传递和引用传递、栈内存和堆内存的问题:如果数组元素是基本类型,就会拷贝一份,互不影响,而如果是对象或者数组,就会只拷贝对象和数组的引用,这样我们无论在新旧数组进行了修改,两者都会发生变化。

那如何深拷贝一个数组呢?这里介绍一个技巧,不仅适用于数组还适用于对象!那就是:

var arr = ['a', 1, true, ['old1', 'old2'], {old: 1}]
var new_arr = JSON.parse( JSON.stringify(arr) );
console.log(arr);
console.log(new_arr);

以上三个方法 concat、slice、JSON.stringify 都算是技巧类,可以根据实际项目情况选择使用,接下来我们思考下如何实现一个对象或者数组的浅拷贝。

浅拷贝的实现:

遍历对象,然后把属性和属性值都放在一个新的对象就好了

var copy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
newObj[key] = obj[key];
}
}
return newObj;
}
var arr = [{a:"1"},["2"]];
var newarr = copy (arr);
console.log(newarr);//[{a:"1"},["2"]]

深拷贝的实现

我们在浅拷贝的时候判断一下属性值的类型,如果是对象,我们递归调用浅拷贝函数

var deepCopy = function(obj) {
// 只拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是对象
var newObj = obj instanceof Array ? [] : {};
// 遍历obj,并且判断是obj的属性才拷贝
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
/* if(typeof obj[key] === "object"){
newObj[key] = deepCopy(obj[key]);
}else{
newObj[key] = obj[key];
}*/
newObj[key] = typeof obj[key] === "object" ? deepCopy(obj[key]) : obj[key]
}
}
return newObj;
}
var arr = [{a:"1"},["2"]];
var newarr = deepCopy(arr);
console.log(newarr);//[{a:"1"},["2"]]

性能问题

尽管使用深拷贝会完全的克隆一个新对象,不会产生副作用,但是深拷贝因为使用递归,性能会不如浅拷贝,在开发中,还是要根据实际情况进行选择。

JS的深浅拷贝的更多相关文章

  1. JS中深浅拷贝 函数封装代码

    一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...

  2. 两行代码搞定js对象深浅拷贝

    有一段时间没有更新博客了,忙于工作.2018年刚过去,今天来开启2018第一篇博文.好了,咱们步入正题. 先上代码 /** * 遍历对象 * 1.判断是不是原始值 * 2.判断是数组还是对象 * 3. ...

  3. JS实现深浅拷贝

    1.实现浅拷贝 // 1. ...实现 let copy1 = {...{x:1}} // 2. Object.assign实现 let copy2 = Object.assign({}, {x:1} ...

  4. JS复习之深浅拷贝

    一.复习导论(数据类型相关) 想掌握JS的深浅拷贝,首先来回顾一下JS的数据类型,JS中数据类型分为基本数据类型和引用数据类型. 基本数据类型是指存放在栈中的简单数据段,数据大小确定,内存空间大小可以 ...

  5. JS--变量及深浅拷贝

    JS变量分为基本类型和引用类型 基本类型数据包括Number, String, Boolean, Null, Undefined五种类型: 引用数据类型包括Array, Date, RegExp, F ...

  6. javascript简单实现深浅拷贝

    深浅拷贝知识在我们的日常开发中还算是用的比较多,但是之前的状态一直都是只曾听闻,未曾使用(其实用了只是自己没有意识到),所以今天来跟大家聊一聊js的深浅拷贝: 首先我们来了解一下javascript的 ...

  7. 【 js 基础 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

  8. 【 js 基础 】【 源码学习 】 深浅拷贝

    underscore的源码中,有很多地方用到了 Array.prototype.slice() 方法,但是并没有传参,实际上只是为了返回数组的副本,例如 underscore 中 clone 的方法: ...

  9. js 基础数据类型和引用类型 ,深浅拷贝问题,以及内存分配问题

    js 深浅拷贝问题 浅拷贝一般指的是基本类型的复制 深拷贝一般指引用类型的拷贝,把引用类型的值也拷贝出来 举例 h5的sessionStorage只能存放字符串,所以要存储json时就要把json使用 ...

随机推荐

  1. 使用 nodeJs 开发微信公众号(配置服务器)

    流程如下: 1. 申请微信公众号:企业号.服务号.订阅号(前两个要钱) 2. 配置微信公众号后台 选择基本配置,获得 AppId 和 AppSecret ,点击服务器配置 URL:你服务器地址,不能是 ...

  2. Java爬虫——常用的maven依赖

    java实现爬虫常用的第三方包: httpclient,for http jsoup,for dom rhino,for js jackson,for json pom.xml摘录 <depen ...

  3. 38_redux_counter应用_react版本

    redux的核心API 使用非redux创建: 项目结构: index.js import React from 'react'; import ReactDOM from 'react-dom'; ...

  4. Golang源码探索(二) 协程的实现原理(转)

    Golang最大的特色可以说是协程(goroutine)了, 协程让本来很复杂的异步编程变得简单, 让程序员不再需要面对回调地狱,虽然现在引入了协程的语言越来越多, 但go中的协程仍然是实现的是最彻底 ...

  5. [Flutter] 写第一个 Flutter app,part1 要点

    模拟器中调试元素的布局: Android Studio 右侧边栏 Flutter Inspector,选择 Toggle Debug Paint 打开. 格式化代码: 编辑器中右键 Reformat ...

  6. JS创建一个数组1.求和 2.求平均值 3.最大值 4.最小值 5.数组逆序 6.数组去重 0.退出

    rs = require("readline-sync"); let arr = []; console.log("请输入数组的长度:"); let arr_l ...

  7. P61 实践作业

    网络攻防实验环境搭建 根据链接下载的实验工具包,将其解压 打开VM虚拟机,点击图中红色框,扫描虚拟机 选择文件所在位置 点击下一步,完成.即可 在VM虚拟机设置中把网络适配器修改为桥接模式.如下图 在 ...

  8. OSVOS 半监督视频分割入门论文(中文翻译)

    摘要: 本文解决了半监督视频目标分割的问题.给定第一帧的mask,将目标从视频背景中分离出来.本文提出OSVOS,基于FCN框架的,可以连续依次地将在IMAGENET上学到的信息转移到通用语义信息,实 ...

  9. java script简介

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标 ...

  10. centos6升级glibc-2.14没有报错,但是验证没有升级成功的问题解决

    一.下载 cd /usr/local/srcwget http://ftp.gnu.org/gnu/glibc/glibc-2.14.tar.gz 二.安装 tar -xzvf glibc-2.14. ...