JavaScript修改、刪除數(shù)組中某個(gè)對(duì)象的某個(gè)屬性幾種方法
一 有幾種方法可以用來(lái)修改JavaScript數(shù)組中對(duì)象的屬性：
- 使用Array.map()方法
- 使用for-of循環(huán)
- 使用具有擴(kuò)展運(yùn)算符的Array.map()方法
- 使用forEach()方法
- 使用find()方法和解構(gòu)。
方法1：使用Array.map()方法
使用map()方法根據(jù)指定的函數(shù)，通過(guò)轉(zhuǎn)換原始數(shù)組的每個(gè)元素來(lái)創(chuàng)建一個(gè)新的數(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)遍歷一個(gè)包含對(duì)象的數(shù)組，根據(jù)條件查找并修改特定對(duì)象的屬性。
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()與擴(kuò)展運(yùn)算符
使用Array.map()創(chuàng)建一個(gè)帶有擴(kuò)展運(yùn)算符的新數(shù)組，以修改特定對(duì)象的屬性。
employees_data.map((employee) => {
if (employee.employee_id === 2) {
return {
...employee,
employee_name: "Anthony",
};
}
return employee;
});
示例： 在這個(gè)示例中，我們將使用Array.map()方法以及spread operator（…）將對(duì)象自身展開(kāi)，以便通過(guò)使用先前創(chuàng)建的對(duì)象數(shù)組來(lái)更新現(xiàn)有對(duì)象的屬性值。
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() 方法，遍歷對(duì)象數(shù)組，檢查條件并修改匹配對(duì)象的屬性
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()方法搜索具有指定屬性值的對(duì)象，并使用解構(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ù)組對(duì)象中的某個(gè)對(duì)象里的某個(gè)屬性
方法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"
},
];可以看到上面打印輸出第一條對(duì)象里的年齡屬性刪除了
總結(jié)
到此這篇關(guān)于JavaScript修改、刪除數(shù)組中某個(gè)對(duì)象的某個(gè)屬性幾種方法的文章就介紹到這了,更多相關(guān)JS修改、刪除數(shù)組某個(gè)屬性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js如何實(shí)現(xiàn)小程序wx.arrayBufferToBase64方法實(shí)例
這篇文章主要給大家介紹了關(guān)于js如何實(shí)現(xiàn)小程序wx.arrayBufferToBase64方法的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
javascript中定義私有方法說(shuō)明(private method)
本篇文章主要是對(duì)javascript中定義私有方法(private method)進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
新浪微博字?jǐn)?shù)統(tǒng)計(jì) textarea字?jǐn)?shù)統(tǒng)計(jì)實(shí)現(xiàn)代碼
淺談使用MVC模式進(jìn)行JavaScript程序開(kāi)發(fā)
js正則表達(dá)式最長(zhǎng)匹配(貪婪匹配)和最短匹配(懶惰匹配)用法分析
返回對(duì)象在當(dāng)前級(jí)別中是第幾個(gè)元素的實(shí)現(xiàn)代碼