【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) );
}
$.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 循环中使用可能会遇到的坑】
[参考文章]