[JavaScript] ES6 の配列 API を探索する: シンプルで効率的な操作方法

ES6( ECMAScript 2015) はJavaScript言語の重要なバージョンであり、より簡潔で便利で読みやすいコードを作成するための多くの新機能と API を提供します。ES6 のすべての新しい API について知りたい場合は、私の他のブログ「JS 構文 ES6、ES7、ES8、ES9、ES10、ES11、ES12 の新機能」にジャンプしてください。

ES6では配列関連のAPIも大幅に強化されていますので、ES6における配列の新機能やAPIについて詳しく紹介していきます。

1. Array.of()

Array.of()このメソッドは新しい配列を作成し、渡されたパラメーターに基づいて配列要素を作成します。

• 渡されるパラメータは任意のデータ型にすることができ、配列の長さを指定する必要はありません。
• パラメータがない場合は空の配列が返されます
• Array.of() の動作は、従来の配列リテラルの作成よりも明確で予測可能です。

たとえば、次のように 3 つの要素を含む配列を作成できます。

const arr = Array.of(1, 2, 3);
console.log(arr);  // output: [1, 2, 3]

この例では、Array.of() メソッドを使用して 3 つの整数の配列を作成し、それを変数 arr に割り当てます。3 つのパラメーターを渡したので、作成された配列には 3 つの要素が含まれることに注意してください。

Array.of()このメソッドの主な利点は、Array() メソッドの特別な構文を使用せずに、指定された長さの配列を作成できることです。たとえば、5 つの要素を含む配列を作成する場合は、次のように実行できます。

const arr = Array.of(5);
console.log(arr);  // output: [5]

この例では、整数 5 を渡しました。これにより、値 5 を持つ 1 つの要素を含む配列が作成されます。これは、Array() メソッドを使用して作成する方法とは異なることに注意してください。

const arr = new Array(5);
console.log(arr);  // output: [ , , , , ]

この例では、5 つの要素を含む配列を作成し、それを変数 arr に割り当てます。作成時に、この配列には要素値が与えられないことに注意してください。これは、任意の数の引数で配列を初期化する Array.of() メソッドの使用とは異なります。そのため、値を設定したい場合は、自動リスト形式で行うことができます。

const arr = Array.of(1, 2, 3, 4, 5);
console.log(arr);  // output: [1, 2, 3, 4, 5]

また、文字列を含む要素を作成するときは、Array.of() メソッドの使用に注意してください。この場合、文字列は個々の文字に分割されるのではなく、単一の要素として扱われます。

const arr = Array.of("hello");
console.log(arr);  // output: ["hello"]

要約すると、Array.of()メソッドはカスタム サイズの配列を作成し、その配列内の要素を初期化する簡単な方法を提供します。

2. Array.from()

Array.from()メソッドは、Set や Map などの配列のようなオブジェクトまたは反復可能なオブジェクトから新しい配列インスタンスを作成します。このメソッドは、暗黙的なマッピングとフィルター パラメーターもサポートします。

たとえば、mySetSet オブジェクトから配列を作成するには、次を使用します。

const mySet = new Set([1, 2, 3]);
const arr = Array.from(mySet);
console.log(arr); // [1, 2, 3]

暗黙的なマッピングは、要素をマップする関数を受け取る 2 番目のパラメーターを使用して実現できます。

const arr = Array.from([1, 2, 3], x => x * 2);
console.log(arr); // [2, 4, 6]

3. Array.prototype.fill()

Array.prototype.fill()このメソッドは、配列内のすべての要素を指定された値に置き換えます。value3 つのパラメータ( required )、start( Optional )、およびend( Optional )を受け入れます。

• valueパラメーターは、配列要素を埋めるために使用される値です。
• startパラメータは塗りつぶしの開始位置を示します。指定しない場合、デフォルトは 0 です。
• endこのパラメータはパディングの終了位置を表しますが、終了位置自体は含まれません。end パラメータが渡されない場合、デフォルトは配列の末尾になります。

たとえば、fill() メソッドを使用して、配列内のすべての要素を同じ値に設定できます。

