JavaScript修改、刪除數(shù)組中某個對象的某個屬性幾種方法

更新時間：2024年09月12日 10:48:52 作者：William_jade

在JavaScript開發(fā)中,經(jīng)常需要修改數(shù)組中對象的屬性,下面這篇文章主要介紹了JavaScript修改、刪除數(shù)組中某個對象的某個屬性幾種方法,需要的朋友可以參考下

一有幾種方法可以用來修改JavaScript數(shù)組中對象的屬性：

使用Array.map()方法
使用for-of循環(huán)
使用具有擴展運算符的Array.map()方法
使用forEach()方法
使用find()方法和解構(gòu)。

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

使用map()方法根據(jù)指定的函數(shù)，通過轉(zhuǎn)換原始數(shù)組的每個元素來創(chuàng)建一個新的數(shù)組。

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循環(huán)

使用for循環(huán)遍歷一個包含對象的數(shù)組，根據(jù)條件查找并修改特定對象的屬性。

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()創(chuàng)建一個帶有擴展運算符的新數(shù)組，以修改特定對象的屬性。

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

示例： 在這個示例中，我們將使用Array.map()方法以及spread operator（…）將對象自身展開，以便通過使用先前創(chuàng)建的對象數(shù)組來更新現(xiàn)有對象的屬性值。

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() 方法，遍歷對象數(shù)組，檢查條件并修改匹配對象的屬性

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()方法和解構(gòu)

使用find()方法搜索具有指定屬性值的對象，并使用解構(gòu)修改屬性。

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刪除數(shù)組對象中的某個對象里的某個屬性

方法1:使用for循環(huán)

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"
    },
];

可以看到上面打印輸出第一條對象里的年齡屬性刪除了