天津企业设计网站建设,aso应用商店优化原因,微网站用什么做,查询网址域名ip地址一、slice方法-浅拷贝
使用分析 创建一个原数组的浅拷贝#xff0c;对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝#xff0c;这意味着新数组和原数组中的对象引用是相同的。因此#xff0c;当你修改新数组中的对象时#xff0c;原数组中相应位置的…一、slice方法-浅拷贝
使用分析 创建一个原数组的浅拷贝对新数组的修改不会影响到原数组slice() 方法创建了一个原数组的浅拷贝这意味着新数组和原数组中的对象引用是相同的。因此当你修改新数组中的对象时原数组中相应位置的对象也会受到影响。 原始数据 ①对数组的项直接进行修改不会影响原数组
效果展示
复制原数组对新数组的第一项进行替换
修改首项输出数据 核心代码 const newArray array.slice(); newArray[0] {id: -1,name: 被修改项,age: 18}; //对新数组进行修改 完整代码
templateview/view
/template
scriptexport default {data() {return {}},methods: {},onLoad() {const array [{id: 0,name: 张三,age: 18},{id: 1,name: 李四,age: 28},{id: 2,name: 王五,age: 38},{id: 3,name: 赵六,age: 48}]; const newArray array.slice();newArray[0] {id: -1,name: 被修改项,age: 18}; //对新数组进行修改console.log(原数组,array); // 原数组console.log(新数组,newArray); // 打印数组可以看到新的对象被成功添加}};
/script
style/style ②对数组项中的对象进行修改会影响原数组
效果展示
复制原数组对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值 核心代码 const newArray array.slice(); newArray[0].name 修改具体对象值的name; //对新数组的对象进行修改 完整代码
templateview/view
/template
scriptexport default {data() {return {}},methods: {},onLoad() {const array [{id: 0,name: 张三,age: 18},{id: 1,name: 李四,age: 28},{id: 2,name: 王五,age: 38},{id: 3,name: 赵六,age: 48}]; const newArray array.slice();newArray[0].name 修改具体对象值的name;//对新数组的对象进行修改console.log(原数组,array); // 原数组console.log(新数组,newArray); // 打印数组可以看到新的对象被成功添加 }};
/script
style/style
二、concat方法-浅拷贝
使用分析 同slice的使用类似创建一个原数组的浅拷贝并返回一个新数组对新数组的修改不会影响到原数组。concat() 方法创建了一个原数组的浅拷贝这意味着新数组和原数组中的对象引用是相同的。因此当你修改新数组中的对象时原数组中相应位置的对象也会受到影响。 原始数据 ①对数组的项直接进行修改不会影响原数组
效果展示
复制原数组对新数组的第一项进行替换
修改首项输出数据 核心代码 const newArray array.concat(); newArray[0] {id: -1,name: concat被修改项,age: 18}; //对新数组进行修改 完整代码
templateview/view
/template
scriptexport default {data() {return {}},methods: {},onLoad() {const array [{id: 0,name: 张三,age: 18},{id: 1,name: 李四,age: 28},{id: 2,name: 王五,age: 38},{id: 3,name: 赵六,age: 48}]; const newArray array.concat();newArray[0] {id: -1,name: concat被修改项,age: 18}; //对新数组进行修改console.log(原数组,array); // 原数组console.log(新数组,newArray); // 打印数组可以看到新的对象被成功添加}};
/script
style/style ②对数组项中的对象进行修改会影响原数组
效果展示
复制原数组对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值 核心代码 const newArray array.concat(); newArray[0].name concat修改具体对象值的name; //对新数组的对象进行修改 完整代码
templateview/view
/template
scriptexport default {data() {return {}},methods: {},onLoad() {const array [{id: 0,name: 张三,age: 18},{id: 1,name: 李四,age: 28},{id: 2,name: 王五,age: 38},{id: 3,name: 赵六,age: 48}]; const newArray array.concat();newArray[0].name concat修改具体对象值的name;//对新数组的对象进行修改console.log(原数组,array); // 原数组console.log(新数组,newArray); // 打印数组可以看到新的对象被成功添加}};
/script
style/style
三、使用展开运算符Spread Operator-浅拷贝
使用分析 同前面几种浅拷贝的使用类似创建一个原数组的浅拷贝并返回一个新数组对新数组的修改不会影响到原数组。展开运算符 方法创建了一个原数组的浅拷贝这意味着新数组和原数组中的对象引用是相同的。因此当你修改新数组中的对象时原数组中相应位置的对象也会受到影响。 语法 const newArray [...array]; 使用方法完全同上不再举例
四、使用Array.from-浅拷贝
使用分析 同前面几种浅拷贝的使用类似创建一个原数组的浅拷贝并返回一个新数组对新数组的修改不会影响到原数组。Array.from方法创建了一个原数组的浅拷贝这意味着新数组和原数组中的对象引用是相同的。因此当你修改新数组中的对象时原数组中相应位置的对象也会受到影响。 语法 const newArray Array.from(array); 使用方法完全同上不再举例
五、解决修改对象时原数组修改的问题-深拷贝这里使用JSON 序列化和反序列化
解决这种问题可以采用深拷贝在 JavaScript 中实现深拷贝最简单的方法是使用JSON.parse(JSON.stringify(array))
效果展示
复制原数组对新数组的第一项对象的name值进行修改
修改数组中第一个对象的name输出值 核心代码 const newArray JSON.parse(JSON.stringify(array)); newArray[0].name 修改具体对象值的name;//对新数组的对象进行修改 完整代码
templateview/view
/template
scriptexport default {data() {return {}},methods: {},onLoad() {const array [{id: 0,name: 张三,age: 18},{id: 1,name: 李四,age: 28},{id: 2,name: 王五,age: 38},{id: 3,name: 赵六,age: 48}]; const newArray JSON.parse(JSON.stringify(array));newArray[0].name 修改具体对象值的name;//对新数组的对象进行修改console.log(原数组,array); // 原数组console.log(新数组,newArray); // 打印数组可以看到新的对象被成功添加}};
/script
style/style