// 创建一个5个元素的空数组
const arr = new Array(5);

// 用数字0填充数组
arr.fill(0);

console.log(arr);  // output: [0, 0, 0, 0, 0]

上に示したように、まず 5 つの要素を含む空の配列を作成し、それを変数 arr に割り当てます。次に、fill()メソッドを使用して、配列内のすべての要素を数値 0 に設定します。

次の例は、start パラメータと end パラメータを使用して配列の特定のサブセットを埋める方法を示しています。

// 创建一个5个元素的空数组
const arr = new Array(5);

// 用数字1来填充数组的第2个到第4个元素
arr.fill(1, 1, 4);

console.log(arr);  // output: [ , 1, 1, 1, ]

上に示したように、まず 5 つの要素を含む空の配列を初期化し、それを変数 arr に割り当てます。次に、fill()メソッドを使用して配列の2、3、 番目の4要素を数値に1設定し、開始パラメータを 1 (2 番目の要素を示す)、終了パラメータを 4 (5 番目の要素のインデックスを示す) に指定します。

言及する価値があるのは、

• fill()このメソッドは原数组変更された array を操作して返すため、新しい配列を作成する必要はありません。
• 新しい配列を作成する必要がある場合は、Array.from()メソッド とメソッドfill()を組み合わせて使用​​できます。

const n = 5;
const arr = Array.from({
    
    length: n}, () => 0);
console.log(arr);  // output: [0, 0, 0, 0, 0]

上記の例では、Array.from() メソッドとアロー関数を使用して長さ n の配列を生成し、それに 0 を入力して、n 個の要素を含む新しい配列を取得します。

要約すると、Array.fill()メソッドは大きな配列の要素値を簡単に設定する方法を提供し、生の配列を簡単に操作できるようにします。

4. Array.prototype.copyWithin()

Array.copyWithin()このメソッドは、指定された配列の内容を別の場所にコピーし、元の配列の値で上書きします。これは、target、start、end の 3 つのパラメータを受け入れます。

• targetこの場所にコピーされた添字インデックスを表します。

• startはendコピーする部分の開始位置と終了位置を表します（開始位置の要素はコピーされた部分に含まれ、終了位置の要素は含まれません）。

    如果有需要，方法会在进行拷贝操作前将数组缩小或扩大为所需大小。
  

copyWithin()次の例は、このメソッドの使用方法を示しています。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 4);
console.log(arr);  // output: [4, 2, 3, 4, 5]

上に示したように、最初に 5 つの整数の配列を定義し、それを変数に割り当てますarr。次に、arr.copyWithin()メソッドを使用して、配列インデックスから始まる項目を3配列インデックスにコピーし0、元の項目を上書きします前三项。このcopyWithin() メソッドは原数组に作用するため、コピーされた値は元の配列の最初の位置から始まります。

このメソッドのパラメータを詳しく説明しましょう。

• target: 必須パラメータ。この位置からデータの置き換えを開始します。負の数の場合は、array.length + target から開始することを意味します (つまり、配列の末尾から逆にカウントします)。
• start: 必須パラメータ。この位置からデータの読み取りを開始します。デフォルトは 0 です。負の数の場合は、array.length + start から読み取ることを意味します (つまり、配列の末尾から逆にカウントします)。
• end: オプションのパラメータ。この位置に到達する前にデータの読み取りを停止します。デフォルトは array.length です。負の数の場合は、array.length + end からの読み取りを停止することを意味します (つまり、配列の末尾から逆にカウントします)。

注意しなければならないことは次のとおりです。

• target、startおよびendパラメータはすべて整数である必要があります。そうでない場合は、自動的に丸められます。
• このメソッドは元の配列を変更するconstため、宣言された配列では使用できません。

要約すると、メソッドは配列要素を交換、移動、コピーするための高速なArray.copyWithin()方法を提供します。

5. Array.prototype.find() と Array.prototype.findIndex()

• Array.prototype.find()このメソッドは、条件を満たす最初の配列要素を検索し、その要素を返すために使用されます。同様に、
• Array.prototype.findIndex()このメソッドは、条件を満たす最初の要素を見つけて、その要素のインデックスを返すこともできます。一致する要素が見つからない場合は、その要素が返されますundefined。

