配列内のオブジェクトから指定したプロパティを削除
- JavaScript
-
2022-06-13 - 更新:2022-09-28
この記事は最終更新日から1年以上経過しています。
配列化したオブジェクトの中から指定したプロパティだけを削除する方法。
fruits = [
{
name: "apple",
color: "red",
quantity: 3,
},
{
name: "orange",
color: "orange",
quantity: 6,
},
{
name: "grape",
color: "purple",
quantity: 10,
}
];
ログを出力して中身を確認します。
console.log({fruits});
出力結果
{
fruits: [
{ name: 'apple', color: 'red', quantity: 3 },
{ name: 'orange', color: 'orange', quantity: 6 },
{ name: 'grape', color: 'purple', quantity: 10 }
]
}
forEachとdeleteを使ってquantityプロパティを削除します。
fruits.forEach(element => delete element.quantity);
ログを出力して中身を確認しましょう。
console.log({fruits});
出力結果
{
fruits: [
{ name: 'apple', color: 'red' },
{ name: 'orange', color: 'orange' },
{ name: 'grape', color: 'purple' }
]
}
quantityプロパティだけが削除されました。
プロパティを追加する
先ほどとは逆に、配列化したオブジェクトにプロパティを追加してみましょう。
元のオブジェクト配列
fruits = [
{
name: "apple",
color: "red",
},
{
name: "orange",
color: "orange",
},
{
name: "grape",
color: "purple",
}
];
追加するオブジェクト配列
quantities = [
{
quantity: 3
},
{
quantity: 6
},
{
quantity: 10
}
];
forEachとObject.assignを使ってquantityプロパティを追加します。
fruits.forEach((element, index) => Object.assign(element, quantities[index]));
console.log({fruits});
出力結果
{
fruits: [
{ name: 'apple', color: 'red', quantity: 3 },
{ name: 'orange', color: 'orange', quantity: 6 },
{ name: 'grape', color: 'purple', quantity: 10 }
]
}
この記事がお役に立ちましたらシェアお願いします
2,170 views




