Js 数组深拷贝及 splice() 在 for 循环中的使用整理、建议

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

一.[知识点]

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

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

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

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

【注意】：

• 相信你会注意到表格中有个列名 "第一层为基本数据类型" 时, 很重要的一点提醒就是： 浅、深 本身就是针对 较为复杂的 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;
    }

四. [splice() 在 for 循环中的使用注意]

首先，这个问题是鄙人在进行 SKU 数组 for 循环遍历 过程中使用splice剥离元素时发现的 因为注意到，剥离元素后，总会跳过一个元素 幸亏多加瞅了几眼数据结果才发现有问题 感觉这是一个很容易忽略的点

• 直接说解决方法吧，那就是： "在使用 splice 的下一句，改一下循环变量值 !"

• 鄙人借鉴文章 —— 【JS 的 splice() 方法在 for 循环中使用可能会遇到的坑】

[参考文章]

• 【JavaScript 之 对象/ JSON /数组】
• 【JS 中深拷贝数组、对象、对象数组方法】
• 【JS数组和对象相互转换方法[实用]】