JS 数组中对象覆盖问题

最新推荐文章于 2024-05-24 17:01:19 发布
原创 最新推荐文章于 2024-05-24 17:01:19 发布 · 947 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

在JavaScript中，当数组中存储对象并多次使用`push`方法时，由于引用类型特性，会导致之前对象被覆盖。文章通过示例展示了这个问题，并提出了使用`JSON.parse(JSON.stringify(Obj))`来克隆对象，避免覆盖的解决方案。

JS 数组中对象覆盖问题

问题：数组中存放对象时，多次push的结果呈现总是最后一次添加的内容。

现象：

//第一次push对象
[
    {
        "FC_ATTACHMENT": [],
        "FC_EXCEPTIONTYPE": "制程异常",
        "FC_EXCEPTIONDATE": "2022-08-24",
        "FC_EXCEPTIONTIME": "12:00",
        "FC_EXCEPTIONSYMPTOM": "测试结构",
        "FC_CREATEUSER": "***",
        "FC_DTL_ID": "b425a87e-03df-47f9-810c-35f796acd2c1",
        "FC_BARCODE": "123456789",
        "FC_MODEL": "JY0001"
    }
]
//第二次push不同对象
[
    {
        "FC_ATTACHMENT": [],
        "FC_EXCEPTIONTYPE": "开机异常",
        "FC_EXCEPTIONDATE": "2022-08-23",
        "FC_EXCEPTIONTIME": "12:00",
        "FC_EXCEPTIONSYMPTOM": "测试结构不同不同不同",
        "FC_CREATEUSER": "***",
        "FC_DTL_ID": "e7c39ed7-79e8-4c22-b696-b18d9ff3527b",
        "FC_BARCODE": "123456789",
        "FC_MODEL": "JY0001"
    },
    {
        "FC_ATTACHMENT": [],
        "FC_EXCEPTIONTYPE": "开机异常",
        "FC_EXCEPTIONDATE": "2022-08-23",
        "FC_EXCEPTIONTIME": "12:00",
        "FC_EXCEPTIONSYMPTOM": "测试结构不同不同不同",
        "FC_CREATEUSER": "***",
        "FC_DTL_ID": "e7c39ed7-79e8-4c22-b696-b18d9ff3527b",
        "FC_BARCODE": "123456789",
        "FC_MODEL": "JY0001"
    }
]

错误代码：

this.Tags.push(Obj);

解决方案：

