JavaScript 赋值,浅复制和深复制的区别

目录
  • 1、变量赋值
    • 1.1 原始值和引用值
    • 1.2 赋值
  • 二、浅复制(Shallow Copy)
    • 2.1 原生 JavaScript 中的浅复制
      • Object.assign()
    • 2.2 浅复制的手动实现
  • 三、深复制(Deep Copy)
    • 2.1 原生 JavaScript 中的深复制
      • JSON.parse(JSON.stringify(object))
    • 2.2 深复制的手动实现
  • 小结

前言:

浅复制和深复制可以说是面试中很常见的一道题了,本文就来聊一聊JavaScript中的浅复制和深复制。

1、变量赋值

不知道会不会有人会和我一样,会觉得浅复制就是通过=操作符将一个变量赋值给另外一个变量。但实际上,浅复制和变量赋值之间是存在区别的。所以,我们先来了解一下变量赋值。

1.1 原始值和引用值

原始值(primitive value):最简单的数据,即:Undefined、Null、Boolean、Number、String、BigInt、Symbol这其中类型的值。保存原始值的变量是按值访问的,我们操作的就是存储在变量中的实际值。

引用值(reference value):有多个值构成的对象,即 Object 类型。引用值是保存在内存中的对象,但是 JavaScript 不允许直接访问内存位置,所以不能直接操作对象所在的内存空间。在操作对象时,实际操作的是该对象的引用(reference) 而非实际的对象本身。保存引用值得变量实际上存储得是对象得引用,是按引用访问得。

1.2 赋值

首先说明这里说的赋值,不是直接把引用值(例如:{})或者原始值(例如:false、1、"str"等)直接赋值给一个变量。而是通过变量把一个值赋值给另一个变量。

原始值赋值:保存原始值的变量是按值访问的,所以通过变量把一个原始值赋值给另一个变量时,原始值会被复制到新变量的位置。

let num1 = 5;
let num2 = num1;
console.log(num1, num2);  // 5 5
num2 = 4;
console.log(num1, num2);  // 5 4

可以看出 num2 通过 num1 被赋值为5,保存的是同一个原始值。而且两个变量相互独立,互不干扰。

具体赋值过程如下:

引用值赋值:保存引用值的变量是按引用访问的,通过变量把一个引用赋值给另一个变量时,存储在变量中的值也会被复制到新变量的位置。但是,这里复制的实际上是一个指向存储在堆内存中对象的指针。赋值后,两个变量实际上指向同一个对象。所以两个变量通过引用对对象的操作会互相影响。

let obj1 = {};
let obj2 = obj1;
console.log(obj1);  // {}
console.log(obj2);  // {}
obj1.name = 'haha';
console.log(obj1);  // { name: 'haha' }
console.log(obj2);  // { name: 'haha' }
obj1.age = 24;
console.log(obj1);  // { name: 'haha', age: 24 }
console.log(obj2);  // { name: 'haha', age: 24 }

如上代码,通过 obj1 将指向对象的引用赋值给 obj2后, obj1 和 obj2 保存了指向同一对象的引用,所以操作的是同一对象。

具体可见下图:

注:如上两图来自《JavaScript 高级程序设计(第四版)》

接下来要说的浅复制和深复制就是针对引用值而言的。

二、浅复制(Shallow Copy)

我们先来看一篇博客中对于浅复制的定义:

An object is said to be shallow copied when the source top-level properties are copied without any reference and there exist a source property whose value is an object and is copied as a reference. If the source value is a reference to an object, it only copies that reference value to the target object.

对此,个人的理解浅复制就是复制该对象的的每个属性,如果该属性值是原始值,则复制该原始值,如果属性值是一个对象,那么就复制该对象的引用。

即:浅复制将复制顶层属性,但嵌套对象在原始(源)和拷贝(目标)之间共享

2.1 原生 JavaScript 中的浅复制

Object.assign()

Object.assign()  方法将所有可枚举(Object.propertyIsEnumerable() 返回 true)和自有(Object.hasOwnProperty() 返回 true)属性从一个或多个源对象复制(浅复制) 到目标对象,返回修改后的对象。

如下代码可以看出,浅复制和变量赋值不同,修改对象的属性值互不影响。

const source = { a: 1, b: 2 };
const objCopied = Object.assign({}, source);

console.log(objCopied); // { a: 1, b: 2 }

source.a = 3;
console.log(source);  // { a: 3, b: 2 }
console.log(objCopied);  // { a: 1, b: 2 }

objCopied.a = 4;
console.log(source);  // { a: 3, b: 2 }
console.log(objCopied);  // { a: 4, b: 2 }

