カテゴリー
SugiBlog Webエンジニアのためのお役立ちTips

配列内のオブジェクトから指定したプロパティを削除

この記事は最終更新日から1年以上経過しています。

配列化したオブジェクトの中から指定したプロパティだけを削除する方法。

ソースを表示
印刷SyntaxHighlighterについて
1fruits = [
2    {
3        name: "apple",
4        color: "red",
5        quantity: 3,
6    },
7    {
8        name: "orange",
9        color: "orange",
10        quantity: 6,
11    },
12    {
13        name: "grape",
14        color: "purple",
15        quantity: 10,
16    }
17];

ログを出力して中身を確認します。

ソースを表示
印刷SyntaxHighlighterについて
1console.log({fruits});

出力結果

ソースを表示
印刷SyntaxHighlighterについて
1{
2  fruits: [
3    { name: 'apple', color: 'red', quantity: 3 },
4    { name: 'orange', color: 'orange', quantity: 6 },
5    { name: 'grape', color: 'purple', quantity: 10 }
6  ]
7}

forEachとdeleteを使ってquantityプロパティを削除します。

ソースを表示
印刷SyntaxHighlighterについて
1fruits.forEach(element => delete element.quantity);

ログを出力して中身を確認しましょう。

ソースを表示
印刷SyntaxHighlighterについて
1console.log({fruits});

出力結果

ソースを表示
印刷SyntaxHighlighterについて
1{
2  fruits: [
3    { name: 'apple', color: 'red' },
4    { name: 'orange', color: 'orange' },
5    { name: 'grape', color: 'purple' }
6  ]
7}

quantityプロパティだけが削除されました。

プロパティを追加する

先ほどとは逆に、配列化したオブジェクトにプロパティを追加してみましょう。

元のオブジェクト配列

ソースを表示
印刷SyntaxHighlighterについて
1fruits = [
2    {
3        name: "apple",
4        color: "red",
5    },
6    {
7        name: "orange",
8        color: "orange",
9    },
10    {
11        name: "grape",
12        color: "purple",
13    }
14];

追加するオブジェクト配列

ソースを表示
印刷SyntaxHighlighterについて
1quantities = [
2    {
3        quantity: 3
4    },
5    {
6        quantity: 6
7    },
8    {
9        quantity: 10
10    }
11];

forEachとObject.assignを使ってquantityプロパティを追加します。

ソースを表示
印刷SyntaxHighlighterについて
1fruits.forEach((element, index) => Object.assign(element, quantities[index]));
2 
3console.log({fruits});

出力結果

ソースを表示
印刷SyntaxHighlighterについて
1{
2  fruits: [
3    { name: 'apple', color: 'red', quantity: 3 },
4    { name: 'orange', color: 'orange', quantity: 6 },
5    { name: 'grape', color: 'purple', quantity: 10 }
6  ]
7}
この記事がお役に立ちましたらシェアお願いします
, ,
1,883 views
≪ ≫

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

関連記事

  1. Javascript 配列
  2. JavaScriptで配列の値を合計する
  3. JavaScriptで指定した要素が配列に存在するか調べる
  4. JavaScriptでの日付フォーマット