首页 技术 正文
技术 2022年11月21日
0 收藏 349 点赞 2,564 浏览 1171 个字

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

TAG:  JSON.parse()  JSON.stringify()  Array.prototype.concat()  扩展运算符  Object.assign()

案例复现

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

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][]

我的其他相关文章:

JS004. 获取数组最后一个元素且不改变数组的四种方法

ES6:使用解构赋值仅用一行定义多个相同的数组,且指向堆不同(解构赋值)

– END –

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,077
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,552
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,400
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,812
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,894