咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 406|回复: 0

[JavaScript] JS 数组和对象的深拷贝操作示例

[复制链接]
  • TA的每日心情
    无聊
    2019-6-2 14:11
  • 签到天数: 4 天

    [LV.2]圆转纯熟

    发表于 2020-7-6 21:07:09 | 显示全部楼层 |阅读模式
    本文实例讲述了JS 数组和对象的深拷贝操作。分享给大家供大家参考,具体如下:
    一.数组的深拷贝


    let arr = [
    undefined,
    function(){
      console.log(123);
    },
    true,
    null,
    {
      name:"123",
      age:23
    }
    ];
    // arr作为拷贝对象

    1. Array.from()

    Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新数组。

    let arr1 = Array.from(arr);
    arr[0] = 2;
    console.log(arr1);
    // [ undefined, [Function], true, null, { name: '123', age: 23 } ]

    2. Object.assign()


    let arr1 = Object.assign([], arr)
    arr[0] = 2;
    console.log(arr1);
    // [ undefined, [Function], true, null, { name: '123', age: 23 } ]

    此方法也可用作对象的深拷贝
    3. Slice()


    let arr1 = arr.slice(0);
    arr[0] = 2;
    console.log(arr1);
    // [ undefined, [Function], true, null, { name: '123', age: 23 } ]

    4. Concat()


    let arr1 = arr.concat();
    arr[0] = 2;
    console.log(arr1);
    // [ undefined, [Function], true, null, { name: '123', age: 23 } ]

    5. 扩展运算符深拷贝


    // let [...arr1] = arr; // 这两种都可以
    let arr1 = [...arr];
    arr[0] = 2;
    console.log(arr1);
    // [ undefined, [Function], true, null, { name: '123', age: 23 } ]

    此方法也可用作对象的深拷贝
    二.对象的深拷贝


    let obj = {
    name: "a",
    age: 20,
    sex: false,
    user: {
      a: 20,
      n: "b"
    },
    f: function(){
      return 1;
    },
    u: undefined,
    n: null
    }

    用扩展运算符和Object.assign()方法可以深拷贝对象

    let obj1 = Object.assign({}, obj)
    obj[age] = 2;
    console.log(obj1);
    // let obj = { name: "a", age: 20, sex: false,user: {a: 20,n: "b},f: function(){return 1;},u: undefined,n: null}

    感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
    更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
    希望本文所述对大家JavaScript程序设计有所帮助。

    原文地址:https://www.jb51.net/article/188166.htm

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-29 03:10

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表