たとえば、[1,2,3,4,5]配列内で 3 より大きい最初の数値を見つけるには、次のメソッドを使用できます。

const arr = [1,2,3,4,5];
const index = arr.find(item => item > 3);
const index2 = arr.findIndex(item => item > 3);
console.log(index);  // 4
console.log(index2); // 3

6. Array.prototype.some() と Array.prototype.every()

• Array.prototype.some()メソッドは、配列内の 1 つ以上の要素が基準を満たすかどうかをチェックします。このメソッドは、true または false のブール値を返します。-
• Array.prototype.every()このメソッドは、配列内のすべての要素が条件を満たしているかどうかをチェックします。条件が満たされる場合は true を返し、そうでない場合は false を返します。

たとえば、[2, 3, 4, 5]配列内に 3 より大きい数値があるかどうかを確認するには、次のメソッドを使用できます。

const arr = [2,3,4,5];
const hasGreaterThanThree = arr.some(item => item > 3);
const allGreaterThanOne = arr.every(item => item > 1);
console.log(hasGreaterThanThree); // true
console.log(allGreaterThanOne);  // true

7. Array.prototype. flat()

Array.prototype.flat()このメソッドは、配列を再帰的に展開し、入れ子になった配列を 1 次元配列に変換するために使用されます。このメソッドのデフォルトの展開の深さは で1、展開の深さを示すオプションの整数パラメータを受け入れることができます。引数が の場合Infinity、再帰は 1 次元配列に展開されるまで実行されます。

たとえば、[[1,2,3],[4,5]]ネストされた配列を 1 次元配列に展開するには、次のメソッドを使用できます。

const arr = [[1,2,3],[4,5]];
const flattened = arr.flat();
console.log(flattened); // [1, 2, 3, 4, 5]

展開するレイヤーの数がすでにわかっている場合は、その値をパラメーターとしてflatメソッドに渡すことができます。

たとえば、[[1,[2,3]],[4,[5,6]]]ネストされた配列を 1 次元配列に展開します。

const arr = [[1,[2,3]],[4,[5,6]]];
const flattenedOnce = arr.flat(1);
console.log(flattenedOnce); // [1, [2, 3], 4, [5, 6]]
const flattenedTwice = arr.flat(2);
console.log(flattenedTwice); // [1, 2, 3, 4, 5, 6]

flat()このメソッドは元の配列を変更しませんが、元のデータを変更しないコンテキストに適した新しい配列を返すことに注意してください。元の配列にnullまたは が含まれている場合undefined、それらは自動的にスキップされます。

もう 1 つ注意すべき点は、flat()この方法は便利ですが、パフォーマンス上の問題やロジック上の問題を引き起こす可能性があることです。flat()非常に深くネストされた配列の場合、メソッドを直接使用すると、コードの可読性と保守性が失われます。深さが不確かなネストされた配列がある場合は、再帰的方法を使用して配列を拡張するか、拡張中のパフォーマンスとロジックの問題を回避するためにサードパーティのライブラリを使用することが最善です。

8、Array.prototype. flatMap()

Array.prototype.flatMap()このメソッドは、ES2019 標準で導入された新しい配列メソッドであり、Array.prototype.map()とArray.prototype.flat()メソッドの機能を組み合わせたものです。flatMap()このメソッドは、特定のルールに従って配列を新しい配列に「フラット化flat()」できます。これは flat() メソッドに非常に似ていますが、より柔軟です。

flatMap()このメソッドは、まず メソッドを使用して、指定されたルールに従って配列要素を操作し、次にmap()処理された配列を1 次元配列に「平坦化」します。map() メソッドおよび flat() メソッドとの違いは、 flatMap() メソッドはこれら 2 つの操作を組み合わせており、map() および flat() を使用するときに追加のコードを記述する必要がないことです。

たとえば、配列があり、各要素を 2 で乗算し、次のメソッドを使用できます。

