前端代码深浅拷贝四种方式

今天公司的实习生有问我代码怎么深拷贝

下面我就给大家整理四种前端代码深拷贝的四种方式

前端数据分为基本数据类型和引用数据类型,当我们拷贝引用数据类型的时候，我们希望改变新数组（对象）不改变原本的数组（对象），我们往往会深拷贝数据。下面是四种深拷贝数据的方法

深拷贝方式一

首先给大家说一种最简单也最常用一种深拷贝

JSON.parse(JSON.stringify(引用数据类型))

  <script>
    let obj={name:'尚雷砺',age:23,sex:'男'}
    let newObj=JSON.parse(JSON.stringify(obj))
    console.log(obj===newObj);//false
  </script>

深拷贝方式二

在我们的jquery中也可以深拷贝

注意：使用jquery中的深拷贝已经要引入jquery

我这里就使用远程的jquery连接了

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script>
    let obj={name:'尚雷砺',age:23,sex:'男'}
    let newObj=$.extend(true, {}, obj);
    console.log(obj===newObj);//false 
  </script>

深拷贝方式三

除了这两种方式，你也可以手写深拷贝

<script>
    const deepCopy = obj => {
      if (obj) {
        var result = Array.isArray(obj) ? [] : {};
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object') {
              result[key] = deepCopy(obj[key]);
            } else {
              result[key] = obj[key];
            }
          }
        }
        return result;
      }
    }
    let obj = { name: '尚雷砺', age: 23, sex: '男' }
    let newObj = deepCopy(obj)
    console.log(obj === newObj);//false 
  </script>

浅拷贝方式四

Object.assign()对象的拷贝

Object.assign(target, ...sources)    【target：目标对象】，【souce：源对象（可多个）】

  <script>
    let obj = { name: '尚雷砺', age: 23, sex: '男' }
    let newObj = Object.assign({}, obj);
    console.log(obj === newObj);//false 
  </script>