JavaScript 如何修改数组中对象的属性

在本文中，我们将尝试理解如何通过一个包含有效和合理方法的示例来修改数组中对象的属性。

有几种方法可以用来修改JavaScript数组中对象的属性：

• 使用Array.map()方法
• 使用for-of循环
• 使用具有扩展运算符的Array.map()方法
• 使用forEach()方法
• 使用find()方法和解构。

方法1：使用Array.map()方法

使用map()方法根据指定的函数，通过转换原始数组的每个元素来创建一个新的数组。

语法：

arr.map((element) => { /* … */ })

示例： 在这个示例中，map() 方法将 employee_id 为2的对象的 employee_name 修改为“Rahul”，并创建一个新的数组。

JavaScript

let employees_data = [
    {
        employee_id: 1,
        employee_name: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
    },
];
 
const modifiedEmployees = employees_data.map(obj => {
    if (obj.employee_id === 2) {
        return { ...obj, employee_name: "rahul" };
    }
    return obj;
});
 
console.log(modifiedEmployees);

输出

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'rahul' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

方法2：使用for-of循环

使用for循环遍历一个包含对象的数组，根据条件查找并修改特定对象的属性。

语法：

for ( variable of iterableObjectName) {  
   ...  
}

示例： 在这个示例中，我们将尝试使用之前创建的相同的对象数组，然后我们将使用 for-of循环 来更新现有对象的属性值。

JavaScript

let employees_data = [
    {
        employee_id: 1,
        employee_name: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
    },
];
for (let object of employees_data) {
    if (object.employee_id === 2) {
        object.employee_name = "Anthony";
    }
}
console.log("Updated Data: ");
console.log(employees_data);

输出

Updated Data: 
[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Anthony' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

方法3：使用Array.map()与扩展运算符

使用Array.map()创建一个带有扩展运算符的新数组，以修改特定对象的属性。

语法：

employees_data.map((employee) => {  
    if (employee.employee_id === 2) {  
        return {  
            ...employee,  
            employee_name: "Anthony",  
        };  
    }  
    return employee;  
});

示例： 在这个示例中，我们将使用Array.map()方法以及spread operator（…）将对象自身展开，以便通过使用先前创建的对象数组来更新现有对象的属性值。

Javascript

let employees_data = [
    {
        employee_id: 1,
        employee_name: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
    },
];
let new_updated_data =
    employees_data.map((employee) => {
        if (employee.employee_id === 2) {
            return {
                ...employee,
                employee_name: "Anthony",
            };
        }
        return employee;
    });
console.log("Updated Data: ");
console.log(new_updated_data);

输出

Updated Data: 
[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Anthony' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

方法4：使用 forEach() 方法

使用 forEach() 方法，遍历对象数组，检查条件并修改匹配对象的属性。

语法：

array.forEach(callback(element, index, arr), thisValue)

示例： 在这个示例中， 我们正在使用上述解释的方法。

JavaScript

let employees_data = [
    {
        employee_id: 1,
        employee_name: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
    },
];
 
const modifyProperty = (arr, targetId, newProperty) => {
    arr.forEach(obj => {
        if (obj.employee_id === targetId) {
            obj.employee_name = newProperty;
        }
    });
};
 
modifyProperty(employees_data, 2, "Ankit");
console.log(employees_data);

输出

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Ankit' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]

方法5：使用find()方法和解构

使用find()方法搜索具有指定属性值的对象，并使用解构修改属性。

语法：

array.find(function(currentValue, index, arr),thisValue);

示例： 在这个示例中，我们将修改employee_id等于2的对象的employee_name属性为“Kavita”。

Javascript

let employees_data = [
    {
        employee_id: 1,
        employee_name: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
    },
];
 
const modifyProperty = (arr, targetId, newProperty) => {
    const targetObj = arr.find(obj => obj.employee_id === targetId);
    if (targetObj) {
        targetObj.employee_name = newProperty;
    }
};
 
modifyProperty(employees_data, 2, "Kavita");
console.log(employees_data);

输出

[
  { employee_id: 1, employee_name: 'Aman' },
  { employee_id: 2, employee_name: 'Kavita' },
  { employee_id: 3, employee_name: 'Chaitanya' }
]