广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >es6怎么实现对象拷贝
  • 150

0
分享到

es6怎么实现对象拷贝

javascriptES6 2022-11-22 23:11:52 150人浏览 独家记忆
摘要

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。在理解对象的深拷贝和浅拷贝之前我们首先要知道javascript的数据类型，JavaScript包含两大数据类型，基本数据类型和引用数据类型。基本数据类型

本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。

在理解对象的深拷贝和浅拷贝之前我们首先要知道javascript的数据类型，JavaScript包含两大数据类型，基本数据类型和引用数据类型。

基本数据类型

基本数据类型是值存储在栈中的一些简单的数据。比如:

    let a = '123';
    let b = 2;

在JavaScript中的基本数据类型有String、Number、Boolean、Undefined、Null、Symbol(es6新增的)。基本数据类型都是按值访问的。比如把变量a赋值给变量b，修改变量a的值不会影响变量b的值，它们两个是互相独立的，互不影响。在存储栈中这个两个变量分别分配了空间。

    let a = '123';
    let b = a;
    a = 10;
    console.log(a) // 10
    console.log(b) // 123

引用数据类型

引用类型值是引用类型的实例，它是保存在堆内存中的一个对象，引用类型是一种数据结构，最常用的是Object,Array,Function类型，另外还有Date,RegExp,Error等，ES6同样也提供了Set,Map2种新的数据结构。

    let obj1 = {
        a: '1'
    }
    let obj2 = obj1;
    obj1.a = '2';

    console.log(obj1.a); // 2
    console.log(obj2.a) // 2

看看上面的代码，发现和基本数据类型的结果不太一样，我们把obj1赋值给了obj2，修改obj1的值，obj2的值也发生了改变。由于引用数据类型的值是存储的堆内存中，而在栈内存中存储了指向堆内存中的指针（地址），我们上面代码中的赋值操作只是赋值了指针（地址）。而指针指向的堆内存还是同一个。

1.png

浅拷贝

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值；如果属性是内存地址（引用类型），拷贝的就是内存地址 ，因此如果其中一个对象改变了这个地址，就会影响到另一个对象。

JavaScript中常见的一些浅拷贝方法

Object.assign()

    let target = {}; // 目标对象
    let source = {
        a: 1
    } // 原对象

    Object.assign(target, source);
    console.log(target.a); // 1
    source.a = 2;
    console.log(source.a); // 2
    console.log(target.a); // 1

Object.assign()是一个浅拷贝，它值拷贝了对象的第一层属性。如果对象的属性仍然是一个对象，就无法实现拷贝了。

除了Object.assign()能实现对象的浅拷贝之外，扩展运算符var cloneObj = { ...obj }; Array.prototype.slice()、也都是浅拷贝。

手动实现一个浅拷贝

    function shalldowCopy(source) {
        let obj = Array.isArray(origin) ? [] : {}; // 目标对象
        for(let prop in source) {
            if (src.hasOwnProperty(prop)) {
                target[prop] = source[prop];
            }
        }
        return target;
    }

测试一下

var sourceObj = { a:1, arr: [2,3] };
var targetObject = shallowCopy(sourceObj);

因为浅拷贝只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅拷贝会导致 sourceObj.arr 和 targetObject.arr 指向同一块内存地址。所以导致的结果就是：

shallowObj.arr[1] = 5;
obj.arr[1]; // = 5

深拷贝

深拷贝就是指将一个对象完整的复制一份新的出来，在堆内存中开辟一份新的存储空间。如果对象的属性是对象，也依旧会拷贝。

JavaScript中常见的一些深拷贝方法

JSON.stringify()

JSON.stringify()是目前前端开发过程中最常用的深拷贝方式，原理是把一个对象序列化成为一个jsON字符串，将对象的内容转换成字符串的形式再保存在磁盘上，再用JSON.parse()反序列化将JSON字符串变成一个新的对象

    let target = {}; // 目标对象
    let source = {
        a: 1,
        b: {
            d: 3
        }
    } // 原对象
    let targetStr = JSON.stringify(source);
    let target = JSON.parse(targetStr);
    console.log(target); // {a: 1, b: {d: 3}}
    source.b.d = 10;
    console.log(source); // {a: 1, b: {d: 10}}
    console.log(target); // {a: 1, b: {d: 3}}

手动实现一个深拷贝


function deepCopy(origin) {
    let obj = Array.isArray(origin) ? [] : {};
    if (origin && typeof origin === 'object') {
        for(let key in origin) {
            let item = origin[key];
            if (item && typeof item === 'object') {
                obj[key] = deepCopy(item); 
            } else {
                obj[key] = item;
            }
        }
    }
    return obj;
}

测试一下

var sourceObj = { a:1, arr: [2,3] };
var targetObject = deepCopy(sourceObj); 
shallowObj.arr[1] = 5;
obj.arr[1]; // = 3

以上就是es6怎么实现对象拷贝的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: es6怎么实现对象拷贝

