JS修改删除数组对象属性：map、forEach、解构等5种方法详解

在JavaScript开发中，修改数组内对象的属性是一项常见需求。以下是几种实现该目标的有效方法。

利用Array.map()方法进行转换
通过for-of循环进行遍历修改
结合扩展运算符的Array.map()方法
使用forEach()方法进行遍历修改
利用find()方法配合解构赋值

方法一：使用Array.map()

map()方法会根据提供的回调函数，对原始数组的每个元素进行转换，并返回一个包含新元素的新数组。这种方法不会修改原始数据，符合不可变数据的原则。

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' } ]

方法二：使用for-of循环

通过for-of循环遍历包含对象的数组，可以根据特定条件查找目标对象，并直接修改其属性。这种方式会直接改变原始数组中的对象引用。

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' } ]

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

此方法结合Array.map()和扩展运算符（...），通过展开对象自身的属性来创建新对象，从而更新特定属性的值。

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

示例说明：在此示例中，我们利用Array.map()方法配合展开运算符（spread operator, ...），将对象自身的属性展开，进而基于已有的对象数组来更新特定对象的属性值。

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' } ]

方法四：使用forEach()方法

利用forEach()方法遍历对象数组，检查指定条件，并直接修改匹配对象的属性。与for-of类似，这会直接修改原始数组中的对象。

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' }
]

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

首先使用find()方法搜索具有指定属性值的对象，然后利用解构赋值的方式修改该对象的属性。

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' }
]

二、JavaScript删除数组对象中的某个属性

方法一：使用for循环


let employ = [
    {
        employid: 1,
        employname: "Aman",
        employage:"15"
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
        employage:"16"
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
        employage:"17"
    },
];
       for(var i =0;i<employ.length;i++){
        if(employ[i].employid===1){
           delete employ[i].employage
        }}
console.log(employ)

输出:
[
    {
        employid: 1,
        employname: "Aman",
    },
    {
        employee_id: 2,
        employee_name: "Bhargava",
        employage:"16"
    },
    {
        employee_id: 3,
        employee_name: "Chaitanya",
        employage:"17"
    },
];

从上述打印输出可以看出，第一条对象中的年龄属性已被成功删除。

总结

本文介绍了JavaScript中修改和删除数组对象属性的多种方法。如需了解更多关于JS修改或删除数组属性的内容，建议查阅本站相关文章或继续浏览后续内容。

JavaScript修改和删除数组对象属性的5种常用方法