达州达县网站建设,怎么做劳务公司网站,个人网站数据库怎么做,网站开发需要甲方提供什么前言 js拷贝数组对象#xff1a;浅拷贝深拷贝#xff0c;包括#xff1a;Object.assign、concat、slice、JSON.parse(JSON.stringify()) 场景#xff1a;弹窗选择组织结构#xff08;树形结构#xff09;#xff0c;选择后显示相关数据至输入框中#xff08;每次选…前言 js拷贝数组对象浅拷贝深拷贝包括Object.assign、concat、slice、JSON.parse(JSON.stringify()) 场景弹窗选择组织结构树形结构选择后显示相关数据至输入框中每次选择都将重新拷贝初始组织结构数据 博客地址芒果橙的个人博客 【http://mangocheng.com】 关于浅拷贝、深拷贝的使用场景
在开发过程中需要基于某一个对象上进行新增修改的场景是非常多的因此经常会进行对象的拷贝。在不需要多次复用源数据的情况下那么对象的拷贝只需要进行赋值就能满足要求即浅拷贝但有时候需要多次使用到初始的原数组那么则需要深拷贝以达到每次拷贝原数组都是初始数据的目的
常用的拷贝方法
场景 弹窗选择组织结构树形结构选择后显示相关数据至输入框中 数据格式[ {},{}] 场景数据案例使用
const copy {// 源数组1简单数组sourceArr: [a, b, c], targetArr: [],// 源数组2复杂数组sourceArrAndObj: [ {A: 1,B: 2},{S: 10,T: 20}],targetArrAndObj: []
}1. 普通赋值语法-简单数据、复杂数据均为浅拷贝
目标数组源数组
测试数据 源数组1-sourceArr[‘a’, ‘b’, ‘c’]目标数组1-targetArr[]源数组2-sourceArrAndObj[ { ‘A’ : 1, ‘B’:2 }, { ‘S’ : 10, ‘T’ : 20 } ]目标数组2-targetArrAndObj: [] 操作 赋值目标数组增加目标数组1数据[d、e]增加目标数组2数据属性[C、D]、修改属性[S、T] 输出 源数组1-sourceArr a,b,c,d,e源数组2-sourceArrAndObj [ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ] 结果结论 源数组改变浅拷贝作用
console.log(sourceArr , this.sourceArr.join());console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArr this.sourceArr;this.targetArrAndObj this.sourceArrAndObj;console.log(赋值后targetArr , this.targetArr.join());console.log(赋值后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后sourceArrAndObj, this.sourceArrAndObj);2. Object.assign(target,source)-简单数据深拷贝、复杂数据浅拷贝
Object.assign(目标数组,源数组)
测试简单数据 源数组sourceArr[‘a’, ‘b’, ‘c’]目标数组targetArr[] 操作 增加目标数组数据[d、e] 输出 targetArr a,b,c,d,esourceArr a,b,c 结果结论 源数组未改变深拷贝作用
console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());Object.assign(this.targetArr, this.sourceArr);console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());测试复杂数据 源数组sourceArrAndObj[ { ‘A’ : 1, ‘B’:2 }, { ‘S’ : 10, ‘T’ : 20 } ]目标数组targetArrAndObj: [] 操作 增加目标数组数据属性[C、D]修改属性[S、T] 输出 sourceArrAndObj[ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ]targetArrAndObj[ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ] 结果结论 源数组改变与目标数组一样浅拷贝作用
console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);Object.assign(this.targetArrAndObj, this.sourceArrAndObj);console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);3. concat()/slice()-简单数据深拷贝、复杂数据浅拷贝
目标数组源数组.concat();
目标数组源数组.slice();
测试简单数据 源数组sourceArr[‘a’, ‘b’, ‘c’]目标数组targetArr[] 操作 增加目标数组数据[d、e] 输出 sourceArr a,b,ctargetArr a,b,c,d,e 结果结论 源数组未改变深拷贝作用
console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());this.targetArr this.sourceArr.concat();// this.targetArr this.sourceArr.slice();console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());测试复杂数据 源数组sourceArrAndObj[ { ‘A’ : 1, ‘B’:2 }, { ‘S’ : 10, ‘T’ : 20 } ]目标数组targetArrAndObj: [] 操作 增加目标数组数据属性[C、D]修改属性[S、T] 输出 sourceArrAndObj[ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ]targetArrAndObj[ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ] 结果结论 源数组改变与目标数组一样浅拷贝作用
console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArrAndObj this.sourceArrAndObj.concat();// this.targetArrAndObj this.sourceArrAndObj.slice();console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);4. JSON.parse(JSON.stringify())-简单数据、复杂数据均为深拷贝
目标数组JSON.parse(JSON.stringify(源数组))
测试简单数据 源数组sourceArr[‘a’, ‘b’, ‘c’]目标数组targetArr[] 操作 增加目标数组数据[d、e] 输出 targetArr a,b,c,d,esourceArr a,b,c 结果结论 源数组未改变深拷贝作用
console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());this.targetArr JSON.parse(JSON.stringify(this.sourceArr));console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());测试复杂数据 源数组sourceArrAndObj[ { ‘A’ : 1, ‘B’:2 }, { ‘S’ : 10, ‘T’ : 20 } ]目标数组targetArrAndObj: [] 操作 增加目标数组数据属性[C、D]修改属性[S、T] 输出 sourceArrAndObj[ { ‘A’ : 1, ‘B’:2 }, { ‘S’ : 10, ‘T’ : 20 } ]targetArrAndObj[ { ‘A’ : 1, ‘B’:2, ‘C’ : 3, ‘D’ : 4 }, { ‘S’ : 30, ‘T’ : 40 } ] 结果结论 源数组未改变深拷贝作用
console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArrAndObj JSON.parse(JSON.stringify(this.sourceArrAndObj));console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);参考代码
const copy {sourceArr: [a, b, c],targetArr: [],sourceArrAndObj: [{A: 1,B: 2},{S: 10,T: 20}],targetArrAndObj: [],/*** 赋值*/equalSign: function () {console.log(sourceArr , this.sourceArr.join());console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArr this.sourceArr;this.targetArrAndObj this.sourceArrAndObj;console.log(赋值后targetArr , this.targetArr.join());console.log(赋值后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后sourceArrAndObj, this.sourceArrAndObj);},/*** Object.assign()*/objectAssign: function () {console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());Object.assign(this.targetArr, this.sourceArr);console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);Object.assign(this.targetArrAndObj, this.sourceArrAndObj);console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);},/*** concat方法*/concataAndSlice: function () {console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());this.targetArr this.sourceArr.concat();// this.targetArr this.sourceArr.slice();console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArrAndObj this.sourceArrAndObj.concat();// this.targetArrAndObj this.sourceArrAndObj.slice();console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);},/*** json转换*/json2array: function () {console.log(简单数组对象);console.log(sourceArr , this.sourceArr.join());this.targetArr JSON.parse(JSON.stringify(this.sourceArr));console.log(拷贝后targetArr , this.targetArr.join());console.log(增加目标数组数据[d、e]);this.targetArr.push(d);this.targetArr.push(e);console.log(更新后sourceArr , this.sourceArr.join());console.log(更新后targetArr , this.targetArr.join());console.log(复杂数组对象)console.log(sourceArrAndObj, this.sourceArrAndObj);this.targetArrAndObj JSON.parse(JSON.stringify(this.sourceArrAndObj));console.log(拷贝后targetArrAndObj, this.targetArrAndObj);console.log(增加目标数组数据属性[C、D]修改属性[S、T]);this.targetArrAndObj[0].C 3;this.targetArrAndObj[0].D 4;this.targetArrAndObj[1].S 30;this.targetArrAndObj[1].T 40;console.log(更新后sourceArrAndObj, this.sourceArrAndObj);console.log(更新后targetArrAndObj, this.targetArrAndObj);},test: function () {this.equalSign();// this.objectAssign();// this.concataAndSlice();// this.json2array();}}copy.test();
