«

js中怎么复制一个数组

时间:2024-7-4 11:12     作者:韩俊     分类: Javascript


这篇“js中怎么复制一个数组”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“js中怎么复制一个数组”文章吧。

    在js中,我们经常会用到数组复制,Array是引用类型,如果用arrA=arrB简单的把一个数组赋值,并没有创造出一个新数组,arrA和arrB其实指向的还是同一个地址,改变一个另一个也会随之改变,很明显这并不是我们想要的

      var arr = [1, 2, 3];
      var newArr = arr;
      arr.push(4);
      console.log(newArr1);  // [1, 2, 3, 4]

    下面介绍数组的浅复制

    (适用于数组并不复杂,即数组中没有嵌套对象或者嵌套数组)

    方法一:concat()

      concat()方法用于连接两个或多个数组;

      concat() 方法不会更改现有数组,而是返回一个新数组,其中包含已连接数组的值。

      var arr = [1, 2, 3];
      var newArr = arr.concat();
      arr.push(4);
      console.log(newArr); // [1, 2, 3]

    方法二:slice()

      slice() 方法以新的数组对象,返回数组中被选中的元素;

      slice() 方法选择从给定的 start 参数开始的元素,并在给定的 end 参数处结束,但不包括;

      slice() 方法不会改变原始数组;

      var arr = [1, 2, 3];
      var newArr = arr.slice();
      arr[0] = 10;
      console.log(arr);// [10, 2, 3]
      console.log(newArr);// [1, 2, 3]

    方法三:扩展运算符

      var arr = [1, 2, 3];
      var [ ...newArr ] = arr;
      arr[0] = 10;
      console.log(arr); // [10, 2, 3]
      console.log(newArr);// [1, 2, 3]

    方法四: Object.assign()

     var arr = [1, 2, 3];
     var newArr = Object.assign([], arr);
     arr[0] = 10;
     console.log(arr);// [10, 2, 3]
     console.log(newArr);// [1, 2, 3]

    如果数组元素是对象或者数组,上面四种方法就会只拷贝数组或者对象的引用,如果我们对其中一个数组进行修改,另一个数组也会发生变化

    比如:

      var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
      let newArr = arr.concat();
      arr[0].a = 2;
      console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
      console.log(newArr);// [ { a: 2 }, [ 1, 2 ], 3 ] 值被影响

    下面是深复制

    (可以完全拷贝一个数组,即使嵌套了对象或者数组,两者也不会互相影响)

    方法一:JSON.parse(JSON.stringify(arr))

      var arr = [ { a: 1 }, [ 1, 2 ], 3 ];
      // let newArr = JSON.parse(JSON.stringify(arr));
      let newArr = arr.concat();
      arr[0].a = 2;
      console.log(arr); // [ { a: 2 }, [ 1, 2 ], 3 ]
      console.log(newArr);// [ { a: 1 }, [ 1, 2 ], 3 ]

    但是该方法是有局限性的

      会忽略 undefined

      会忽略 symbol

      不能序列化函数

      不能解决循环引用的对象

    比如下面这个例子:

    let a = {
      age: undefined,
      sex: Symbol('male'),
      jobs: function() {},
      name: 'sun'
    }
    let b = JSON.parse(JSON.stringify(a))
    console.log(b) // {name: "sun"}

    方法二:通用方法(数组或对象)

    拷贝的时候判断属性值的类型,如果是对象,继续递归调用深拷贝函数(简易版)

      var deepCopy = function(obj) {
        // 判断是否是对象
        if (typeof obj !== 'object') return;
        // 判断obj类型,根据类型新建一个对象或者数组
        var newObj = obj instanceof Array ? [] : {}
        // 遍历对象,进行赋值
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            let val = obj[key];
            // 判断属性值的类型,如果是对象,递归调用deepCopy
            newObj[key] = typeof val === 'object' ? deepCopy(val) : val
          }
        }
        return newObj
      }

    方法三:利用lodash的深拷贝函数

    _.cloneDeep(value)

    其中value就是要深拷贝的值

    简单例子

    var objects = [{ 'a': 1 }, { 'b': 2 }];
    var deep = _.cloneDeep(objects);
    console.log(deep[0] === objects[0]);
    // => false

    在Vue中使用

    安装

    npm i --save lodash

    在main.js中引入

    import _ from 'lodash';
    Vue.prototype._ = _;

    使用

    let newObj = this._.cloneDeep(oldObj)

    标签: javascript

    热门推荐