对象内的嵌套对象在源对象和拷贝对象之间还是共享的,如上代码,修改对象内对象的属性时会相互影响。

const source = { a : {b : 1} };
const objCopied = Object.assign({}, source);

console.log(objCopied); // { a: { b: 1 } }

source.a.b = 3;
console.log(source);  // { a: { b: 3 } }
console.log(objCopied);  // { a: { b: 3 } }

但是注意如下代码中,source.a = {};修改的是源对象中属性的值,这个并不共享。

const source = { a : {b : 1} };
const objCopied = Object.assign({}, source);

console.log(objCopied); // { a: { b: 1 } }

source.a = {};
console.log(source);  // { a: {} }
console.log(objCopied);  // { a: { b: 1 } }

展开运算符(...):展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造字面量对象时, 将对象表达式按key-value的方式展开。

const source = { a : {b : 1}, c: 2 };
const objCopied = {...source}

console.log(objCopied); // { a: { b: 1 }, c: 2 }

source.c = 3;
console.log(source);  // { a: { b: 1 }, c: 3 }
console.log(objCopied);  // { a: { b: 1 }, c: 2 }

source.a.b = 3;
console.log(source);  // { a: { b: 3 }, c: 3 }
console.log(objCopied);  // { a: { b: 3 }, c: 2 }

2.2 浅复制的手动实现

function shallowClone(source) {
    // 如果是原始值,直接返回
    if (typeof source !== 'object') {
        return source;
    }

    // 拷贝后的对象
    const copied = Array.isArray(source) ? [] : {};

    // 遍历对象的key
    for(let key in source) {
        // 如果key是对象的自有属性
        if(source.hasOwnProperty(key)) {
            // 复制属性
            copied[key] = source[key]
        }
    }

    // 返回拷贝后的对象
    return copied;
}

三、深复制(Deep Copy)

首先来看深复制的定义:

A deep copy will duplicate every object it encounters. The copy and the original object will not share anything, so it will be a copy of the original.

与浅复制不同时,当源对象属性的值为对象时,赋值的是该对象,而不是对象的引用。所以深复制中,源对象和拷贝对象之间不存在任何共享的内容。

2.1 原生 JavaScript 中的深复制

JSON.parse(JSON.stringify(object))

JavaScript 中最常见的深复制的方法就是JSON.parse(JSON.stringify(object))

如下代码所示,深复制中源对象和拷贝对象不共享任何内容,即使是嵌套对象。

let obj = {
    a: 1,
    b: {
        c: 2,
    },
}
let newObj = JSON.parse(JSON.stringify(obj));
obj.b.c = 20;
console.log(obj); // { a: 1, b: { c: 20 } }
console.log(newObj); // { a: 1, b: { c: 2 } }

2.2 深复制的手动实现

function deepClone(source) {
    // 如果是原始值,直接返回
    if (typeof source !== 'object') {
        return source;
    }
    // 拷贝后的对象
    const copied = Array.isArray(source) ? [] : {};
    // 遍历对象的key
    for(let key in source) {
        // 如果key是对象的自有属性
        if(source.hasOwnProperty(key)) {
            // 深复制
            copied[key] = deepClone(source[key]);
        }
    }
    return copied;
}

有关浅复制和深复制的手动实现,这里只是简单实现了一下。其中还有很多细节未实现,具体的实现大家可以参见lodash中的实现。

小结

  • 赋值操作符是把一个对象的引用赋值给一个变量,所以变量中存储的是对象的引用
  • 浅复制是复制源对象的每个属性,但如果属性值是对象,那么复制的是这个对象的引用。所以源对象和拷贝对象之间共享嵌套对象。
  • 深复制与浅复制不同的地方在于,如果属性值为对象,那么会复制该对象。源对象和拷贝对象之间不存在共享的内容。

