ECMAScript 6 では、新しい配列操作メソッドと JavaScript スキルのプレビューが間もなく提供されます。

この記事では、ECMAScript 6 がもたらす新しい配列操作メソッドと、これらの新しい配列機能を既存のブラウザーに適用する方法を紹介します。

注: コンストラクターとクラスという用語を同じ意味で使用します。

クラスメソッド
Array 自体が所有するメソッド。

Array.from(arrayLike, mapFunc?, thisArg?)

Array.from() の基本的な機能は、2 種類のオブジェクトを配列に変換することです。

配列のようなオブジェクト

このタイプのオブジェクトには長さとインデックスのプロパティがあります。 DOM 演算子の結果は、document.getElementsByClassName() などのこのクラスに属します。

反復可能なオブジェクト

このタイプのオブジェクトが値を取る場合、一度に 1 つの要素しか取ることができません。 ECMAScript、Map、Set の新しい配列構造と同様に、配列は反復可能です。

次のコードは、配列のようなオブジェクトを配列に変換する例です。

コードをコピーします コードは次のとおりです:

let lis = document.querySelectorAll('ul.fancy li');
Array.from(lis).forEach(function (li) {
console.log(ノード);
});

querySelectorAll() の結果は配列ではなく、forEach() メソッドはありません。このため、このメソッドを使用する前に配列に変換する必要があります。

Array.from() 経由でマッピングを使用する

Array.from() は、ジェネリックで map() を使用する代わりの方法でもあります。

コードをコピーします コードは次のとおりです:

letspans = document.querySelectorAll('span.name');
// map()、一般的に:
let names1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from():
let names2 = Array.from(spans, s => s.textContent);

両方のメソッドの 2 番目のパラメーターはアロー関数です。

この例では、document.querySelectorAll() の結果は配列ではなく、配列のようなオブジェクトです。これが、map() を直接呼び出すことができない理由です。最初の例では、forEach() を使用するために、配列のようなオブジェクトを配列に変換します。ここでは、ジェネリック メソッドと 2 パラメーター バージョンの Array.from() を使用し、中間ステップを省略します。

穴

Array.from() は、配列内の欠落要素 (ホール) を無視し、未定義の要素として扱います。

コードをコピーします コードは次のとおりです:

> 配列.from([0,,2])
[ 0, 未定義, 2 ]

これは、Array.from() を使用して配列を作成または埋めることができることを意味します。

コードをコピーします コードは次のとおりです:

> Array.from(new Array(5), () => 'a')
[ 'a', 'a', 'a', 'a', 'a' ]
> Array.from(new Array(5), (x,i) => i)
[ 0、1、2、3、4 ]

配列に固定値を入力したい場合は、Array.prototype.fill() (以下を参照) を使用することをお勧めします。 1 つ目は、上記の例の 2 つの方法です。

配列サブクラスの

from()

Array.from() の別の使用例は、配列のようなオブジェクトまたは反復可能オブジェクトを配列 (Array) サブクラスのインスタンスに変換することです。 Array サブクラス MyArray を作成し、そのようなオブジェクトを MyArray のインスタンスに変換したい場合は、単純に MyArray.from() を使用できます。これが使用できる理由は、ECMAScript 6 ではコンストラクターが継承されるためです (親クラス コンストラクターはそのサブクラス コンストラクターのプロトタイプです)。

コードをコピーします コードは次のとおりです:

class MyArray extends Array {
...
}
letinstanceOfMyArray = MyArray.from(anIterable);

この機能をマッピングと組み合わせて、結果コンストラクターを制御する場所でマップ操作を完了できます。

コードをコピー コードは次のとおりです:

// from() – レシーバー
を介して結果のコンストラクターを決定します // (この場合、MyArray)
letinstanceOfMyArray = MyArray.from([1, 2, 3], x => x * x);
// map(): 結果は常に Array
のインスタンスです letinstanceOfArray = [1, 2, 3].map(x => x * x);
Array.of(...items)

値のセットを配列に変換したい場合は、配列リテラルを使用する必要があります。特に、値が 1 つしかなく、それが数値である場合、配列コンストラクターは失敗します。詳細については、このページを参照してください。

コードをコピーします コードは次のとおりです:

> 新しい配列(3, 11, 8)
[ 3、11、8 ]
> 新しい配列(3)
[、、、、]
> 新しい配列(3.1)
RangeError: 配列の長さが無効です

値のセットを数値サブコンストラクターのインスタンスに変換したい場合はどうすればよいでしょうか?これは Array.of() の値です (配列サブコンストラクターは、もちろん of() を含むすべての配列メソッドを継承することを思い出してください)。

