JS-引用类型obj的使用注意情况

最新推荐文章于 2023-09-12 13:13:23 发布
原创 最新推荐文章于 2023-09-12 13:13:23 发布 · 300 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了JavaScript中数组对象引用的问题，分析了当原始数组被重新赋值时，之前保存的引用将不再指向新的数组，从而导致数据不同步的现象。文中提供了两种解决方法：重新赋值或者清空原有数组。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目中碰到一个数组对象引用问题大概如下:

1.基本操作

this._list = this.baseData.list;

在接收服务器数据时 数据发生了变化

this.baseData.list = [];

this.baseData.list = severData.list;

2.发现问题

然后使用该数组对象的引用时发现引用对象和本来的数组对象不一样 this._list !== this.baseData.list(伪代码)

3.问题解析

这是因为本来的数组对象在接收服务器数据时,重新引用了一块内存,就是说该变量引用的内存发生了变化,

而此时this._list变量指向的内存还是之前的内存,所以导致两个对象的值不一样

4.处理方法

要么重新赋值,要么原来的对象不重新赋值,而是清空数组,然后获取数组的每一项即可

5.参考文章:https://www.cnblogs.com/yuyifan/p/6204365.html

 

 

js代码-引用类型在比较运算符时候,隐式转换会调用本类型toString或valueOf方法
07-14
在JavaScript中，编程时常会遇到各种类型的值进行比较的情况，包括基本类型和引用类型。这里的“引用类型”指的是对象，如数组、函数、对象、日期等。在进行比较运算时，JavaScript有一套特殊的规则，特别是在处理...
浅析JavaScript基本类型与引用类型
10-25
JavaScript中的类型系统是其语言特性的核心组成部分，它分为两种主要类型：基本类型（Primitive Types）和引用类型（Reference Types）。基本类型包括Undefined、Null、Boolean、Number和String，它们在内存中占据...
js打印Object对象，
The_Thinnest的博客
03-20 3592
方法如下： function writeObj(obj){  var description = "";  for(var i in obj){  var property=obj[i];  description+=i+" = "+property+"\n";  }  console.log("obj:"+description); }
解决 JavaScript 输出为 [object Object] 的问题
我是程序员Amin，关注我，带你学习有趣的计算机知识
09-12 4490
解决 JavaScript 输出为 [object Object] 的问题
js面向对象的几种写法
Rock0807的博客
05-21 155
有段时间没写js了，复习了一下js相关的东西，把面向对象的部分挑出来做个记录。以下代码综合别的博客，但都是经过自己验证。1，工厂方式varCircle=function(){varobj=newObject();obj.PI=3.14;obj.area=function(r){returnthis.PI*r*r;...
js数据类型判断三种方法各自优缺点
selfsummer的博客
02-23 528
typeof 检测方法 主要用于检测基本类型. 缺点: 无法区分 引用类型 引用类型：object。里面包含的 function、Array、Date。 优点 方便快捷 代码量少 区分基本类型正常 基本类型:Number、String、Boolean、Null、undefined、object、symbol、bigInt。 typeof(123) //number typeof('123')// string typeof({})//object typeof([])//objec
js 如何输出object的值
weixin_30814223的博客
02-10 982
一个 object 对象，格式一般是这样的：{key:value,key2:value,key3:value} 一般要输出某个值，常用做法 alert (object.key) 如果要查看这个 object 的话，常用做法 console.log(object) 但是！如果要输出一个 object 对象的话，的确有点尴尬，这就需要把 object 类型 转...
JavaScript中值类型和引用类型的区别
10-20
在JavaScript编程语言中，理解和区分值类型（原始类型）和引用类型是至关重要的，这关乎到变量赋值、参数传递、函数返回值等操作的内在逻辑。值类型主要包括数字、字符串、布尔值、null和undefined；对象类型则包括...
浅谈JS的基础类型与引用类型
10-21
JavaScript是一种动态类型语言，这意味着变量的数据类型可以在运行时改变。...在编程时，需要根据实际情况选择合适的变量类型，特别是在处理复杂数据结构时，需注意引用类型带来的深拷贝和浅拷贝的问题。
JavaScript数据类型之基本类型和引用类型的值
10-24
JavaScript是一种动态类型的语言，它的数据类型分为两大类：基本类型（Primitive Types）和引用类型（Reference Types）。这两种类型的值有着显著的区别，理解这些差异对于编写高效且无误的JavaScript代码至关重要。...
JS输出为[object object]解决方法
孙少的博客
11-28 3830
平时我们在接收后端返回的json对象通常是一个字符串类型的object，所以一般我们要对这个object进行类型转化后，我们才能使用object里面的数据，而这其中涉及到两个必不可少的方法就是JSON.parse和JSON.stringify。
js输出[object Object]
Flora_SM的博客
10-15 2005
问题描述： 在页面上使用了ant design的分页组件，展示总条数为共多少条，在这里展示时使用了模板字符串(``)，即部分代码如下： <a-pagination class="myPagination" :total="total" :show-total="total => `共 ${total} 条`" /> 但是在接口返回数据时，如果未返回任何有效数据，接口返回了空对象，这时页面展示为共[object Object]条 问题分析 如果模.
JS obj 使用 {a}取key a变量
weixin_45259457的博客
12-30 795
JS obj 内部的值简单引用 let a = {a: 1} let aa = {a:11} let b = function ({a}) {console.log(a)} b(a) 1 b(aa) 11
js Object方法大全
顺其自然~专栏
05-28 1593
Object 静态方法总结 create 创建一个对象 const obj = Object.create({a:1}, {b: {value: 2}}) 第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举） obj.__proto__.a === 1 // true obj.b = 3; console.log(obj.b) // 2 //创建一个可写的,可枚举的,可配置的属性p obj2 = Object.c
JS中引用类型导致的大困惑
翔翔翔飞的小总结
02-29 465
JS中引用类型导致的大困惑
查看js输出的是object object里面包含的是什么值
qq_40924516的博客
12-26 4732
JSON.stringify(oldItem)  
JavaScript obj被赋值后值变化问题
SharkMarine的专栏
05-23 647
在搞Js的时候发现一个问题，就是内存中保存的数据不对！！ 简单举个例子吧，如下： // 定义一个person对象 var person = { info: { name: "test" } }; var b = person.info; // b被赋值为person的info值 console.log(b); // person.info = {};//如果不想让b的值变化，可以这么...
JS对象的引用，避免多个变量都引用一个对象，对象赋值影响原对象。
weixin_44019016的博客
06-19 2966
今天做的一个项目，需要把一个JSON数据对象，保存下来。 具体是我需要做三个JSON对象 一个叫oldPageProducts 一个叫newPageProducts 还有一个是self.pageProducts.productsData(这个是一个全局对象） 第1种方式 ：开始，我直接将 oldPageProducts=self.pageProducts....
js对象引用问题
An_cf的博客
03-12 1125
let arrtest = [1,2,3]; let arrcopy = arrtest; arrcopy[2] = 1; console.log(arrtest) // [1,2,1] console.log(arrcopy) // [1,2,1] js引用对象或者数组，直接引用当引用的值改变后，同样也会改变原始数组。问题解决起来很简单，但工作中一不注意常常就会犯这种错误。 /...
Object.freeze(obj); 引用类型
最新发布
03-21
<think>好的，我现在需要回答用户关于JavaScript中Object.freeze方法对引用类型的影响及其行为特性的问题。首先，我得回忆一下Object.freeze的基本功能。根据提供的引用资料，Object.freeze会冻结一个对象，阻止添加新属性、删除旧属性或修改现有属性[^1][^3]。不过，用户特别关注的是它对引用类型的影响，比如对象中的嵌套对象是否也会被冻结。 根据引用[4]中的例子，当冻结一个包含嵌套对象的对象时，例如obj1里有obj2，冻结obj1后，直接修改obj1的属性（如a）会被阻止，但修改obj2的属性（如b或c）仍然有效。这说明Object.freeze是浅冻结，只会冻结对象自身的属性，而不会递归冻结嵌套的引用类型属性。因此，如果对象的属性值也是对象，这些子对象不会被自动冻结，需要手动调用Object.freeze来处理。 另外，引用[5]提到在Vue中使用Object.freeze可以避免响应式处理，适用于仅展示的数据。这也说明冻结后的对象不会触发Vue的响应式更新，但如果嵌套对象未被冻结，修改它们可能仍然会影响视图，需要特别注意。 接下来，我需要整理这些点，确保回答覆盖浅冻结特性、引用类型属性的处理、不可变性验证方法以及应用场景。同时，用户可能想知道如何深冻结对象，因此需要提到手动递归或第三方库的方法。最后，生成相关问题时要围绕这些知识点，帮助用户进一步探索。</think>### Object.freeze() 对引用类型的影响与行为特性 #### 1. **浅冻结特性** - **行为**：`Object.freeze()` 仅冻结对象的**直接属性**，不会递归冻结其内部的引用类型属性（如嵌套对象、数组等）[^4]。 ```javascript const obj1 = { a: 1, nested: { b: 2 } }; Object.freeze(obj1); obj1.a = 2; // 修改失败，严格模式下报错 obj1.nested.b = 3; // 修改成功 ``` 上例中，`obj1.nested` 未被冻结，因此可修改其属性。 #### 2. **引用类型属性的表现** - **深层修改**：若对象属性值为引用类型（如对象、数组），冻结外层对象后，仍可修改其内部属性或元素。 - **替换引用**：无法直接替换整个引用类型的属性值（因属性本身被冻结）： ```javascript obj1.nested = {}; // 替换失败，严格模式下报错 ``` #### 3. **不可变性的验证** - 使用 `Object.isFrozen()` 可验证对象是否被冻结： ```javascript console.log(Object.isFrozen(obj1)); // true console.log(Object.isFrozen(obj1.nested)); // false ``` #### 4. **深冻结的实现** - 需手动递归冻结嵌套的引用类型属性： ```javascript function deepFreeze(obj) { Object.freeze(obj); Object.keys(obj).forEach(key => { if (typeof obj[key] === 'object' && !Object.isFrozen(obj[key])) { deepFreeze(obj[key]); } }); } ``` #### 5. **应用场景** - **数据保护**：防止核心配置对象被意外修改[^3]。 - **性能优化**：在Vue等框架中冻结无需响应式的数据，减少资源消耗[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值