修改对象数组的某一个值,不改变原数组
时间: 2024-05-19 14:14:58 浏览: 8
可以使用Object.assign()方法来创建一个新的对象,然后修改这个新对象的值,而不会改变原数组。例如,假设我们有一个包含多个对象的数组arr,我们想要修改其中一个对象的属性prop的值,可以这样实现:
const newArr = Object.assign([], arr); // 创建一个新对象的数组
newArr[index] = Object.assign({}, arr[index], { prop: newValue }); // 在新数组中修改某个对象的属性值
// 现在newArr是一个包含修改后的对象的新数组,而原数组arr并没有改变。
相关问题
代码如何改变对象数组中的某个属性值,并不改变原数组
的其他属性和对象?
你可以使用数组的 map 方法和对象的扩展运算符来实现这个需求。具体操作如下:
1. 使用 map 方法遍历原数组,返回一个新的数组,其中每个元素是一个新对象,只修改需要修改的属性。
2. 使用扩展运算符将原数组中不需要修改的元素加入到新数组中。
举个例子,假设要将数组 arr 中 id 为 3 的元素的 name 属性改成 "newName",代码如下:
```javascript
const arr = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}, {id: 4, name: 'name4'}]
const modifiedArr = arr.map(obj => {
if (obj.id === 3) {
return {...obj, name: 'newName'}
} else {
return obj
}
})
console.log(modifiedArr)
```
输出结果为:
```
[
{ id: 1, name: 'name1' },
{ id: 2, name: 'name2' },
{ id: 3, name: 'newName' },
{ id: 4, name: 'name4' }
]
```
可以看到,id 为 3 的元素的 name 属性已经被修改了。同时,原数组 arr 的其他元素并没有被修改。
js 多层对象数组,修改内层的数据 不改变原数组
可以使用深拷贝的方式,先将原数组复制一份,然后对复制的数组进行修改,这样就不会改变原数组。
以下是一个示例代码:
```javascript
const originalArray = [
{
id: 1,
name: 'John',
hobbies: [
{ name: 'reading', level: 3 },
{ name: 'swimming', level: 2 }
]
},
{
id: 2,
name: 'Sarah',
hobbies: [
{ name: 'hiking', level: 4 },
{ name: 'dancing', level: 1 }
]
}
];
// 使用深拷贝复制原数组
const copiedArray = JSON.parse(JSON.stringify(originalArray));
// 修改复制的数组
copiedArray[0].hobbies[0].level = 5;
console.log(originalArray[0].hobbies[0].level); // 输出 3,原数组不变
console.log(copiedArray[0].hobbies[0].level); // 输出 5,复制的数组被修改
```
在上面的示例中,使用 `JSON.parse(JSON.stringify(originalArray))` 进行深拷贝,这样就可以得到一个原数组的复制。然后对复制出来的数组进行修改,原数组不会受到影响。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)