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

时间:2021-04-01 18:31:24   收藏:0   阅读:14

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

案例复现

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

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也会看到这个房间多了一瓶饮料。

 

解决方案

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

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

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

 

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

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

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

 

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

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

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

 

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 -

 

 

 

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

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!