JS 浅拷贝深拷贝

简介: Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

浅拷贝


Object.assign


Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。


注意


Object.assign 会跳过那些值为 null 或 undefined 的源对象。

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
复制代码


[].concat


[].concat 复制数组, 类似于对于对象的复制, 可以使用 [].concat 进行数组的深复制


var list = [1, 2, 3];
var changedList = [].concat(list);
changedList[1] = 2;
list === changedList; // false
复制代码


同样 concat 方法只能保证一层深复制


> list = [[1,2,3]]
[ [ 1, 2, 3 ] ]
> new_list = [].concat(list)
[ [ 1, 2, 3 ] ]
> new_list[0][0] = 4
4
> list
[ [ 4, 2, 3 ] ]
复制代码

注意


浅拷贝会出现引用混乱的问题

const object1 = {
  title: {
    text: 'hello object1',
    value: '1'
  }
}
const obj1 = Object.assign({}, object1)
const obj2 = Object.assign({}, object1)
obj2.title.text = 'hello world'
console.log('obj1')
console.log(obj1) // { title: { text: 'hello world', value: '1' } }
console.log('obj2')
console.log(obj2) // { title: { text: 'hello world', value: '1' } }
console.log('object1')
console.log(object1) // { title: { text: 'hello world', value: '1' } }
复制代码


深拷贝

递归属性遍历


由于原型不应该被赋予给新对象,在遍历的过程中,使用hasOenProperty方法过滤掉那些继承自原型链上的属性


const object1 = {
  title: {
    text: 'hello object1',
    value: '1'
  }
}
function clone (obj) {
  let copy
  // Handle the 3 simple types, and null or undefined
  if (null == obj || 'object' != typeof obj) return obj
  // Handle Date
  if (obj instanceof Date) {
    copy = new Date()
    copy.setTime(obj.getTime())
    return copy
  }
  // Handle Array
  if (obj instanceof Array) {
    copy = []
    for (var i = 0, len = obj.length; i < len; i++) {
      copy[i] = clone(obj[i])
    }
    return copy
  }
  // Handle Object
  if (obj instanceof Object) {
    copy = {}
    for (var attr in obj) {
      if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr])
    }
    return copy
  }
  throw new Error(`Unable to copy obj! Its type isn't supported.`)
}
let obj3 = clone(object1)
console.log(obj3) // { title: { text: 'hello object1', value: '1' } }
obj3.title.text = 'hi !'
console.log(obj3) // { title: { text: 'hi !', value: '1' } }
console.log(object1) // { title: { text: 'hello object1', value: '1' } }
复制代码

利用JSON深拷贝


JSON.parse(JSON.stringify(obj))


JSON复制会忽略掉值为undefined以及函数表达式


const object2 = {
  title: {
    text: 'object2',
    value: '2',
    age: undefined,
    name: null,
    sum: function() { return 1 }
  }
}
let obj4 = JSON.parse(JSON.stringify(object2))
console.log(obj4) // { title: { text: 'object2', value: '2', name: null } }
obj4.title.text = 'obj4'
console.log(obj4) // { title: { text: 'obj4', value: '2', name: null } }
console.log(object2) // { title: { text: 'object2', value: '2', age: undefined, name: null, sum: [Function: sum] } }


目录
相关文章
|
2月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
49 4
|
3月前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
23 3
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝与浅拷贝
JavaScript中的深拷贝与浅拷贝
42 2
|
4月前
|
JavaScript 前端开发
JavaScript中的深拷贝和浅拷贝的实现讲解
在JavaScript中,浅拷贝与深拷贝用于复制对象。浅拷贝仅复制基本类型属性,对于引用类型仅复制引用,导致双方共享同一数据,一方修改会影响另一方。深拷贝则完全复制所有层级的数据,包括引用类型,确保双方独立。浅拷贝可通过简单属性赋值实现,而深拷贝需递归复制各层属性以避免共享数据。
74 1
|
4月前
|
JavaScript 前端开发
js中浅拷贝和深拷贝的区别
js中浅拷贝和深拷贝的区别
30 0
|
4月前
|
JavaScript 前端开发
js中浅拷贝,深拷贝的实现
js中浅拷贝,深拷贝的实现
35 0
|
4月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
5月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
37 0
|
5月前
|
JavaScript
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
js【详解】深拷贝 (含 JSON.parse(JSON.stringify(obj)) 的缺陷,5种手写深拷贝)
171 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
101 2