JS深拷贝和浅拷贝

76 阅读2分钟

浅拷贝:把对象拷贝给一个新的对象,开发中我们经常需要复制一个对象

如果直接赋值,则复制的是地址,修改任何一个对象,另一个对象都会变化

常见方法:

  1. 拷贝对象:Object.assgin() / 展开运算符 {...obj} 拷贝对象
  2. 拷贝数组:Array.prototype.concat() 或者 [...arr]

浅拷贝注意:

  • 如果是基本数据类型拷贝值
  • 如果是引用数据类型拷贝的是地址

简单理解:如果是单层对象,没问题,如果有多层就有问题,还是会影响原来对象

深拷贝

深拷贝:拷贝多层,不再拷贝地址

常见方法:

  1. 通过 JSON 序列化实现
  2. lodash库 实现
  3. 通过递归实现

通过JSON序列化实现

JSON.stringify() 序列化为 JSON 字符串,然后再JSON.parse() 转回对象格式

js库 lodash实现深拷贝

官网地址:www.lodashjs.com/

通过递归实现深拷贝

递归:

所谓递归就是一种函数调用自身的操作

  • 简单理解:函数内部自己调用自己, 就是递归,这个函数就是递归函数
  • 递归函数的作用和循环效果类似
  • 由于递归很容易发生“栈溢出”错误(stackoverflow),所以记得添加退出条件 return

深拷贝思路:

  1. 深拷贝的核心是利用函数递归
  2. 封装函数,里面先判断拷贝的是数组还是对象
  3. 然后开始遍历
  4. 如果属性值是引用数据类型(比如数组或者对象),则再次递归函数
  5. 如果属性值是基本数据类型,则直接赋值即可
## 异常处理

了解 JavaScript 中程序异常处理的方法,提升代码运行的健壮性。

throw

异常处理是指预估代码执行过程中可能发生的错误,然后最大程度的避免错误的发生导致整个程序无法继续运行

总结:

  1. throw 抛出异常信息,程序也会终止执行

  2. throw 后面跟的是错误提示信息

  3. Error 对象配合 throw 使用,能够设置更详细的错误信息

function counter(x, y) {

if(!x || !y) {
  // throw '参数不能为空!';
  throw new Error('参数不能为空!')
}

return x + y

}

counter()

总结:

0. throw 抛出异常信息,程序也会终止执行 0. throw 后面跟的是错误提示信息

  1. Error 对象配合 throw 使用,能够设置更详细的错误信息

function foo() { try { // 查找 DOM 节点 const p = document.querySelector('.p') p.style.color = 'red' } catch (error) { // try 代码段中执行有错误时,会执行 catch 代码段 // 查看错误信息 console.log(error.message) // 终止代码继续执行 return

  }
  finally {
      alert('执行')
  }
  console.log('如果出现错误,我的语句不会执行')
}
foo()
总结:

0. try...catch 用于捕获错误信息 0. 将预估可能发生错误的代码写在 try 代码段中 0. 如果 try 代码段中出现错误后,会执行 catch 代码段,并截获到错误信息