Js 数组深拷贝及 splice() 在 for 循环中的使用整理、建议_javascript splice() 方法的应用场景-CSDN博客

本文链接：https://blog.csdn.net/u011415782/article/details/110538450

背景

最近在涉猎 【React】 前端框架知识时;
更多的精力会放在对 JS 的数据处理上
并且,
在业务中会经常使用数组操作
显然，
对不熟悉前端开发的小伙伴，会很容易入坑的
—— 尤其是对数组的拷贝以及 splice() 的使用时要注意的点！ …
在此记录一番，欢迎指摘！

`一.[知识点]`

首先我们要知道对数组的拷贝可分为： 深拷贝、浅拷贝

如何区分深拷贝与浅拷贝?

简单点来说，就是: 【 假设 B 复制了 A ，当修改 A 时，看 B 是否会发生变化 ？】
  	
  	如果 B 也跟着变了，那就是 【浅拷贝】—— 拿人手短;
 	如果 B 没有跟着变，那就是 【深拷贝】—— 自食其力 。

下面表格数据，自然是 拷贝后的数组 与 原数组 改变时的对比情况：

分类	指向同一对象	指向相同的存储空间	第一层为基本数据类型	原数据中包含子对象
`= 赋值`	YES	YES	`不会` 一同改变（例：let a=1;b=a;a=2;）	一同改变 (数组，JSON对象)
`浅拷贝`	`NO`	YES	`不会` 一同改变	一同改变
`深拷贝`	`NO`	`NO`	`不会` 一同改变	`不会` 一同改变

【注意】：

相信你会注意到表格中有个列名 "第一层为基本数据类型" 时,
很重要的一点提醒就是：
浅、深本身就是针对较为复杂的 object 类型数据而言的，像一维数组、json 对象来说，不能对比拷贝后的数据就定了结论！
可以参考这篇介绍比较详细的文章 —— 【js 实现数组浅拷贝和深拷贝】

`二.[浅拷贝实现方式]`

以下方法，如果是【单层数据】，则可实现 深拷贝的效果，如果是复杂多层数据，则为 浅拷贝

① . 对象的合并 Object.assign() ，第一个参数必须是个空对象

const newObj = Object.assign（{}，oldObj）;

②. 对象的解构赋值
不熟悉的建议参考文章 —— 【JavaScript Demo: Expressions - Spread syntax】

let newArr = [...oldArr];
let newObj = {...oldObj};

③. 利用数组的 slice() 方法或者 concat() 方法

const newArray = oldArray.slice（）;
const newArray = oldArray.concat();

【再提一次：】

上述几个方法
在操作第一层时的属性确实为深拷贝（拥有了独立的内存）
但更深的属性却仍然公用了地址，所以都 不是真正的深拷贝！！！

`三. [深拷贝实现方式]`

个人认为，在实际业务处理中，数组或对象的深拷贝需求是很重要的，可以避免原始数据的变化影响后续逻辑处理

①. 使用 JSON.parse、JSON.stringify 进行处理

用 JSON.stringify 把对象转换成字符串，
再用 JSON.parse 把字符串转换成新的对象。
可以转成 JSON 格式 的对象才能使用这种方法，如果对象中包含 function 或 RegExp 这些就不能用这种方法了

// 深拷贝函数
function deepCopy(oldObj){
    return JSON.parse( JSON.stringify( oldObj) );
}

②. 利用 jQuery 的 $.extend() 方法

//第一个参数不传（false是不能够显示的写出来的）默认为false，是浅拷贝。传 true为深拷贝。
$.extend(true,object1, object2)
 
//newArr 即为深拷贝出来的数组
var newArr = $.extend(true , [] , oldArr);

//newObject 即为深拷贝出来的对象
var newObject = $.extend(true , {} , oldObj);

③. 递归拷贝 let newObject = deepClone(oldObj); 强调： 【深拷贝，是拷贝对象各个层级的属性】

function deepClone(source){
        // 判断复制的目标是数组还是对象
        let  targetObj = source.constructor === Array ? [] : {};
        if(source && typeof source ==="object"){
            // 遍历目标
            for(let key in source){
                if(source.hasOwnProperty(key)){
                    // 如果值是对象，就递归一下
                    targetObj[key] = deepClone(source[key]);
                }
            }
        }else {
            targetObj = source;
        }
        return targetObj;
    }