const arr = [1, 2, 3, 4];
const result = arr.flatMap(x => x * 2).filter(x => x % 2 === 0);
console.log(result); // [4, 8]

上記のコードでは、まずmap()メソッド を使用して配列内の各要素を乗算し2、次にflat()メソッド を使用して結果を 1 次元配列に展開し、 メソッド をfilter()使用して偶数の値をフィルタリングします。

認識しなければならないのは、

• flatMap()このメソッドは、nullまたはの値を持つ配列要素をスキップするundefinedため、これら 2 つの要素を考慮する必要がなく、より明確で簡潔なコードが得られます。
• flatMap()状況によってはメソッドが発生する場合があります越界异常的问题ので、使用する場合は範囲​​外などに十分注意する必要があります。

9. Array.prototype.keys()、Array.prototype.entries()およびArray.prototype.values()

keys()ES6 では、entries()と の3 つの反復メソッドが配列プロトタイプに追加されていますvalues()。

Array.prototype.keys()このメソッドは、配列内の各要素のインデックスを含む反復子を返します。

const arr = ['a', 'b', 'c'];
const iterator = arr.keys();
console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1
console.log(iterator.next().value); // 2

同様に、Array.prototype.entries()このメソッドは、配列内の各要素のキーと値のペアを含む反復子を返します。

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();
console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']

Array.prototype.values()配列内の各要素の値を含む反復子を返します。

const arr = ['a', 'b', 'c'];
const iterator = arr.values();
console.log(iterator.next().value); // 'a'
console.log(iterator.next().value); // 'b'
console.log(iterator.next().value); // 'c'

10. Array.prototype.reduceRight()

Array.prototype.reduceRight()メソッドはメソッドに非常に似ていますreduce()が、走査の順序は後ろから前になります。

const arr = ['a', 'b', 'c'];
const result = arr.reduceRight((prev, cur) => prev + cur);
console.log(result); // 'cba'

11. Array.prototype.sort()

Array.prototype.sort()配列をソートするためにメソッドが使用され、何らかのベンチマークに基づいてソートするために関数を渡すことができます。ES6 より前では、並べ替えは左から右に行われていたため、並べ替えの結果に影響を与える可能性があります。ES6 では、Array.prototype.sort()メソッドはデフォルトで安定した並べ替えアルゴリズムを使用し、Unicode文字順に並べ替えます。

const arr = [1,4,3,8,5,2];
arr.sort((a,b) => a-b);
console.log(arr); // [1, 2, 3, 4, 5, 8]

12. Array.prototype.includes()

Array.prototype.includes()このメソッドは、配列に要素が含まれているかどうかを判断するために使用され、要素が含まれている場合は戻りtrue、そうでない場合は戻りますfalse。メソッドとは異なりArray.prototype.indexOf()、includes()メソッドは のNaN存在のチェックをサポートします。

たとえば、[1, 2, 3]配列に要素2と が含まれているかどうかを確認するには4、次のメソッドを使用できます。

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

13. Array.prototype.findIndex()

Array.prototype.findIndex()このメソッドは、条件に一致する配列内の最初の要素のインデックスを返します。または、条件に一致する要素がない場合は、インデックスを返します-1。

たとえば、より大きい配列内の[1, 2, 3, 4, 5]最初の要素のインデックスを見つけるには、次のメソッドを使用できます。3

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex(item => item > 3);
console.log(index); // 3

14. 配列分割構文（配列分割）

ES6 では配列分割構文が導入され、配列の要素を変数に割り当てることで、要素にすばやくアクセスして使用できるようになりました。

たとえば、[1, 2, 3]配列内の要素を変数 および にそれぞれ割り当てるxにyはz、次のメソッドを使用できます。

const [x, y, z] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

これに基づいて、スプレッド演算子を使用して配列内の残りの要素を取得することもできます。

const [x, ...rest] = [1, 2, 3];
console.log(x);        // 1
console.log(rest);     // [2, 3]

15. Array.from() メソッドと Array.of() メソッドの違い

ES6 のArray.from()メソッドとメソッドはArray.of()どちらも新しい配列の作成に使用されますが、動作は若干異なります。

