首页 > 编程语言 > 详细

JS踩坑:等式两边皆为数组变量,它们所指向的堆栈也会相同

时间:2021-04-01 18:31:24      阅读:12      评论:0      收藏:0      [点我收藏+]

一个很常见的语法问题,但专注实现需求时经常会忘记去避免,导致最终问题的出现,再花时间排查。为此专门整理一篇解决方法的博客,也加强一下自己的记忆。

案例复现

左右变量皆为数组的等式,它们所指向的堆栈也会相同。

let arrA = [1, 2, 3]

let arrB = arrA
arrA.pop()

console.log(arrB)
// [1, 2]

 

问题原因

JS中array是引用类型,也就是arrA和arrB的原数据存储地址是一样的,arrA和arrB都是对原数据的引用,所以修改其中一个,另一个也会改变。

就好像是一个房间有两扇门,AB两人分别从不同的门进去所到达的房间是一样的,此时A拿走一个苹果,B会看到房间里少了一个苹果;B从外面带了一瓶饮料回到房间,A也会看到这个房间多了一瓶饮料。

 

解决方案

  •  ES6 - Object.assign( ) 

Object.assign( )方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。它的第一个参数是目标对象,后面的参数都是源对象。

let arrA = [1, 2, 3]
let arrB = Object.assign([], arrA)

arrA = null
console.log(arrB)
// [1, 2, 3]

 

  •  ES6 - 扩展运算符 

对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中,数组同理。

let arrA = [1, 2, 3]
let arrB = [...arrA]

arrA.pop()
console.log(arrB)
// [1, 2]

 

  •  Array对象 - concat( ) 

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

let arrA = [1, 2, 3]
let arrB = [].concat(arrA)

arrA.shift()
console.log(arrA, arrB)
// [2, 3][1, 2, 3]

 

  •  JavaScript JSON - JSON.stringify( ) & JSON.parse( ) 

JSON.stringify( ) 方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.parse( ) 方法用于将一个 JSON 字符串转换为对象。

let arrA = []
let arrB = JSON.parse(JSON.stringify(arrA))

arrA.push(1)
console.log(arrA, arrB)
// [1][]

 

- END -

 

 

 

JS踩坑:等式两边皆为数组变量,它们所指向的堆栈也会相同

原文:https://www.cnblogs.com/97z4moon/p/14606501.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!