js深拷贝数组（js深拷贝json parse）



js拷贝数组对象：浅拷贝&深拷贝，包括：Object.assign、concat、slice、JSON.parse(JSON.stringify())
场景：弹窗选择组织结构（树形结构），选择后显示相关数据至输入框中（每次选择都将重新拷贝初始组织结构数据）
博客地址：芒果橙的个人博客 【http://mangocheng.com】

在开发过程中，需要基于某一个对象上进行新增修改的场景是非常多的，因此经常会进行对象的拷贝。在不需要多次复用源数据的情况下，那么对象的拷贝只需要进行赋值就能满足要求，即浅拷贝，但有时候需要多次使用到初始的原数组，那么则需要深拷贝，以达到每次拷贝原数组都是初始数据的目的

场景

• 弹窗选择组织结构（树形结构），选择后显示相关数据至输入框中
• 数据格式：[ {},{}]
• 场景数据，案例使用

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 } ]
• 结果&结论
  • 源数组改变
  • 浅拷贝作用

2. Object.assign(target,source)-简单数据深拷贝、复杂数据浅拷贝

Object.assign(目标数组,源数组)

• 测试简单数据
  • 源数组sourceArr：[‘a’, ‘b’, ‘c’]
  • 目标数组targetArr：[]
• 操作
  • 增加目标数组数据[d、e]
• 输出
  • targetArr = a,b,c,d,e
  • sourceArr= a,b,c
• 结果&结论
  • 源数组未改变
  • 深拷贝作用

• 测试复杂数据
  • 源数组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 } ]
• 结果&结论
  • 源数组改变，与目标数组一样
  • 浅拷贝作用

3. concat()/slice()-简单数据深拷贝、复杂数据浅拷贝

目标数组=源数组.concat();

目标数组=源数组.slice();

• 测试简单数据
  • 源数组sourceArr：[‘a’, ‘b’, ‘c’]
  • 目标数组targetArr：[]
• 操作
  • 增加目标数组数据[d、e]
• 输出
  • sourceArr= a,b,c
  • targetArr = a,b,c,d,e
• 结果&结论
  • 源数组未改变
  • 深拷贝作用

• 测试复杂数据
  • 源数组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 } ]
• 结果&结论
  • 源数组改变，与目标数组一样
  • 浅拷贝作用

4. JSON.parse(JSON.stringify())-简单数据、复杂数据均为深拷贝

目标数组=JSON.parse(JSON.stringify(源数组))

• 测试简单数据
  • 源数组sourceArr：[‘a’, ‘b’, ‘c’]
  • 目标数组targetArr：[]
• 操作
  • 增加目标数组数据[d、e]
• 输出
  • targetArr = a,b,c,d,e
  • sourceArr= a,b,c
• 结果&结论
  • 源数组未改变
  • 深拷贝作用

• 测试复杂数据
  • 源数组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 } ]
• 结果&结论
  • 源数组未改变
  • 深拷贝作用

参考代码

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/38899.html