JavaScriptの配列に項目を追加する5つの方法

25028 ワード

webdev codenewbie javascript beginners テキストリンク

配列の最後に項目を追加する5つの方法があります.push , splice , and length は元の配列を展開する.にconcat and spread を返します.どれが最善かはユースケースによる👍
推定
これは元の配列を変更します

const array = ['🦊'];

array.push('🐴');
array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

// Result
// ['🦊', '🐴']

無作為の
これは新しい配列を作成し、元の配列は変更されません.

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

配列にアイテムを追加する3つの方法
アイテムを配列にプッシュできる3つの方法を見てみましょう.これは本来の配列を変更するという意味では、これは正しい方法です.

プッシュ
配列の最後にアイテムを追加する最も簡単な方法はpush .

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

私がアイテム* s *を言っただけでなく、アイテム😉 あなたは、複数の項目をプッシュすることができます.

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

しかし、渡す個々のアイテムは、幸運にもES 6のスプレッド機能を使用することができますドラッグです.これにより、配列を渡し、... 項目を個々の引数に広げる構文🙌

const zoo = ['🦊', '🐮'];
const birds = ['🐧', '🐦', '🐤'];

zoo.push(...birds);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

継手
一見すると、この方法はスーパー😂 我々が議論の束を通過しているので.このメソッドは配列項目を追加または削除できます.したがって、それはそれが仕事のためにそれをもう少し情報を与えるために私たちを必要とします.必要なパラメータを見てみましょう
パラメータ
パラメータ名
定義
1
startindex
項目を追加/削除するインデックス
2
deletecount
削除する項目の数
3
アイテム
追加したい番号(削除した場合は、この空白を残すことができます)

const zoo = ['🦊', '🐮'];

zoo.splice(
  zoo.length, // We want add at the END of our array
  0, // We do NOT want to remove any item
  '🐧', '🐦', '🐤', // These are the items we want to add
);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

長さ
私は、これがすべての方法の最も賢い方法であると思います.それは決して私の心を交差された方法の一つです.では、なぜこれが働くのか理解しましょう.
JavaScriptの配列はゼロインデックスです.だから、最初の項目は0 .

const zoo = ['🦊', '🐮'];

// '🦊' | Index = 0
// '🐮' | Index = 1

配列のブラケット表記では、アイテムを取得できますが、その項目をオーバーライドできます.

const zoo = ['🦊', '🐮'];

// Retrieve
zoo[0]; // Returns '🦊'

// Override
zoo[1] = '🥩';

console.log(zoo); // ['🦊', '🥩']; **

// ** JUST JOKING 😂
// ...I promise no animals were hurt in this blog post 😬

おもしろいことはarray.length 配列内の項目の合計数を返します.つまり、長さは常にインデックスの最後の項目より1つ高い数値です.したがって、長さインデックスで値を割り当てることによって、それは本質的に配列の終わりにアイテムを加えることです.

const zoo = ['🦊', '🐮'];
const length = zoo.length; // 2

zoo[length] = '🐯';

console.log(zoo); // ['🦊', '🐮', '🐯']

配列にアイテムを追加する2つの方法
それでは、無作為に配列に項目を追加しましょう.元の配列がアンタッチされたままで、新しい配列に追加が含まれます.

コンステ
このメソッドは配列をマージするためのものです.したがって、配列を渡すことによって複数の項目を追加することができます.

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟']; // Array of multiple items

const aquarium = ocean.concat(fish);

aquarium; // ['🐙', '🦀', '🐠', '🐟']

// Original Array Not Affected
ocean; //  ['🐙', '🦀']

しかし、それはちょうどパラメータとして配列を受け入れません、それも値(s)を受け入れます.

const ocean = ['🐙', '🦀'];

const aquarium = ocean.concat('🐡'); // Add a single value
const sushi = ocean.concat('🐡', '🍚'); // Add multiple values

aquarium; // ['🐙', '🦀', '🐡']
sushi; //  ['🐙', '🦀', '🐡', '🍚']

// Original Array Not Affected
ocean; // ['🐙', '🦀']