コードをコピーします コードは次のとおりです:

class MyArray extends Array {
...
}
console.log(MyArray.of(3, 11, 8) instanceof MyArray); // true
console.log(MyArray.of(3).length === 1); // true

Array.of() は、Array() のような奇妙な処理メソッドを使わずに、配列内の値をラップしてネストするのに非常に便利です。ただし、Array.prototype.map() にも注意してください。ここには落とし穴があります:

コードをコピーします コードは次のとおりです:

> ['a', 'b'].map(Array.of)
[ [ 'a', 0, [ 'a', 'b' ] ],
[ 'b', 1, [ 'a', 'b' ] ] ]
> ['a', 'b'].map(x => Array.of(x)) // より良い
[ [ 'a' ]、[ 'b' ] ]
> ['a', 'b'].map(x => [x]) // (この場合)
[ [ 'a' ]、[ 'b' ] ]

ご覧のとおり、map() は 3 つのパラメータをコールバックに渡します。最後の 2 つは見落とされがちです (詳細)。

プロトタイプメソッド
多くの新しいメソッドが配列インスタンスで使用できるようになります。

配列の反復

次のメソッドは、配列内の反復を完了するのに役立ちます:

コードをコピーします コードは次のとおりです:

Array.prototype.entries()
Array.prototype.keys()
Array.prototype.values()

上記の各メソッドは値の文字列を返しますが、配列としては返しません。これらはイテレータを通じて次々に表示されます。例を見てみましょう (Array.from() を使用してイテレータの内容を配列に入れます):

コードをコピーします コードは次のとおりです:

> Array.from([ 'a', 'b' ].keys())
[ 0, 1 ]
>Array.from([ 'a', 'b' ].values())
[ 'a'、'b' ]
>Array.from([ 'a', 'b' ].entries())
[ [ 0, 'a' ],
[ 1, 'b' ] ]

ECMAScript 6 では、entrys() と for-of ループを組み合わせて、反復されたオブジェクトをキーと値のペアに簡単に分解できます。

コードをコピーします コードは次のとおりです:

for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}

注: このコードは、最新の Firefox ブラウザーですでに実行できます。 Firefox。

配列要素を検索

Array.prototype.find(predicate, thisArg?) は、コールバック関数を満たす最初の要素を返します。条件を満たす要素がない場合は、unknown が返されます。例:

コードをコピーします コードは次のとおりです:

> [6, -5, 8].find(x => x -5
> [6, 5, 8].find(x => x 未定義
Array.prototype.findIndex(述語, thisArg?)

は、コールバック関数を満たす最初の要素のインデックスを返します。条件を満たす要素が見つからない場合は、-1 が返されます。例:

コードをコピーします コードは次のとおりです:

> [6, -5, 8].findIndex(x => x 1
> [6, 5, 8].findIndex(x => x -1

どちらの find* メソッドもホールを無視します。つまり、未定義の要素には注意を払いません。コールバックの完了関数シグネチャは次のとおりです:

述語(要素、インデックス、配列)
findIndex() を通じて NaN

を検索します

Array.prototype.indexOf() には、NaN を見つけることができないというよく知られた制限があります。これは一致する要素を見つけるために ID (===) を使用するためです:

コードをコピーします コードは次のとおりです:

> [NaN].indexOf(NaN)
-1

findIndex() を使用すると、Object.is() を使用できます。これにより、このような問題は発生しません。

コードをコピーします コードは次のとおりです:

> [NaN].findIndex(y => Object.is(NaN, y))
0

より一般的なアプローチを採用して、ヘルパー関数 elemIs() を作成することもできます。

コードをコピーします コードは次のとおりです:

> 関数 elemIs(x) { return Object.is.bind(Object, x) }
> [NaN].findIndex(elemIs(NaN))
0
Array.prototype.fill(値, 開始?, 終了?)

配列に指定された値を入力します:

コードをコピーします コードは次のとおりです:

> ['a', 'b', 'c'].fill(7)
[ 7、7、7 ]

ホールには特別な処理は行われません:

コードをコピーします コードは次のとおりです:

> 新しい配列(3).fill(7)
[ 7、7、7 ]

充填の開始と終了を制限することもできます:

コードをコピーします コードは次のとおりです:

> ['a', 'b', 'c'].fill(7, 1, 2)
[ 'a', 7, 'c' ]

新しい配列メソッドはいつ使用できますか?
いくつかのメソッドはブラウザーですでに利用可能です。