☰

配列内のすべてのオブジェクトにキーと値のペアを追加する 質問する

tag-icon • tag-icon javascript arrays
配列内のすべてのオブジェクトにキーと値のペアを追加する 質問する

配列内のすべてのオブジェクトに key:value パラメータを追加したいと考えました。

例えば：

var arrOfObj = [{name: 'eve'},{name:'john'},{name:'jane'}];

ここで、すべてのオブジェクトに新しいパラメータ isActive を追加して、結果の配列が次のようになるようにします。

例えば：

    [{
    name: 'eve',
    isActive: true
}, {
    name: 'john',
    isActive: true
}, {
    name: 'jane',
    isActive: true
}]

配列をループしてキーと値のペアを挿入することはいつでもできます。しかし、もっと良い方法があるのではないかと考えていました。

ベストアンサー1

の地図（）この場合、関数は最適な選択です

tl;dr - これを行ってください:

const newArr = [
  {name: 'eve'},
  {name: 'john'},
  {name: 'jane'}
].map(v => ({...v, isActive: true}))

の地図（）関数変更しません初期配列はそのままですが、新しい配列を作成します。これは、初期配列を変更せずに維持するための良い方法でもあります。

代替案:

const initialArr = [
      {name: 'eve'},
      {name: 'john'},
      {name: 'jane'}
    ]

const newArr1 = initialArr.map(v => ({...v, isActive: true}))
const newArr2 = initialArr.map(v => Object.assign(v, {isActive: true}))

// Results of newArr1 and newArr2 are the same

キーと値のペアを追加する条件付きで

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr1 = arr.map(v => ({...v, isActive: v.value > 1}))

条件が false の場合に新しいフィールドをまったく追加したくない場合はどうすればよいでしょうか?

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr = arr.map(v => {
  return v.value > 1 ? {...v, isActive: true} : v 
})

追加と初期配列の変更

const initialArr = [{a: 1}, {b: 2}]
initialArr.forEach(v => {v.isActive = true;});

これはおそらく最善のアイデアではないが、現実の生活ではそれが唯一の方法である場合もある。

質問

  • スプレッド演算子 ( ...) を使用する必要があるのでしょうか、Object.assignそれとも違いは何でしょうか?

個人的には、スプレッド演算子を使うことを好みます。なぜなら、現代の Web コミュニティでは、スプレッド演算子の方がより幅広く使用されていると思うからです (特に React の開発者はスプレッド演算子を好みます)。ただし、違いは自分で確認できます。リンク（少し独断的で古いですが、それでも）

  • functionの代わりにキーワードを使用できますか=>?

もちろんできます。ファット アロー ( =>) 関数は とは少し異なる動作をしますthisが、この特定のケースではそれほど重要ではありません。ただし、ファット アローは動作が短く、コールバックとしてより適切に動作する場合もあります。したがって、ファット アロー関数の使用は、より現代的なアプローチです。

  • map 関数内では実際に何が起こりますか.map(v => ({...v, isActive: true})?

マップ関数は配列の要素ごとに反復処理し、各要素にコールバック関数を適用します。そのコールバック関数は、新しい配列の要素となるものを返す必要があります。関数に.map()次のように指示します。現在の値 (vオブジェクト) を取得し、すべてのキーと値のペアをv新しいオブジェクト ( ) 内に配置します{...v}が、プロパティを追加してisActivetrue ( ) に設定し{...v, isActive: true}、結果を返します。ちなみに、元のオブジェクトにisActiveファイルが含まれている場合は上書きされます。Object.assign同じように動作します。

  • 一度に複数のフィールドを追加できますか

はい。

[{value: 1}, {value: 1}, {value: 2}].map(v => ({...v, isActive: true, howAreYou: 'good'}))
  • .map()メソッド内でしてはいけないこと

副作用は起こさないでください[リンク 1、リンク2]、しかしどうやらできるようです。

また、配列の各要素を反復処理し、それぞれに関数を適用していることにも注意してくださいmap()。そのため、内部で重い処理を実行すると、遅くなる可能性があります。これは（少しハック的です）解決場合によってはより生産的になるかもしれません (ただし、一生に一度以上適用すべきではないと思います)。

  • マップのコールバックを別の関数に抽出できますか?

できますよ。

const arr = [{value: 1}, {value: 1}, {value: 2}]   
const newArr = arr.map(addIsActive)

function addIsActive(v) {
    return {...v, isActive: true}
}
  • 古くて良い for ループの何が問題なのでしょうか?

に問題はありませんfor。まだ使用できますが、これはより冗長で、安全性が低く、初期配列を変更する古いアプローチです。ただし、以下を試すことができます。

const arr = [{a: 1}, {b: 2}]
for (let i = 0; i < arr.length; i++) {
 arr[i].isActive = true
}
  • 私も何を学ぶべきか

以下の方法をよく学ぶのが賢明でしょう地図（）、フィルター（）、減らす（）、各()、 そして探す（）これらのメソッドは、配列で通常実行したいことの 80% を解決できます。

おすすめ記事