js中传递和拷贝详解-js教程-PHP中文网

首页

web前端

js教程

js中传递和拷贝详解

小云云

Mar 13, 2018 pm 06:15 PM

javascript拷贝详解

我们知道js有几种基本的数据类型和其他的复杂数据类型包括（对象，数组，函数），基本数据类型的赋值其实就是值的拷贝，我们称之为值传递，赋值后的变量和原来的变量除了值相等之外并无其他关联。

let x = 666
let y = x
let m = &#39;abc&#39;
let n = m
y = 888
n = &#39;def&#39;
console.log(x, y)//666,888
console.log(m, n)//&#39;abc&#39;,&#39;def&#39;

复杂数据类型的传递并不是这样子的，因为将一个变量绑定到一个复杂数据类型的时候记录的并不是这个复杂数据的值，而是存放了这个数据的一个地址信息，当将这个变量赋值给另一个变量的时候只是将地址传递了过去，这两个变量指向的其实是一个数据信息，当改变任意一个变量的时候，另外的变量都会受到影响,这种传递方式我们称之为引用传递

let obj1 = {
    a : &#39;1&#39;,
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

拷贝

我们知道复杂数据类型的赋值是引用传递，赋值前后的变量会相互影响，在实际项目中我们经常不希望这样子，譬如：

我们在一个view里面有两处用到了data（是一个Array），其一是一个list只要把data按顺序展示即可，其二是一个chart需要把data逆序之后再做数据处理，这时候我们就犯难了，如果直接data.reverse()之后第一处的列表也是逆序的了，这不是我们想见的，我们需要一个方法只复制数组的值，并且这个新数组和原数组的数据地址并不一样，这种复制方式我们称为数组的拷贝。

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

上面的例子可以看出来obj1的第一层属性是复制属性值，没有继承地址的拷贝，但是第二层就是b属性确实共享一块内存地址的，这就是浅拷贝，但是在@4处obj1却没有收到obj2的影响，是因为属性b是一个对象，这种引用传递的重新赋值，计算机会重新分配一块新的内存来存放数据和记录地址信息，所以这时obj1.b.c和obj2.b.c已经不是记录的一个属性值了

也可以理解为：拷贝是之于传递的，直接对复杂数据类型进行赋值是引用传递，不能称之为拷贝，拷贝是对原数据的单纯的数据备份，数据的内存地址信息并不完全一样，这是因为拷贝还分为浅拷贝和深拷贝。

对复杂数据类型的非嵌套的拷贝，就是只拷贝第一层的数据信息的拷贝是浅拷贝，如果第一层的数据有复杂数据类型，则依然采用引用传递的方式，复制的仍然是地址信息，通过其他方式实现的数组对象等的多层嵌套拷贝就是深拷贝。

下面我们再来看下数组和对象如何来实现深浅拷贝：

数组的拷贝

slice方法

let arr1 = [1,2,[3,4]]
let arr2 = arr1.slice(0)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

concat方法

let arr1 = [1,2,[3,4]]
let arr2 = arr1.concat()
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

for循环

let arr1 = [1,2,[3,4]]
let arr2 = []
for(let i = 0; i<arr1.length; i++){
    arr2.push(arr1[i])
}
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

…运算符

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

以上4种数组的拷贝都是浅拷贝，要实现数组的深拷贝就要递归实现

let deepClone = (src)=> {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === 'object') ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

可以发现用方面的方法arr1[2]和arr2[2]不一样，同样上面的深拷贝的方法也适用于对象

对象的拷贝

万能的for循环

let obj1 = {a:1,b:{c:2}}
let obj2 = {}
for(let key in obj1){
    obj2[key] = obj1[key]
}
obj1.b.c = 6
console.log(obj1,obj2)

…运算符

let obj1 = {a:1,b:{c:2}}
let {...obj2} = obj1
obj1.b.c = 6
console.log(obj1,obj2)

Object.assign()

let obj1 = {a:1,b:{c:2}}
let obj2 = Object.assign({},obj1)
obj1.b.c = 6
console.log(obj1,obj2)

上面3种方法是对象的浅拷贝,再介绍2种对象的深拷贝的方法：

转为字符串再转回对象

let obj1 = {a:1,b:{c:2}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.b.c = 6
console.log(obj1,obj2)

deepClone方法，就是上面的数组的deepClone方法

传递

我们知道js有几种基本的数据类型和其他的复杂数据类型包括（对象，数组，函数），基本数据类型的赋值其实就是值的拷贝，我们称之为值传递，赋值后的变量和原来的变量除了值相等之外并无其他关联

let x = 666
let y = x
let m = &#39;abc&#39;
let n = m
y = 888
n = &#39;def&#39;
console.log(x, y)//666,888
console.log(m, n)//&#39;abc&#39;,&#39;def&#39;

let obj1 = {
    a : &#39;1&#39;,
    b : 2
} 
let obj2 = obj1
obj2.b = 3
console.log(obj1,obj2)//{a: "1", b: 3},{a: "1", b: 3}

拷贝

我们知道复杂数据类型的赋值是引用传递，赋值前后的变量会相互影响，在实际项目中我们经常不希望这样子，譬如：

let obj1 = {a:1, b:{c:2}}
let shallowCopy = (src)=> {
    let dst = {}
    for (let prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop]
        }
    }
    return dst
}
let obj2 = shallowCopy(obj1)
console.log(obj1,obj2) //@1
obj1.a = 6
console.log(obj2.a) //@2
obj2.b.c = 666
console.log(obj1.b.c) //@3
obj2.b = {
    c: 888
}
console.log(obj1.b.c) //@4

