参考自:http://www.cnblogs.com/yichengbo/archive/2014/07/10/3835882.html

一、数组的深浅拷贝

在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生。

var arr01 = ["One","Two","Three"];
var arrt02 = arr01;
arrt02[1] = "test";
console.log("arr01:" + arr01); //One,test,Three
console.log("arr02:" + arrt02); //One,test,Three

像上面的这种直接赋值的方式就是浅拷贝,很多时候,这样并不是我们想要得到的结果,其实我们想要的是arr的值不变。

方法一:js的slice方法

var arr01 = ["One","Two","Three"];
var arrt02 = arr01.slice(0);
arrt02[1] = "test";
console.log("arr01:" + arr01); //One,Two,Three
console.log("arr02:" + arrt02); //One,test,Three

方法二:js的concat方法

var arr01 = ["One","Two","Three"];
var arrt02 = arr01.concat();
arrt02[1] = "test";
console.log("arr01:" + arr01); //One,Two,Three
console.log("arr02:" + arrt02); //One,test,Three

二、对象的深拷贝

var a={name:'yy',age:26};
var b={}; b = deepCopy(a);
b.name = 'zz';
console.log(b);  //Object { name="zz", age=26}
console.log(a);  //Object { name="yy", age=26} //定义对象的深拷贝方法
function deepCopy(obj) {
var result={};
for (var k in obj) {
result[k] = obj[k] instanceof Object ? deepCopy(obj[k]) : obj[k];
}
return result;
}

三、兼容数组和对象深拷贝的综合方法

var snail01 = {
name:'奔跑的蜗牛',
age:'26',
like:{
fruit:'orange',
sport:'football'
}
}
// 创建深拷贝方法
function deepCopy(obj){
var result,b; //result:存储拷贝数据,b:存储是否为数组的布尔值
b = obj instanceof Array;
if(obj instanceof Array || obj instanceof Object){
result = b ? [] : {};
for(var k in obj){
if(obj[k] instanceof Array || obj[k] instanceof Object){
result[k] = deepCopy(obj[k]);
}else{
result[k] = obj[k];
}
}
}
return result;
} var snail02 = deepCopy(snail01);
snail02.name = 'running snail02';
snail02.like.fruit = 'banana'; console.log(snail02); // Object { name="running snail02", age="26", like=Object { fruit="banana", sport="football"}}
console.log(snail01); // Object { name="奔跑的蜗牛", age="26", like=Object { fruit="orange", sport="football"}}

JavaScript学习笔记——浅拷贝、深拷贝的更多相关文章

  1. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  4. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  6. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  8. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  9. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

随机推荐

  1. 集合--数据结构与算法JavaScript描述(9)

    集合 Set 概念 (跟高中时数学课上学的集合几乎一模一样哦哈哈) 集合是一种包含不同元素的数据结构. 集合中的元素称为成员. 集合的两个最重要的特性: 集合中的成员是无序的. 集合中不允许相同成员存 ...

  2. SEARCH(文字の検索)

    文字列に関する無効命令 以下の各命令は無効であり.4.6 および 6.10 までのリリースとの互換性を確保するためにのみ利用可能となっています.これらの命令が古いプログラムの中に出現することはあります ...

  3. mysql_connect(): [2002] No such file or directory

    在mac中搭建php的开发环境 1. apach ---- 推荐用MAMP.你只要把你的php文件/项目放入到htdocs(/Applications/MAMP/htdocs)目录下,启动mamp,输 ...

  4. ArcGIS Server远程处理服务器(环境设置)

    当使用ArcGIS Server做远程处理服务器执行影像处理操作时,提示ERROR 999999通用错误代码,如下: Start Time: Mon Jul 03 13:49:06 2017Distr ...

  5. mvc4 Forms验证存储 两种登录代码

    自己也不知道网上看到的第一种居多,第二种用到的人很少,第二种代码十分简洁,就是不清楚是否有安全隐患. 要采用Forms身份验证,先要在应用程序根目录中的Web.config中做相应的设置: <a ...

  6. python+UIAutomation+libary

    #! /usr/bin/env python#Author: XIE TIAN# -*- coding:utf8 -*-from __future__ import unicode_literalsi ...

  7. Python 3基础教程24-读取csv文件

    本文来介绍用Python读取csv文件.什么是csv(Comma-Separated Values),也叫逗号分割值,如果你安装了excel,默认会用excel打开csv文件. 1. 我们先制作一个c ...

  8. const 常量与 define常量的区别

    c++中的常量可以使用const定义,也可以使用#define宏定义的方式:二者区别如下: - **区别** 1. const定义的常量有自己的数据类型,编译器可以对其进行严格的类型检查:但是defi ...

  9. flask - 1

    from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, Worl ...

  10. u盘中毒后文件夹没显示了

    今日,我的U盘插了有毒的电脑,直接中毒了,先是显示有木马,后是自行产生一些文件,接着文件夹没了,后来自己终于解决了,分享一下,自己先用工具将有嫌疑的文件提炼出来,经自行检查后处理,接着打开文件夹选项, ...