JavaScript 配列メソッド早見表
このページでは、一般的な操作、ES6の新機能、パフォーマンスの最適化など、JavaScriptの配列メソッドに関する詳細なガイドを提供します。
配列の作成
JavaScriptには、配列を作成するためのいくつかの方法があります。
配列リテラルの使用
let arr = [1, 2, 3];コンストラクタの使用
let arr = new Array(1, 2, 3);Array.of メソッドの使用
let arr = Array.of(1, 2, 3);Array.from メソッドの使用
let arr = Array.from('123'); // ['1', '2', '3']
配列操作
配列には、データの追加、削除、変更、クエリのための豊富なメソッドが用意されています。
要素の追加
push：配列の最後に1つ以上の要素を追加するunshift：配列の最初に1つ以上の要素を追加する
要素の削除
pop：配列の最後の要素を削除するshift：配列の最初の要素を削除するsplice：インデックスに基づいて任意の数の要素を削除する
要素の検索
indexOf：配列内の要素のインデックスを検索するincludes：配列に特定の要素が含まれているかどうかを判断する
配列の反復処理
forEach：配列の各要素に対してコールバック関数を1回実行するmap：元の配列の要素を関数で処理した結果を含む新しい配列を作成するfilter：テストに合格したすべての要素を含む新しい配列を作成する
配列の変換
join：配列のすべての要素を文字列に変換するslice：配列の一部を抽出するconcat：2つ以上の配列を結合する
ES6の新機能
ES6では、配列操作に多くの機能強化が行われました。
スプレッド演算子
let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]
Array.prototype.find
let result = arr.find(item => item > 2); // 3
Array.prototype.findIndex
let index = arr.findIndex(item => item > 2); // 2
Array.prototype.fill
arr.fill(0); // [0, 0, 0]
Array.prototype.includes
arr.includes(2); // true
パフォーマンスの最適化
大きな配列を処理する場合、パフォーマンスの最適化が特に重要です。
- 通常、C++で実装されており、JavaScriptのループよりも高速な
mapやfilterなどのネイティブメソッドを使用するようにしてください。 - 頻繁に操作される配列の場合は、
Typed Arraysの使用を検討してください。 - ループ内でのDOM操作は避けてください。操作が必要なDOMノードを収集し、最後にまとめて操作するようにしてください。
結論
このガイドを通じて、JavaScriptの配列操作についてより深く理解できたはずです。詳細については、MDN Web Docs を参照してください。