• Array.of()このメソッドは、渡されたパラメータに基づいて新しい配列インスタンスを作成し、渡されたパラメータを要素として新しい配列に追加できます。

  const arr = Array.of(1, 2, 3);
  console.log(arr); // [1, 2, 3]
  

• Array.from()メソッドは、配列のようなオブジェクトまたは反復可能なオブジェクトを配列インスタンスに変換できます。このメソッドはオプションの map() 関数も受け入れます。これを使用して各要素を変換できます。

  const arr1 = Array.from('foo');
  console.log(arr1); // ['f', 'o', 'o']
  
  const arr2 = Array.from([1, 2, 3], x => x * 2);
  console.log(arr2); // [2, 4, 6]
  

16. Push()、pop()、shift()、unshift()メソッドの改善

// push() 方法示例
const arr1 = [1, 2, 3];
arr1.push(4, 5); // 在数组尾部插入多个元素
console.log(arr1); // [1, 2, 3, 4, 5]

// pop() 方法示例
const arr2 = [1, 2, 3];
const last = arr2.pop(); // 弹出数组末尾元素
console.log(last); // 3
console.log(arr2); // [1, 2]

// shift() 方法示例
const arr3 = [1, 2, 3];
const first = arr3.shift(); // 弹出数组头部元素
console.log(first); // 1
console.log(arr3); // [2, 3]

// unshift() 方法示例
const arr4 = [1, 2, 3];
arr4.unshift(-1, 0); // 在数组头部插入多个元素
console.log(arr4); // [-1, 0, 1, 2, 3]

複数のパラメーターを渡すことにより、配列メソッドは複数の要素を配列の末尾または先頭に一度に追加push()できます。unshift()Push() メソッドまたは unshift() メソッドを複数回使用する場合と比較して、このメソッドはより効率的かつ簡潔です。

17. map()、reduce()、filter() メソッドのチェーン呼び出し

ES6 の配列の 、map()、reduce()メソッドfilter()はすべて連鎖呼び出しをサポートしているため、配列をよりエレガントに操作できるようになります。

たとえば、次のコードは、reduce()およびfilter()メソッド チェーン呼び出しを使用して、配列内の 2 より大きいすべての要素を乗算します。

const arr = [1, 2, 3, 4];

const result = arr.filter(item => item > 2)
                 .reduce((prev, curr) => prev * curr, 1);

console.log(result); // 12

上記のコードでは、まずfilter()メソッド を使用して 2 より大きい要素をフィルターで除外し、次にreduce()メソッド を使用してこれらの要素を乗算し、最終的に結果 12 を取得します。呼び出しを連鎖させると、不要な中間変数が減り、コードがより簡潔で効率的になります。

18. Array.prototype[@@species]

ES6 には、派生クラスを作成するための新しい属性があります@@species。これは、派生クラスのコンストラクターを作成するために使用される関数オブジェクトです。派生クラスでは、Symbol.speciesプロパティがオーバーライドされると、オーバーライドされた@@speciesプロパティを使用して新しいインスタンスを作成します。

MyArray次のサンプル コードでは、 Array クラスを継承し、Symbol.species属性をオーバーライドする という名前の派生クラスを定義します。

class MyArray extends Array {
    
    
  static get [Symbol.species]() {
    
     return Array; }
}

const arr1 = new MyArray(1, 2, 3);

const arr2 = arr1.map(x => x * x);

console.log(arr1 instanceof MyArray); // true
console.log(arr2 instanceof MyArray); // false
console.log(arr2 instanceof Array); // true

上記のコードでは、MyArrayクラスはSymbol.speciesプロパティをオーバーライドしてそれを返すArrayため、map()メソッドの呼び出し後に返される新しい配列インスタンスは MyArray 型ではなく Array 型になります。

要約する

ES6 の配列 API には多くの変更が加えられ、配列の操作がより効率的になり、コードがより簡潔になりました。日常の開発プロセスでは、これらの API をさらに活用して、コードの作業効率と開発品質を向上させることができます。