本文链接: https://www.lsjlt.com/news/173397.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • es6怎么实现对象拷贝
    本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。在理解对象的深拷贝和浅拷贝之前我们首先要知道JavaScript的数据类型，JavaScript包含两大数据类型，基本数据类型和引用数据类型。基本数据类型...
    99+
    2022-11-22
    javascript ES6
  • es6如何实现对象拷贝
    今天小编给大家分享一下es6如何实现对象拷贝的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。实现方法：1、用“Object.a...
    99+
    2023-07-04
  • 怎么在JavaScript中实现对象深拷贝
    这篇文章给大家介绍怎么在JavaScript中实现对象深拷贝，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。JavaScript是什么JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaSc...
    99+
    2023-06-14
  • js中如何实现对象拷贝
    小编给大家分享一下js中如何实现对象拷贝，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　原生深克隆方法JSON.parse...
    99+
    2022-10-19
  • javascript怎么深拷贝一个对象
    这篇文章将为大家详细讲解有关javascript怎么深拷贝一个对象，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。JavaScript的作用是什么1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应...
    99+
    2023-06-14
  • Python的对象拷贝和内存布局怎么实现
    前言你知道下面一些程序片段的输出结果吗？a = [1, 2, 3, 4] b = a print(f"{a = } \t|\t {b = }") a[0] = 100 print(f"{a = } \t|\t ...
    99+
    2023-05-15
    Python
  • javascript中怎么深拷贝与浅拷贝二维数组和对象
    javascript中怎么深拷贝与浅拷贝二维数组和对象，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。1.浅拷贝： 将原对象或原...
    99+
    2022-10-19
  • JS怎么实现深拷贝和浅拷贝
    这篇文章主要介绍“JS怎么实现深拷贝和浅拷贝”，在日常操作中，相信很多人在JS怎么实现深拷贝和浅拷贝问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JS怎么实现深拷贝和浅拷贝”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-06-30
  • Java 对象深拷贝工具类的实现
    目录1. 使用场景1.1 场景一1.2 场景二2. Spring 中的对象拷贝3. 本工具类中的对象拷贝3.1 拷贝对象本身（单个）3.2 拷贝对象本身（批量）3.3 拷贝对象属性至...
    99+
    2022-11-13
  • C++中怎么实现对象的拷贝与赋值操作
    今天就跟大家聊聊有关C++中怎么实现对象的拷贝与赋值操作，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。拷贝构造函数，顾名思义，等于拷贝 + 构造。它肩负着创建新对象的任务，同时还要负...
    99+
    2023-06-17
  • Java的深拷贝和浅拷贝怎么实现
    这篇文章主要介绍“Java的深拷贝和浅拷贝怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Java的深拷贝和浅拷贝怎么实现”文章能帮助大家解决问题。关于Java的深拷贝和浅拷贝，简单来说就是创...
    99+
    2023-06-26
  • es6实现深拷贝的方法是什么
    ES6实现深拷贝的方法有多种，以下是其中一种常用的方法：1. 使用`JSON.parse()`和`JSON.stringify()`...
    99+
    2023-10-09
    es6
  • javascript中怎么区分浅拷贝和深拷贝并实现深拷贝
    这篇文章将为大家详细讲解有关javascript中怎么区分浅拷贝和深拷贝并实现深拷贝，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。什么是拷贝 一个东西的拷贝看起来像是原来...
    99+
    2022-10-19
  • 怎么在jQuery中使用$.extend深拷贝对象
    这篇文章主要介绍“怎么在jQuery中使用$.extend深拷贝对象”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么在jQuery中使用$.extend深拷贝对象”文章能帮助大家解决问题。语法：j...
    99+
    2023-06-17
  • JavaScript怎么实现深拷贝
    本篇内容主要讲解“JavaScript怎么实现深拷贝”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript怎么实现深拷贝”吧!什么是浅拷贝关于浅拷贝的概念，我在网上看到一种说法，直接...
    99+
    2023-06-27
  • Linux零拷贝怎么实现
    本篇内容介绍了“Linux零拷贝怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！为了迅速建立起零拷贝的概念，我们拿一个常用的场景进行引...
    99+
    2023-06-16
  • JavaScript中怎么使用JSON.parse()和JSON.stringify()实现对象的深拷贝功能
    今天就跟大家聊聊有关JavaScript中怎么使用JSON.parse()和JSON.stringify()实现对象的深拷贝功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家...
    99+
    2022-10-19
  • Python的对象拷贝和内存布局如何实现
    今天小编给大家分享一下Python的对象拷贝和内存布局如何实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。前言你知道下面一...
    99+
    2023-07-06
  • C++中怎么使用=delete阻止拷贝类对象
    这篇文章将为大家详细讲解有关C++中怎么使用=delete阻止拷贝类对象，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。单例模式的例子例如在Singleton设计模式中就希望类的对象只能通过g...
    99+
    2023-06-19
  • C++11中怎么利用移动类对象代替拷贝类对象
    今天就跟大家聊聊有关C++11中怎么利用移动类对象代替拷贝类对象，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。string类是C++标准库中一个很重要的类，使用非常方便。但是它存在一...
    99+
    2023-06-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作