专栏首页web前端技术分享ES6复制拷贝数组,对象,json数组

ES6复制拷贝数组,对象,json数组

扩展运算符的应用spread打散数组[...]

(1)复制数组

数组是复合的数据类型,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个全新的数组。

const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]

上面代码中,a2并不是a1的克隆,而是指向同一份数据的另一个指针。修改a2,会直接导致a1的变化。

ES5 只能用变通方法来复制数组。

const a1 = [1, 2];
const a2 = a1.concat();

a2[0] = 2;
a1 // [1, 2]

上面代码中,a1会返回原数组的克隆,再修改a2就不会对a1产生影响。

扩展运算符提供了复制数组的简便写法。

const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;

上面的两种写法,a2都是a1的克隆。

对象及json数组的拷贝,Object.assign() {...obj} JSON.Parse 等几种拷贝的区别

let obj = {
age: 10
}

let obj1 = {
grade: 1,
name: {
first: 'bob'
}
}

let objS = obj1
let objA = Object.assign(obj, obj1)
let objJ = JSON.parse(JSON.stringify(obj1))
let objK = { ...obj1 }

console.log(objA)
console.log(objJ)
console.log(objK)

obj1.grade = 9
obj1.name.first = 'chris'

console.log(objS)
console.log(objA)
console.log(objJ)
console.log(objK)

打印结果:

{ age: 10, grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 9, name: { first: 'chris' } }

{ age: 10, grade: 1, name: { first: 'chris' } }

{ grade: 1, name: { first: 'bob' } }

{ grade: 1, name: { first: 'chris' } }

结论: 由于对象创建在堆上 栈上的变量保存其地址 所以也叫指针变量

浅拷贝 如let simpleObj = obj;

则只拷贝了 obj在栈上的指针变量给 simpleObj 也就是说simpleObj实际存储的值是 obj的对象的内存地址 指向与 obj同样的堆内存地址 所以改变 obj的值 simpleObj 的值也会改变

深拷贝 就是copy了一份对象 放在另一块堆内存地址 改变之前的对象 对这个复制的对象不会有任何影响

js里有几种深拷贝方式

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

... 扩展和 assign 一样

JSON.parse(JSON.Stringify()) 深拷贝 但是缺点是不能拷贝 constructor 方法 解决办法就是递归

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端性能优化常用方案

    1.在JS中尽量减少闭包的使用(原因:闭包会产生不释放的栈内存) A:循环给元素做事件绑定的时候,尽可能的把后期需要的信息(例如索引)存储到元素的自定义属性上...

    TimothyJia
  • vuex存储和本地存储(localstorage、sessionstorage)的区别

    1.区别:vuex存储在内存,localstorage(本地存储)则以文件的方式存储在本地,永久保存;sessionstorage( 会话存储 ) ,临时保存。...

    TimothyJia
  • <script>属性async和defer的区别

    async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。只对外部脚本文件有效。

    TimothyJia
  • 【数据揭秘】唐朝诗人的朋友圈是怎样的?

    在我还念中学的时候,每当心情不好,就靠读诗词来排遣,慢慢读得多了,就发现唐朝诗人之间存在着微妙的关系。比如杜甫非常喜欢李白,到了做梦都想见李白的地步:三夜频梦君...

    IT派
  • 计算机告诉你,唐朝诗人之间的关系到底是什么样的?

    出于好奇心,我一度想理清楚他们之间的关系。但是全唐诗一共四万多首,再加上诗人之间经常称呼对方的别称,整理起来非常麻烦,慢慢的也就绝了这个念头。

    华章科技
  • 计算机告诉你,唐朝诗人之间的关系到底是什么样的?

    大数据文摘
  • TDDL与Spring Boot集成Version报错——跟踪与解决

    先说背景:公司采用diamond+tddl,这套技术来做web管理。本人处于好奇率先体验了下spring-boot,于是就有了spring-boot+tddl...

    用户1154259
  • 黑莓发布Enterprise SDK,可将黑莓安全信息技术植入iOS或者Android应用

    黑莓为自家的即时通讯软件BBM推出企业版软件开发工具包(Enterprise SDK),有了这个SDK,企业应用开发者挑选安全信息系统时有了新的选择,可以让开发...

    BestSDK
  • BOSS设置(3)

      五、Advanced Chipset Features(高级芯片组功能设定)项子菜单

    py3study
  • 2017——国外SDK发展趋势

    本文列出了 2017 年国外增长最快的移动应用 SDK,旨在帮助开发者了解技术的发展趋势。 ? 1. 更多开发者选择应用开发平台 开发者通常会面临这样的选择:是...

    BestSDK

扫码关注云+社区

领取腾讯云代金券