this.Tags.push( JSON.parse(JSON.stringify(Obj)));//将对象进行简单结构，达到指向不同地址的目的
js实现两个数组对象，重复的属性覆盖，不重复的添加
风中追风
11-06 2286
数组中的位置，并用第二个数组中的属性对象覆盖它。如果不存在，说明属性是不重复的，直接将属性添加到。方法来实现两个数组对象的合并，覆盖重复的属性，并添加不重复的属性。这样就实现了两个数组对象的合并，重复属性被覆盖，不重复属性被添加。对象中以属性的键值作为键，属性对象作为值进行存储。如果存在，说明属性是重复的，则找到它在。这段代码首先创建了一个空的合并数组。，对于每个属性，检查它是否已存在于。然后，通过遍历第一个数组。和一个空的属性映射对象。接下来，遍历第二个数组。最后，返回合并后的数组。
js合并对象，重复的后者覆盖前者
seimeii的博客
06-25 1869
js合并对象，重复的后者覆盖前者
javascript对象覆盖部分属性
yuanwen52的博客
09-27 2779
需求：只需对现有对象的部分属性覆盖 例如： 只需覆盖info中的age属性，可以使用ES6中的解构赋值语法：
js中数组push对象，前面的值总是被最后一次的值覆盖的问题
pacholy的博客
05-26 1848
可能是因为在push对象时，每次都是将同一个对象的引用添加到数组中，而不是不同的对象。这意味着每次修改这个对象时，数组中的所有引用都会反映这个更改。要解决这个问题，可以在每次push对象时，创建一个新的对象，而不是只是引用同一个对象。这将确保每个对象都是独立的，而不会被其他对象的更改所影响。
JS实现两个数组对象，重复的属性覆盖，不重复的添加
qq_33225414的博客
05-24 1108
{ id: 1, name: '蓝莓', price: 10 },{ id: 2, name: '樱桃', price: 35 },{ id: 3, name: '葡萄', price: 10 },{ id: 4, name: '西瓜', price: 35 },
vue 对象数组中，根据相同属性的数据合并，重组新的数组对象
01-20
本问题探讨了如何根据`TYPE`和`REMARK`两个属性的值来决定是否合并对象，并生成新的数组对象。首先，我们需要理解源数据的结构，然后通过编程逻辑实现目标数据的转换。 源数据是一个包含多个对象的数组，每个对象有...
JavaScript如何把两个数组对象合并过程解析
10-16
在JavaScript中，数组对象的合并是一项常见的操作，特别是在处理数据集合时。本篇文章将深入探讨如何将两个数组对象合并，并通过实例代码详细解析其过程。 首先，我们需要理解数组对象的概念。数组对象是包含多个...
JavaScript 数组中最大最小值
10-22
本文将详细地介绍如何获取JavaScript数组中的最大值和最小值，包括使用原型方法扩展Array对象，以及利用Math对象的方法。 首先，使用原型方法扩展Array对象是一种直接对数组原型添加方法来获取最大值或最小值的方式...
JS数组覆盖问题
canmei58的博客
08-23 2351
var in_prm=[{ “bt_id”:40},{“bt_id”:41}] var zd_n_v=[{“arrt_id”:“19”,“arrt_name”:“分量”,“arrt_value”:“ok”}, {“arrt_id”:“20”,“arrt_name”:“口味”,“arrt_value”:“微辣”}] var tal=[]; for (var j = 0; j < in_prm...
lodash-assign
神zhi殇的博客
09-18 2005
lodash-assign：https://www.lodashjs.com/docs/latest#_assignobject-sources mdn-assign：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign Object.assign() 方法用于将...
JavaScript—— js 中数组 push 对象，总是被最后一次的值覆盖的解决方法
qq_43201350的博客
01-11 1008
JavaScript—— js 中数组 push 对象，总是被最后一次的值覆盖的解决方法
js 覆盖数组成员的方法 copyWithin() fill() - Kaiqisan
Kaiqisan的博客
08-06 1338
js 覆盖数组成员的方法 copyWithin() fill() ヤッハロー、Kaiqisanすうう、一つふつうの学生プログラマである,今天来讲讲批量替换数组内容的知识。为什么把这俩方法放在一起呢？还不是因为这俩方法有一个共同点那就是能够批量覆盖，重写数组成员. copyWithin(target, start, end): 提取数组内某一片段的信息，然后复制到另外一个地方。它有三个参数，第一个数target,义为复制到指定目标索引位置，复制完内容之后从目标索引开始粘贴，一直往后粘贴，直到粘贴完成或到达
js数组内对象被覆盖问题
MASK_life的博客
12-04 2845
项目场景： js写一个循环赋值，结果写了一个bug,我还找了半天，自己被自己蠢哭了。 问题描述： 今天开发遇到一个问题，js 循环外定义一个对象 然后数组内循环push， 数组内对象被覆盖，（没想到我自己也会犯这种粗心错误，太丢人了，话不多说直接上干货） 原因分析： 每次取出来的值都放在了b中，因为是在外面定义的对象，所以b的地址是一样的，arr中保存的是b的地址，当最后一次给b赋值的时候，由于是同一个b(对象)，所以最后一次给b.value赋值的后会把之前的值覆盖掉。 （有..
JS 数组追加数据不被覆盖
weixin_44911525的博客
02-02 2775
数组添加对象数据，普通的push()就可以了; 追加新数据，而不把之前的数据覆盖，详情看下图。 仔细看下push()和concat()的区别和用法,两个数组合并也可以使用concat()
JS对象
MisterFahrenheit的博客
07-18 244
1.使用点语法完成默认值设置和新值替换 利用的是同一对象中相同属性名后面的会覆盖前面的原理 function fun (params) { let config = { name: '张三', age: 18 } config = {...config, ...params} return config } console.log(fun({age: 20})) //name: '张三', age: 2
JavaScript入门——覆盖输出与对象基础示例
临渊
01-25 533
基本格式已省略，直接列出代码部分 1.基础js输出示例<body> <!-- 操作html元素 --> <p id="demo1">old js</p> <script> document.getElementById("demo1").innerHTML="new js"; </script> <!-- 写入文档输出 --> <script>
JavaScript 声明对象的同名属性，值会覆盖
KangTongShun的博客
11-04 4093
一、概述 最近发现用obj.property这种方式来为属性添加属性，或者是修改属性值，有点太过麻烦，就想到了es6解构赋值，这样能够方便的在原有对象的基础上增加新属性，但是有属性重复时是怎样的合并规则呢？之前没有试过，我菜。今天做了个实验，写写博客刷刷分。 二、实验 var b = { name:"小明", gender:"女", name: "小红" } //{name: "小红", gender: "女"} 三、结论 所以构造对象时， 后声明的属性会覆盖同名属性的值, 同理可得 var a = {n
JS——数组中push对象，覆盖问题
simon_dg的博客
10-04 9395
今天写运动框架时，发现将对象push进数组，后面的值会覆盖前面的值，最后输出的都是最后一次的值。其实这一切都是引用数据类型惹的祸。       如果你也有类似问题，可以继续看下去哦。       下面代码模拟： 将json对象的每个键值对，单独搞成对象，再赋值给数组，最后输出数组。结果数组应该是有三个对象。（for-in用于对象遍历）var json = { top: '400px', wid
js 合并对象 重复则覆盖
阿龙的博客
12-07 8175
//合并对象 public extend(obj1: object, obj2: object) { for (var obj in obj2) { obj1[obj] = obj2[obj]; } return obj1; }
js数组转对象
最新发布
11-15
<think> 首先，用户的问题是关于JavaScript数组转换为对象的方法。我需要基于提供的引用内容来回答。 引用内容回顾： - 引用[1]：展示了如何将JavaScript数组转换为JSON字符串，使用`JSON.stringify(fruits)`。 - 引用[2]：讨论了数组和对象的互相转换。 - 数组转对象：使用`reduce`方法，例如将数组`arr`转换为对象，键是`item.value`，值是`item.label`。 - 对象转数组：例如将对象`{0: '男', 1: '女'}`转换为数组。 - 引用[3]：提到了`_.fromPairs`（来自Lodash）将键值对数组转换为对象，以及`Object.entries`将对象转换为数组。 用户明确查询的是“JavaScript数组转换为对象的方法”，所以我需要专注于数组转对象的部分。 从引用中提取相关方法： 1. **使用`reduce`方法**：引用[2]中详细说明了如何使用数组的`reduce`方法将数组转换为对象。代码示例为： - `function f(arr) { return arr.reduce((obj, item) => (obj[item.value] = item.label, obj), {}) }` - 这假设数组元素是对象，有`value`和`label`属性。用户可能需要一个更通用的方法。 2. **使用Lodash的`_.fromPairs`**：引用[3]提到`_.fromPairs`可以将键值对数组转换为对象。示例： - `const array = [ ['key1', 'value1'], ['key2', 'value2'] ]; _.fromPairs(array); // { key1: 'value1', key2: 'value2' }` - 这适用于数组元素是子数组的情况。 3. **其他方法**：引用[1]是关于转换为JSON字符串的，不是直接转换为对象，所以不直接相关。但用户可能需要知道，如果数组是简单的值，可以直接赋值。 通用方法： - 如果数组是键值对数组（每个元素是[key, value]数组），可以使用`Object.fromEntries()`，这是现代JavaScript的方法。 - 如果数组是普通值数组，想转换为对象，键可以是索引或特定属性。 我需要确保回答覆盖常见场景： - **场景1：键值对数组转对象**：使用`Object.fromEntries()`（ES2019）或Lodash的`_.fromPairs`。 - **场景2：对象数组转对象**：使用`reduce`方法，如引用[2]所示。 - **场景3：简单数组转对象**：例如，将数组`['a', 'b', 'c']`转换为`{0: 'a', 1: 'b', 2: 'c'}`，可以使用`Object.assign({}, array)`或遍历。 用户的问题没有指定数组结构，所以我应该提供多种方法。 回答结构： 1. **引言**：简要解释数组转对象的需求。 2. **方法1**：使用`Object.fromEntries()`（推荐，如果是键值对数组）。 3. **方法2**：使用`reduce`方法（通用，适用于任何结构）。 4. **方法3**：使用Lodash的`_.fromPairs`（如果使用Lodash）。 5. **代码示例**：提供清晰的例子。 6. **注意事项**：提醒用户数组结构的影响。 7. **相关问题**：根据指令生成相关问题。 指令要求： - 使用中文回答。 - 回答结构清晰。 - 在引用的段落末尾添加引用标识，如[^1]。 - 生成相关问题。 - 数学表达式用$...$或$$...$$，但这里可能不需要。 生成相关问题： - 基于主题，如：如何将对象转回数组？性能比较？其他转换方法？ 最终回答框架： - 开头：直接回答用户。 - 主体：分点描述方法。 - 结尾：添加相关问题。 </think> ### JavaScript数组转换为对象的方法 在JavaScript中，将数组转换为对象是常见操作，具体方法取决于数组的结构（如元素是否为键值对、普通值或对象）。以下是基于常用场景的几种实现方法，我会逐步解释并提供代码示例。这些方法参考了站内引用内容，并结合了标准JavaScript语法。 #### 1. **使用 `Object.fromEntries()`（推荐，适用于键值对数组）** 如果数组元素是子数组（格式为 `[key, value]`），可以使用ES2019引入的 `Object.fromEntries()` 方法。这是最简洁的方式，无需外部库。 **代码示例：** ```javascript // 示例数组：元素是[key, value]对 const array = [ ['name', 'Alice'], ['age', 30], ['city', 'New York'] ]; // 转换为对象 const obj = Object.fromEntries(array); console.log(obj); // 输出: { name: 'Alice', age: 30, city: 'New York' } ``` **说明：** - 该方法直接接受一个键值对数组，并返回一个新对象。 - 适用于API响应数据或表单数据的转换，效率较高[^3]。 #### 2. **使用 `reduce()` 方法（通用，适用于复杂数组结构）** 如果数组元素是对象或需要自定义键值映射，可以使用数组的 `reduce()` 方法。这是一种灵活的方式，特别适合处理对象数组（如元素有 `id` 和 `value` 属性）。 **代码示例：** ```javascript // 示例数组：元素是对象 const users = [ { id: 1, name: 'Bob' }, { id: 2, name: 'Charlie' }, { id: 3, name: 'Diana' } ]; // 转换为对象，键为 id，值为 name const userObj = users.reduce((obj, item) => { obj[item.id] = item.name; // 自定义键值逻辑 return obj; }, {}); console.log(userObj); // 输出: { 1: 'Bob', 2: 'Charlie', 3: 'Diana' } ``` **说明：** - `reduce()` 方法遍历数组，初始值设为空对象 `{}`，并通过回调函数累积键值对。 - 此方法可灵活适配不同需求，如引用[2]所示，支持简写语法：`arr.reduce((obj, item) => (obj[item.key] = item.value, obj), {})`[^2]。 - 适合处理动态数据，如将API返回的用户列表转换为以ID为键的对象。 #### 3. **使用 Lodash 的 `_.fromPairs()`（依赖外部库）** 如果项目中已使用Lodash库，`_.fromPairs()` 提供了一种快捷方式，功能类似于 `Object.fromEntries()`。 **代码示例：** ```javascript // 先安装Lodash: npm install lodash const _ = require('lodash'); // 示例数组：键值对数组 const pairs = [ ['fruit', 'apple'], ['color', 'red'] ]; // 转换为对象 const obj = _.fromPairs(pairs); console.log(obj); // 输出: { fruit: 'apple', color: 'red' } ``` **说明：** - Lodash的`_.fromPairs()` 能将键值对数组直接转为对象，代码简洁[^3]。 - 适合旧版浏览器环境（如不支持ES2019），但增加额外依赖。 #### 注意事项 - **数组结构影响方法选择**： - 如果数组是简单值（如 `['a', 'b', 'c']`），想转为索引为键的对象（`{0: 'a', 1: 'b', 2: 'c'}`），可用 `Object.assign({}, array)` 或遍历。 - **性能**：`Object.fromEntries()` 通常最快，`reduce()` 适合复杂逻辑。 - **错误处理**：确保数组元素格式正确，否则可能导致键冲突或 `undefined` 值。 ###
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值