【ECMAScript 5_6_7】16、ES6——深度克隆知识点及其扩展

最新推荐文章于 2024-10-01 17:46:23 发布

Onedean

最新推荐文章于 2024-10-01 17:46:23 发布

阅读量277

点赞数

分类专栏： ECMAScript 高级

本文链接：https://blog.csdn.net/edc3001/article/details/87989562

版权

高级同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

ECMAScript

17 篇文章 0 订阅

订阅专栏

1、数据类型

* 数据分为基本的数据类型(String, Number, boolean, Null, Undefined)和对象数据类型

- 基本数据类型：特点：存储的是该对象的实际数据（拷贝后会生成一份新的数据，修改拷贝以后的数据不会影响原数据） - 对象/数组数据类型：特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里（拷贝后不会生成新的数据，而是拷贝引用，修改拷贝以后的数据会影响原数据）

2、关于数据的复制

- 基本数据类型存放的就是实际的数据，可直接复制，虽然互不受影响，但这也算不上深拷贝，因为深拷贝本身只针对较为复杂的object类型数据。 let a = 1; let b = a;

直接复制 - 引用数据类型克隆数据：对象/数组 1、区别：浅拷贝/深度拷贝判断：拷贝是否产生了新的数据还是拷贝的是数据的引用

浅拷贝

深度拷贝知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用 let obj = {username: 'kobe'} let obj1 = obj; // obj1 复制了obj在栈内存的引用 2、常用的拷贝数据的方法（只针对object类型数据） 1). 直接赋值给一个变量: 浅拷贝 2). Object.assign: 浅拷贝 3). Array.prototype.concat(): 浅拷贝 4). Array.prototype.slice(): 浅拷贝 5). JSON.parse(JSON.stringify(arr/obj)): 深拷贝(深度克隆) 但不能处理函数数据（转换为null）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>对象的深度克隆</title>
</head>
<body>
<script type="text/javascript">
  //复制基本数据，复制生成了新的数据
  let str1 = 'abcd'
  let str2 = str1
  console.log(str2)  // abcd
  str2 = ''
  console.log(str1)  // abcd

  let boo1 = true
  let boo2 = boo1
  console.log(boo2)  // true
  boo2 = false
  console.log(boo1)  // true

  //拷贝数组/对象，没有生成新的数据而是复制了一份引用
  // 1. 直接赋值给一个变量: 浅拷贝
  let obj1 = {username:'onedean',age:20}
  let obj2 = obj1
  console.log(obj1)  // {username: "onedean", age: 20}
  obj2.username = 'chen'
  console.log(obj1)  // {username: "chen", age: 20}

  let arr1 = [1,4,true,{username:'cw',age:20}]
  let arr2 = arr1
  console.log(arr1)  // (4) [1, 4, true, {…}]
  arr2[0] = 'abc'
  console.log(arr1)  // (4) ["abc", 4, true, {…}]


  console.log('-------------------')
  // 常用的拷贝技术：
  // 2. Object。assign: 浅拷贝
  let obj3 = {username:'one',age:20}
  let obj4 = Object.assign(obj3)
  console.log(obj4)  // {username: "one", age: 20}
  obj4.username = 'cw'
  console.log(obj3)  // {username: "cw", age: 20}

  // 3. Array.prototype.concat(): 浅拷贝
  let arr3 = [1,true,'abc',{username:'tom'}]
  let arr4 = arr3.concat()
  console.log(arr4)  // [1,true,'abc',{username:'tom'}] 这里的结果需要注释掉以后的代码
  arr4[0] = 100  // 索引为0的元素是基本数据类型的复制操作
  arr4[3].username = 'jack'
  console.log(arr3)  // [1,true,'abc',{username:'jack'}] 这里的结果需要注释掉以后的代码

  // 4. Array.prototype.slice(): 浅拷贝
  let arr5 = arr3.slice()
  console.log(arr5)  // [1,true,'abc',{username:'jack'}] 这里的结果需要注释掉以后的代码
  arr5[3].username = 'candy'
  console.log(arr3)  // [1,true,'abc',{username:'candy'}]

  // 5. JSON.parse(JSON.stringify(arr/obj)): 深拷贝(深度克隆)
  let arr6 = JSON.parse(JSON.stringify(arr3))
  console.log(arr6)  // [1,true,'abc',{username:'dean'}]
  arr6[3].username = 'dean'
  console.log(arr3)  // [1,true,'abc',{username:'candy'}]  此时不会影响原数据

</script>
</body>
</html>