下面我们再来看下数组和对象如何来实现深浅拷贝：

数组的拷贝

slice方法

let arr1 = [1,2,[3,4]]
let arr2 = arr1.slice(0)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

concat方法

let arr1 = [1,2,[3,4]]
let arr2 = arr1.concat()
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

for循环

let arr1 = [1,2,[3,4]]
let arr2 = []
for(let i = 0; i4da306229a365364db03fbf6bb175852 {
    let result
    (src instanceof Array) ? (result = []) :(result = {})
    for (let key in src) {
        result[key] = (typeof src[key] === 'object') ? deepClone(src[key]) : src[key]//数组和对象的type都是object
    }
    return result
}   
let arr1 = [1,2,[3,4]]
let arr2 = deepClone(arr1)
arr2[2].push(5)
arr2.push(6)
console.log(arr1,arr2)

可以发现用方面的方法arr1[2]和arr2[2]不一样，同样上面的深拷贝的方法也适用于对象

对象的拷贝

万能的for循环

let obj1 = {a:1,b:{c:2}}
let obj2 = {}
for(let key in obj1){
    obj2[key] = obj1[key]
}
obj1.b.c = 6
console.log(obj1,obj2)

…运算符

let obj1 = {a:1,b:{c:2}}
let {...obj2} = obj1
obj1.b.c = 6
console.log(obj1,obj2)

Object.assign()

let obj1 = {a:1,b:{c:2}}
let obj2 = Object.assign({},obj1)
obj1.b.c = 6
console.log(obj1,obj2)

上面3种方法是对象的浅拷贝,再介绍2种对象的深拷贝的方法：

转为字符串再转回对象

let obj1 = {a:1,b:{c:2}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.b.c = 6
console.log(obj1,obj2)

deepClone方法，就是上面的数组的deepClone方法

相关的概念

纯函数

降低影响的方式就是对传入参数进行深度拷贝，并赋给一个新的变量，方式原来的参数被篡改。

我们来看一个纯函数的例子：

let pureFunc = (animal)=> {
    let newAnimal = JSON.parse(JSON.stringify(animal))
    newAnimal.type = &#39;cat&#39;
    newAnimal.name = &#39;Miao&#39;
    return newAnimal
}

let wang = {
    type: &#39;dog&#39;,
    name: &#39;Wang&#39;
}

let miao = pureFunc(wang)
console.log(wang,miao)

通过上面的例子可以看到wang并没有被纯函数所改变值。

大家再来思考一下下面的例子，如果答对了说明你已经对本文所讲的东西有了很深刻的理解了(提醒大家一下—>引用的重新赋值)

let afterChange = (obj)=>{
    obj.a = 6
    obj = {
        a: 8,
        b: 9
    }
    return obj
}
let objIns = {
    a: 1,
    b: 2
}

let objIns2 = afterChange(objIns)
console.log(objIns, objIns2)

以上就是我对js的引用和传递的理解，如有不当之处敬请谅解，Thanks！

相关推荐：

js函数的按值传递参数

JavaScript参数传递图解教程

js函数参数的按值传递解释

以上是js中传递和拷贝详解的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr