美文网首页
数组/对象的深浅拷贝

数组/对象的深浅拷贝

作者: _咻咻咻咻咻 | 来源:发表于2020-09-29 14:24 被阅读0次

浅拷贝

只复制了引用,没有复制真正的值;

  1. 实现数组浅拷贝可以利用arr.concat()、arr.slice()、或es6的arr2 = [...arr1];eg:
var arr1 = [{ a: 0, b: { a: 'a' } }, 1, 2];
// var arr2 = arr1.concat();
// var arr2 = arr1.slice();
var arr2 = [...arr1]
arr2[0].a = 'a'
arr2[0].b.a = 111;
arr2[1] = 5
console.log(arr1); //[{"a":"a","b":{"a":111}},1,2]
console.log(arr2); //[{"a":"a","b":{"a":111}},5,2]
  1. Object.assign()方法用于将所有可枚举属性的值从一个或多个源sources对象复制到目标对象target。它将返回目标对象。属性被后续参数中具有相同属性的其他对象覆盖.
    Object.assign(target, ...sources)
var obj1 = { a: 1, b: { b1: 1 } }
var obj2 = { a: 2, c: 2, d: { d1: 2 } }
var obj3 = { a: 3, e: { e1: 3 } }
var obj4 = Object.assign(obj1, obj2, obj3);
console.log(obj1) // { a: 3, b: { b1: 1 }, c: 2, d: { d1: 2 }, e: { e1: 3 } }
console.log(obj2) // { a: 2, c: 2, d: { d1: 2 } }
console.log(obj3) // { a: 3, e: { e1: 3 } }
console.log(obj4) // { a: 3, b: { b1: 1 }, c: 2, d: { d1: 2 }, e: { e1: 3 } }
obj2.d.d1 = 5;
console.log(obj1) // { a: 3, b: { b1: 1 }, c: 2, d: { d1: 5 }, e: { e1: 3 } }
console.log(obj4) // { a: 3, b: { b1: 1 }, c: 2, d: { d1: 5 }, e: { e1: 3 } }
  1. 也可以自己实现:
//实现浅拷贝
function shallowCopy(target) {
  if (typeof target !== 'object') return
  //判断目标类型,来创建返回值
  var newData = target instanceof Array ? [] : {};
  for (var item in target) {
    //只复制元素自身的属性,不复制原型链上的
    if (target.hasOwnProperty(item)) {
      newData[item] = target[item];
    }
  }
  return newData;
}
var arr1 = [{ a: 0, b: { a: 'a' } }, 1, 2];
var arr2 = shallowCopy(arr1)
arr2[0].a = 'a'
arr2[0].b.a = 111;
arr2[1] = 5
console.log(arr1); //[{"a":"a","b":{"a":111}},1,2]
console.log(arr2); //[{"a":"a","b":{"a":111}},5,2]

深拷贝

复制了真正的值;

  1. arr2 = JSON.parse(JSON.stringify(arr1));
    不适用于值为undefined或function的属性。
    如果有一个值为Date类型,拷贝后得到等是时间的字符串。
  1. 利用递归实现
var deepCopy = (function f(target) {
  if (typeof target !== 'object') return
  //判断目标类型,创建返回值
  var newData = target instanceof Array ? [] : {};
  for (var item in target) {
    //只复制元素自身的属性,不复制原型链上的
    if (target.hasOwnProperty(item)) {
      //判断属性值类型为基本数据类型就直接复制,引用类型做递归深拷贝
      newData[item] = typeof target[item] == 'object' ? f(target[item]) : target[item];
    }
  }
  return newData;
})
var arr1 = [{ a: 0, b: { a: 'a' } }, 1, 2];
var arr2 = deepCopy(arr1)
arr2[0].a = 'a'
arr2[0].b.a = 111;
arr2[1] = 5
console.log(arr1); //[{ a: 0, b: { a: 'a' } }, 1, 2]
console.log(arr2); //[{"a":"a","b":{"a":111}},5,2]

相关文章

  • js的深浅拷贝

    js的深浅拷贝可以分为数组的深浅拷贝和对象的深浅拷贝 一、数组的深浅拷贝如果只是简单的将数组中的元素付给另外一个数...

  • JS文集的目录

    js基础心法 深浅拷贝(递归)深浅拷贝(首层浅拷贝) js 数据处理 数组对象查找的常见操作数组对象去重的常见操作...

  • js 高频面试题(最新)

    1、深浅拷贝 (1) 定义 浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引...

  • 数组/对象的深浅拷贝

    浅拷贝 只复制了引用,没有复制真正的值; 实现数组浅拷贝可以利用arr.concat()、arr.slice()、...

  • 深浅拷贝

    深浅拷贝针对的是 对象类型,如果是字符串的数组用[...arr],还是不会影响 要区分针对数组的深浅拷贝(默认情况...

  • 重新认识js复杂类型数据的引用和深浅拷贝

    js 基本概念———— 数据类型 js 深浅拷贝之概念 代码实现 —— 数组和对象的j浅拷贝 代码实现 —— 数组...

  • js深浅拷贝

    所谓的深浅拷贝是相对与typeof === 'object' 而言的,数组是用堆对应保存的。浅拷贝:拷贝了对象的存...

  • 对象和数组的深浅拷贝

    1、对象的浅拷贝 (1)对象的合并 Object.assign(),第一个参数必须是个空对象 (2)对象的解构赋值...

  • es6中扩展运算符...的使用方式

    es6中扩展运算符... 用于参数对象的所有可遍历属性,拷贝到当前对象之中。可以实现深拷贝实现合并数组 实现深浅拷贝

  • 实现数组和对象的深浅拷贝

    前提:原始数据类型和对象类型赋值时的差异 JavaScript的数据类型分为原始数据类型和对象类型。二者在内存中存...

网友评论

      本文标题:数组/对象的深浅拷贝

      本文链接:https://www.haomeiwen.com/subject/vhekrqtx.html