広がる
スプレッド構文を使用して、各配列要素を個々の要素に展開できます.非常に人気のあるアプリケーションは、コピーを作成したり、2つの別々の配列をマージするためにスプレッドを使用することです.これはconcat .

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟'];

const aquarium = [...ocean, ...fish];

aquarium; // ['🐙', '🦀', '🐠', '🐟']

// Original Array Not Affected
ocean; //  ['🐙', '🦀']

ただし、スプレッドを使用しない場合は、代わりに入れ子になった配列を取得します.

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟'];

const aquarium = [ocean, fish];

// [  ['🐙', '🦀'],  ['🐠', '🐟'] ]

それで、配列をマージするのに使うことができますが、通常の配列を作成するときと同じように、個々の値を渡すこともできます.

const ocean = ['🐙', '🦀'];

const aquarium = [...ocean, '🐡']; // Add a single value
const sushi = [...ocean, '🐡', '🍚']; // Add multiple values

aquarium; // ['🐙', '🦀', '🐡']
sushi; //  ['🐙', '🦀', '🐡', '🍚']

// Original Array Not Affected
ocean; // ['🐙', '🦀']

変異するか変異しないか?
それで、問題は突然変異するか、変異しないことです🎭 よく、それは本当にあなたのユースケースに依存します.あなたがRedUxまたはどんな州管理アーキテクチャで働いているとき、それはすべての不変性についてです.したがって、非可換法はあなたの選択です.また、機能的プログラミングの基礎であり、純粋な機能を生み出す副作用を避けるためには、実行不可能性の概念がしばしば好ましい.
しかし、それは私たちが決して仮定的な方法を使用してはならないことを意味しますか?ちっとも.immutabilityがちょうど重要でない時があるので.この簡単な例を見てください.

function menu(isFriday) {
  const food = ['🍗', '🍳'];
  isFriday ? food.push('🍷') : food;

  return food;
}

これらのケースでは、なぜ意外な方法を使用しないか.値を追加するために行くpush . なぜ?それはタイプを入力していないので😂) スーパー読み込み可能.はい、あなたはconcat また、型に非常に短いです.しかし、このパフォーマンステストをチェックしてください.プッシュははるかに高速です!⚡️

Performance Test: Push vs Concat

コミュニティ入力
変異するか変異しないか?一般に、それは非常に深い質問です.しかし、簡素化するために、オリジナルの配列がまだ他のどこかに必要であると仮定します?それから、あなたはそれを変異したくありません.それが必要でないならば、あなたは直接それを突然変異させることができます.
配列のコピーを作成するデータ構造は、それを突然変異させるのと同じくらい安価である(または比較的安い)、そして、それらは非常に涼しいが、JavaScriptコミュニティでそれほど普及しないです.
それらは「永続的なデータ構造」と呼ばれ、多くの場合に非常に有用です.しかし、彼らはデザインに非常に複雑です.
彼らは、例えばundo redoのような機能を実装することを簡単にします.しかし、彼らは本当に機能的なプログラミングとマルチスレッドアプリケーションで輝きます.
:また、[ newEl, ...array] or array.unshift(newEl) .
空の項目を配列に追加するには1つの方法があります(配列に項目を追加することもできます.

const array = [1, 2];

array.length = 3;

console.log(array); // [1, 2, <1 empty item>]

:配列を縮小するのにも使えます

const array = [1, 2];

array.length = 1;

console.log(array); // [1]

他の配列を必要とするのであれば、突然変異しないことについてのポイントは、特に並列であるか並行したプログラミングのための良いものです.単一のスレッドのJavaScriptでも、参照によって配列を渡された可能性がありますので、予期しないことを突然変異.一般的に私は非突然変異を見つけるよりリラックス方法です!

資源

MDN Web Docs: array.length

Stack Overflow: How to append something to an array?

How to append an item to an array in JavaScript

JavaScript Array Methods: Mutating vs. Non-Mutating

To mutate, or not to mutate, in JavaScript

Array Add

JavaScript "Add to Array" Functions (push vs unshift vs others)

元々はwww.samanthaming.com