この記事では、ECMAScript 6を紹介します。新しい配列操作方法と、既存のブラウザーにこれらの新しい配列機能を適用する方法について説明します。
注:コンストラクターとクラスという用語を交互に使用します。
クラスメソッド
配列自体にある方法。
array.from(arraylike、mapfunc?、thisarg?)
array.from()の基本機能は、2種類のオブジェクトを配列に変換することです。
配列のようなオブジェクト
このクラスのオブジェクトには、長さとインデックスのプロパティがあります。 DOMオペレーターの結果は、document.getElementsByClassName()などのこのクラスに属します。
反復オブジェクト
値を取るときは、一度に1つの要素のみを使用できます。 Arrayは、ECMAScriptの新しい配列構造、マップ(マップ)、セット(セット)など、反復可能です。
次のコードは、配列オブジェクトを配列に変換する例です。
コードコピーは次のとおりです。
let lis = document.queryselectorall( 'ul. -fancy li');
array.from(lis).foreach(function(li){
console.log(node);
});
QuerySeLectorall()の結果は配列ではなく、foreach()の方法はありません。これが、使用する前にこの方法を配列に変換する必要がある理由です。
array.from()を介してマッピングを使用する
array.from()は、map()を使用してジェネリックに代わるものでもあります。
コードコピーは次のとおりです。
let spans = 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つの方法の2番目のパラメーターは、矢印関数です。
この例では、document.queryselectorall()の結果は、アレイではなく、別のクラス配列オブジェクトです。これが、map()を直接呼び出すことができない理由です。最初の例では、foreach()を使用するために、クラス配列オブジェクトを配列に変換します。ここでは、一般的なメソッドと2パラメーターバージョンのarray.from()を使用して中間ステップを省略します。
穴
array.from()は、不足している要素 - 未定義の要素として扱われる配列内の穴を無視します。
コードコピーは次のとおりです。
> array.from([0、、2])
[0、未定義、2]
これは、array.from()を使用して配列を作成または設定できることを意味します。
コードコピーは次のとおりです。
> array.from(new Array(5)、()=> 'a')
['a'、 'a'、 'a'、 'a'、 'a'、 'a']
> array.from(new Array(5)、(x、i)=> i)
[0、1、2、3、4]
アレイに固定値を入力する場合は、array.prototype.fill()(以下を参照)がより良い選択です。最初のものは、上記の例の2つの方法です。
from()アレイ(配列)サブクラス
array.from()の別の使用シナリオは、配列オブジェクトまたは反復可能なオブジェクトのインスタンスを配列サブクラスに変換することです。アレイサブクラスMyArrayを作成し、このタイプのオブジェクトをMyArrayのインスタンスに変換する場合は、myArray.from()を使用できます。これを使用できる理由は、ECMAScriptで6コンストラクターが継承するためです(親クラスコンストラクターはサブクラスコンストラクターのプロトタイプです)。
コードコピーは次のとおりです。
クラスMyArrayは配列を拡張します{
...
}
InstanceOfMyArray = myArray.from(aNiterable);
この関数をマッピングと組み合わせて、結果コンストラクターを制御するマップ操作を完了することができます。
コードコピーは次のとおりです。
// from()レシーバーを介して結果のコンストラクターを決定します
//(この場合、MyArray)
InstanceofMyArray = myArray.from([1、2、3]、x => x * x);
// map():結果は常に配列のインスタンスです
let instanceofarray = [1、2、3] .map(x => x * x);
array.of(... items)
値のセットを配列に変換する場合は、配列ソーステキスト(配列リテラル)を使用する必要があります。特に、値が1つだけで、それが数字である場合、アレイのコンストラクターはストライクになります。詳細については、参照してください。
コードコピーは次のとおりです。
>新しい配列(3、11、8)
[3、11、8]
>新しい配列(3)
[、、、]
>新しい配列(3.1)
rasinError:無効な配列長
したがって、値のセットをサブコンストラクタのインスタンスに変換したい場合、どうすればよいですか?これは、array.of()の値です(覚えておいてください、アレイサブコストラクタは、もちろん()を含むすべての配列メソッドを継承します)。
コードコピーは次のとおりです。
クラスMyArrayは配列を拡張します{
...
}
console.log(myarray.of(3、11、8)myArrayのインスタンス); // 真実
console.log(myarray.of(3).length === 1); // 真実
Array.of()は、Array()を処理する奇妙な方法なしで、Arrayで値をラップするのに非常に便利です。ただし、array.prototype.map()にも注意してください。ここにはピットがあります。
コードコピーは次のとおりです。
> ['a'、 'b']。マップ(array.of)
[['a'、0、['a'、 'b']]、
['b'、1、['a'、 'b']]]
> ['a'、 'b']。map(x => array.of(x))//
[['A']、['B']]
> ['a'、 'b']。map(x => [x])// best(この場合)
[['A']、['B']]
ご覧のとおり、Map()は3つのパラメーターをコールバックに渡します。最後の2つはしばしば見落とされがちです(詳細)。
プロトタイプメソッド
配列のインスタンスには、多くの新しい方法があります。
アレイ上の反復
次の方法は、配列の反復を完了するのに役立ちます。
コードコピーは次のとおりです。
array.prototype.entries()
array.prototype.keys()
array.prototype.values()
上記の各メソッドは、一連の値を返しますが、配列としては返されません。それらは、イテレーターを介して1つずつ表示されます。例を見てみましょう(Array.from())を使用して、iteratorの内容をArrayに配置します。
コードコピーは次のとおりです。
> 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のエントリ()とfor-ofループを組み合わせて、反復オブジェクトをキー価値ペアに簡単に分解できます。
コードコピーは次のとおりです。
for([index、elem]の['a'、 'b']。エントリー()){
console.log(index、elem);
}
注:このコードは、最新のFirefoxブラウザで既に実行できます。 T firefox。
配列要素を見つけます
array.prototype.find(predicate、thisarg?)は、コールバック関数を満たす最初の要素を返します。要素が条件を満たしていない場合、未定義に戻ります。例えば:
コードコピーは次のとおりです。
> [6、-5、8]。
-5
> [6、5、8]。
未定義
array.prototype.findindex(Predicate、thisarg?)
コールバック関数を満たす最初の要素のインデックスを返します。満足のいく要素が見つからない場合、-1が返されます。例えば:
コードコピーは次のとおりです。
> [6、-5、8] .findindex(x => x <0)
1
> [6、5、8] .findindex(x => x <0)
-1
どちらも穴を無視します。つまり、未定義の要素に注意を払っていません。コールバックの完了関数署名は次のとおりです。
述語(要素、インデックス、配列)
findindex()を介してnanを見つける
array.prototype.indexof()にはよく知られている制限があります。つまり、NANSを見つけることができません。アイデンティティ(===)を使用して一致する要素を見つけるため:
コードコピーは次のとおりです。
> [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(value、start?、end?)
指定された値を使用して、配列を入力します。
コードコピーは次のとおりです。
> ['a'、 'b'、 'c']。fill(7)
[7、7、7]
穴は特別な治療で処理されません。
コードコピーは次のとおりです。
> new Array(3).fill(7)
[7、7、7]
塗りつぶしの開始と終了を制限することもできます。
コードコピーは次のとおりです。
> ['a'、 'b'、 'c']。fill(7、1、2)
['a'、7、 'c']
新しい配列メソッドはいつ使用できますか?
ブラウザで使用できる方法がいくつかあります。