到此这篇关于JavaScript 赋值,浅复制和深复制的区别的文章就介绍到这了,更多相关JS 赋值内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript解构赋值详解

    目录 概念 数组解构 声明分别赋值 解构默认值 交换变量值 解构函数返回的数组 忽略返回值(或跳过某一项) 赋值数组剩余值给一个变量 嵌套数组解构 字符串解构 对象解构 基础对象解构 赋值给新变量名 解构默认值 赋值给新对象名的同时提供默认值 同时使用数组和对象解构 不完全解构 赋值剩余值给一个对象 嵌套对象解构(可忽略解构) 注意事项 小心使用已声明变量进行解构 函数参数的解构赋值 解构的用途 交换变量的值 从函数返回多个值 提取JSON数据 总结 概念 ES6提供了更简洁的赋值模式,从数组和

  • JS ES新特性之变量的解耦赋值

    目录 1.数组的解耦赋值 1.1数组解耦赋值是什么 1.2数组解耦赋值失败 1.3不完全解耦赋值 1.4默认值 1.5数组解耦赋值的复杂情况 2.对象的解耦赋值 2.1对象解耦赋值的特殊情况 2.2解耦赋值失败 2.3不完全解耦赋值 2.4默认值 3.字符串.数值.和布尔值的解耦赋值 3.1字符串解耦赋值 3.2数值和布尔值的解耦赋值 4.函数的解耦赋值 5.小括号的问题 5.1不能使用小括号的情况 5.2可以使用小括号的情况 6.变量解耦赋值的用处 6.1交换变量的值 6.2从函数返回多个值

  • JavaScript解构赋值的实用技巧指南

    目录 一.基本概念 二.解构分类 1. 对象的解构赋值 2. 数组的解构赋值 (1)字符串 (2)数组 (3)集合 (4)Map 三.嵌套解构 四.使用技巧 1. 函数解构 (1)解构函数参数 2. 循环中的解构 3. 动态属性解构 4. 交换变量 5. 数组拷贝 四.解构赋值注意点 总结 一.基本概念 为什么需要解构呢,先来看一个例子: const student = { name: 'ZhangSan', age: 18, scores: { math: 19, english: 85, c

  • JavaScript解构赋值的5个常见场景与实例教程

    目录 前言 1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量.这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值. 1. 提取数据 先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始. const product = { id: 1, title: "Ni

  • ES6下javascript解构赋值常见用法总结

    Javascript解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b Javascript解构赋值问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量占用多一行,代码行数和重复的声明a,使得代码不够简洁,能否通过左边变量名,匹配到右边的属性名从而取得对应的值,ES6解构语法核心就基于这样的模式匹配思想 上面的问题解构方案: let obj = { a: 1, b: 2 } // 取值 let {a,

  • 详解JS ES6变量的解构赋值

    1.什么是解构? ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.它在语法上比ES5所提供的更加简洁.紧凑.清晰.它不仅能减少你的代码量,还能从根本上改变你的编码方式. 2.数组解构 以前,为变量赋值,我们只能直接指定值,比如 let a = 1; let b = 2; let c = 3; 现在可以用数组解构的方式来进行赋值 let [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1, 2, 3 这是数组解构最基本类型

  • 一篇文章带你了解JavaScript的解构赋值

    目录 1. 什么是解构赋值 ? 2. 数组的解构赋值 2.1) 数组解构赋值的默认值 2.2) 数组解构赋值的应用 类数组中的应用 交换变量的值 3. 对象的解构赋值 3.1) 对象解构赋值的默认值 3.2)对一个已声明的变量解构赋值 4. 字符串的解构赋值 总结 1. 什么是解构赋值 ? 将属性/值从对象/数组中取出,赋值给其他变量 通俗来说,即解析某一数据的结构,将我们想要的东西提取出来,赋值给变量或常量. 让我们通过一个例子看看: const [a, b, c] = [1, 2, 3];

  • js中的赋值 浅拷贝和深拷贝详细

    目录 1.js内存 2.赋值 3.浅拷贝 4.深拷贝 前言: 在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下 1.js内存 js内存,或者说大部分语言的内存都分为栈和堆.基本数据类型的变量值分配在栈上,引用数据类型的变量值分配在堆上,栈中只是存储具体堆中对象的地址. 2.赋值 对于基本数据类型,赋值操作是拷贝,即新旧变量不会相互影响. var a = 1; var b = a; b = 2; console.log(b); // 2 对于引用数据类型,赋值操作只是在栈中新增一个指

  • JavaScript 赋值,浅复制和深复制的区别

    目录 1.变量赋值 1.1 原始值和引用值 1.2 赋值 二.浅复制(Shallow Copy) 2.1 原生 JavaScript 中的浅复制 Object.assign() 2.2 浅复制的手动实现 三.深复制(Deep Copy) 2.1 原生 JavaScript 中的深复制 JSON.parse(JSON.stringify(object)) 2.2 深复制的手动实现 小结 前言: 浅复制和深复制可以说是面试中很常见的一道题了,本文就来聊一聊JavaScript中的浅复制和深复制. 1

  • PHP中的浅复制与深复制的实例详解

    PHP中的浅复制与深复制的实例详解 前言: 最近温习了一下Design Pattern方面的知识,在看到Prototype Pattern这一设计模式时,注意到其中涉及到一个浅复制与深复制的问题.这里来总结一下,提醒自己以后一定要多加注意. 自PHP5起,new运算符自动返回一个引用,一个 对象变量 已经不再保存整个对象的值,只是保存一个标识符来访问真正的对象内容.当对象作为参数传递,作为结果返回,或者赋值给另外一个变量,另外一个变量跟原来的不是引用的关系,只是他们都保存着同一个标识符的拷贝,这

  • php5对象复制、clone、浅复制与深复制实例详解

    本文实例讲述了php5对象复制.clone.浅复制与深复制.分享给大家供大家参考,具体如下: 对象复制的由来 为什么对象会有"复制"这个概念,这与PHP5中对象的传值方式是密切相关的,让我们看看下面这段简单的代码 PHP代码 /** * 电视机类 */ class Television { /** 屏幕高度 */ protected $_screenLength = 300; /** 屏幕宽度 */ protected $_screenHight = 200; /** 电视机外观颜色

  • PHP对象的浅复制与深复制的实例详解

    PHP对象的浅复制与深复制的实例详解 最近在看原型模式时注意到这个问题~~PHP中对象 '=' 与'clone'的区别 实例代码: //聚合类 class ObjA { public $num = 0; public $objB;//包含的对象 function __construct() { $this->objB = new ObjB(); } //只有实现了下面方法聚合类 才能实现深复制 /*function __clone() { $this->objB = clone $this-&

  • C++对象的浅复制和深复制详解及简单实例

    C++对象的浅复制和深复制详解及简单实例 浅复制:两个对象复制完成后共享某些资源(内存),其中一个对象的销毁会影响另一个对象 深复制:两个对象复制完成后不会共享任何资源,其中一个对象的销毁不会影响另一个对象 下面我们来看一段代码,以便直观的理解: #include<iostream> #include<string.h> using namespace std; class Student { int no; char *pname; public: Student(); Stud

  • 举例区分Python中的浅复制与深复制

    copy模块用于对象的拷贝操作.该模块非常简单,只提供了两个主要的方法: copy.copy 与 copy.deepcopy ,分别表示浅复制与深复制.什么是浅复制,什么是深复制,网上有一卡车一卡车的资料,这里不作详细介绍.复制操作只对复合对象有效.用简单的例子来分别介绍这两个方法. 浅复制只复制对象本身,没有复制该对象所引用的对象. #coding=gbk import copy l1 = [1, 2, [3, 4]] l2 = copy.copy(l1) print l1 print l2

  • Java 浅复制和深复制的实例详解

    Java 浅复制和深复制的实例详解 1 浅复制和深复制区别 浅复制:浅复制只是复制本对象的原始数据类型,如int.float.String,对于数组和对象引用等是不会复制的.因此浅复制是有风险的. 深复制:不但对原始数据类型进行复制,对于对象中的数组和对象引用也做复制的行为,从而达到对对象的完全复制. 2 代码示例 package com; import java.util.ArrayList; public class Test implements Cloneable { // 私有属性 p

  • js中如何复制一个数组(浅复制、深复制)

    目录 下面介绍数组的浅复制 方法一:concat() 方法二:slice() 方法三:扩展运算符 方法四: Object.assign() 下面是深复制 方法一:JSON.parse(JSON.stringify(arr)) 方法二:通用方法(数组或对象) 方法三:利用lodash的深拷贝函数 在Vue中使用 安装 在main.js中引入 使用 总结 在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其

  • JavaScript 复制对象与Object.assign方法无法实现深复制

    在JavaScript这门语言中,数据类型分为两大类:基本数据类型和复杂数据类型.基本数据类型包括Number.Boolean.String.Null.String.Symbol(ES6 新增),而复杂数据类型包括Object,而所有其他引用类型(Array.Date.RegExp.Function.基本包装类型(Boolean.String.Number).Math等)都是Object类型的实例对象,因此都可以继承Object原型对象的一些属性和方法. 而对于基本数据类型来说,复制一个变量值,

  • Java中对象的深复制(深克隆)和浅复制(浅克隆)介绍

    1.浅复制与深复制概念 ⑴浅复制(浅克隆) 被复制对象的所有变量都含有与原来的对象相同的值,而所有的对其他对象的引用仍然指向原来的对象.换言之,浅复制仅仅复制所考虑的对象,而不复制它所引用的对象. ⑵深复制(深克隆) 被复制对象的所有变量都含有与原来的对象相同的值,除去那些引用其他对象的变量.那些引用其他对象的变量将指向被复制过的新对象,而不再是原有的那些被引用的对象.换言之,深复制把要复制的对象所引用的对象都复制了一遍. 2.Java的clone()方法 ⑴clone方法将对象复制了一份并返回

随机推荐