JavaScript 对象赋值和浅拷贝的区别
时间:2022-07-25
本文章向大家介绍JavaScript 对象赋值和浅拷贝的区别,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
赋值和浅拷贝的区别
一直以为对象赋值和对象浅拷贝是一样的,但实际上它们还是有很大差异。
先看赋值,将一个对象赋值给一个新的对象的时候,赋的其实是该对象在栈中的地址,而不是堆中的数据。也就是一个对象的改变就会改变另外一个对象。
再看浅拷贝,浅拷贝会创建一个对象,再去遍历原始对象,如果原对象的属性值是基础类型,那么就拷贝基础类型,如果是引用类型,则拷贝的是指针。
是不是有点蒙蔽?
看一个例子:
var obj1 = {
name: '前端大杂货铺',
content: ['前端', '生活']
}
// 赋值
var obj2 = obj1
obj2.name = 'Gping'
obj2.content[2] = '感悟'
console.log(obj1, obj2)
var obj1 = {
name: '前端大杂货铺',
content: ['前端', '生活']
}
// Object.assign 是浅拷贝
var obj3 = Object.assign({}, obj1)
obj3.name = 'Gping'
obj3.content[2] = '感悟'
console.log(obj1, obj3)
obj1 是源对象,obj2 是赋值得到的,obj3 是浅拷贝得到的,如果我们改变的第一层数据不管是原始类型还是引用类型,那么 obj2 的改变都会导致 obj1 的改变。
obj3 如果第一层数据改变的是原始类型,那么不会影响源数据,改变的是引用类型数据,则会影响 obj1 的改变。
关于赋值,还有一个很基础的点,很惭愧,之前竟然理解错了。上代码
var a = {};
b = a;
b = {}; // 这里 b 已经指向了新的地址,和 a 已经没有任何关系了。跟new Object()应该是一样的
a.name = 'Gping';
console.log(b); // {}
个人理解,通过对象表达式的方式创建一个对象,就已经指向新的地址的,也就是跟之前指向的地址已经没有关系了
总结
赋值和浅拷贝的区别在于对象第一层数据对原对象的影响,如果是赋值,改变会直接影响原对象。如果是浅拷贝,而且属性值是基础类型的话,就不会影响原对象。属性值为引用类型,就会影响原对象
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 构建的抽象
- 低成本个人建站系列二 —— 使用 Hexo+GitHub 搭建个人免费博客
- 42图揭秘,「后端技术学些啥」
- R-ggTimeSeries | ggplot2: 热力日历图
- R-wordcloud: 词云图
- 直播APP源码是如何实现音视频同步的
- 动态规划算法练习(5)--medium
- phpstudy漏洞分析原因到修复
- 哈?命令注入外带数据的姿势还可以这么骚?
- 记一次曲折的RCE挖掘
- pytest文档49-命令行参数--tb的使用
- pytest文档50-命令行参数--durations统计用例运行时间
- pytest文档51-内置fixture之cache使用
- pytest文档53-命令行实时输出错误信息(pytest-instafail)
- pytest文档52-命令行参数--setup-show查看fixture的执行过程