[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
は特別なオブジェクトであり、通常のオブジェクトとの違いは、要素の順次アクセスと格納だけではありません。もう 1 つの重要な違いは、配列が反復可能であることです。つまり、 for ... ofステートメントを使用してすべての要素にアクセス (反復) できることです。
単純に小さな実験を行うことができます:
let arr = [1,2,3,4,5]for(let val of arr){
console.log(val)}コードの実行結果:
上記のコードは配列の反復機能を使用しているだけで、配列要素にアクセスするときに要素の添字を使用する必要はありません。
通常のオブジェクトに対してfor ... ofステートメントを使用するとどうなるでしょうか?
obj = { にします
名前:「シャオミン」、
age:12,}for(let para of obj){ //コードはエラーを報告します console.log(para)}実行の効果は次のとおりです。
これは、通常のオブジェクトと配列の間に反復可能なギャップがあることを証明しています。反復関数を持つオブジェクトを反復可能オブジェクトと呼びます。
オブジェクトを反復可能にしたい場合は、 Symbol.iteratorというメソッドをオブジェクトに追加する必要があります (特にオブジェクトを反復可能にする組み込みのSymbol )。
メソッド関数には次のものが含まれます。
for ... ofループを使用してオブジェクトを反復する場合、 Symbol.iteratorメソッドが呼び出され、このメソッドは反復子( next()メソッドを持つオブジェクト) を返す必要があります。for ... ofイテレータのnext()メソッドを継続的に呼び出して次の要素を取得します。next()メソッドによって返されるコンテンツは、 {done:Boolean,value:any}の形式に準拠している必要があります。done done:trueの場合、ループは終了します。それ以外の場合、 valueは次の値です。イテレータ: イテレータは、
C++などの言語から借用した概念です。イテレータの原理は、データ コレクション内の要素を指すことも、移動することもできます。他の要素を取得します。イテレータは、配列内の添え字の展開に似ています。リンク リスト (List)、セット (Set)、マップ (Map) などのさまざまなデータ構造には、対応するイテレータがあります。
JSのイテレーターは、この操作のために特別に設計されています。毎回取得される反復子は、最初は常に最初の要素を指し、データ セットの最後の要素が取得されるまで反復子はnext()動作のみを持ちます。イテレータの位置を柔軟に移動することはできないため、イテレータのタスクは、データ セット内の要素を特定の順序で走査することです。
反復可能なオブジェクトを実装します:
let obj = {
から:1、
to:5,}obj[Symbol.iterator] = function(){
//イテレータを返す return {
現在:this.from、
最後:this.to、
次（）{
if(this.current<this.last){
return {done:false,value:this.current++}
}それ以外{
return {done:true}//反復の終了}
}
}}for(obj のパラを許可){
console.log(para)}コード実行の効果:
上記のオブジェクトは反復可能ですが、反復に使用されるマテリアルはオブジェクトではなく、 Symbol.iteratorによって返される反復子 (オブジェクトでもあります) であることに注意してください。
上記のコードは、イテレータ オブジェクトを返す組み込み関数Symbol.iterator()を構築します。別の方法でイテレータを実装することもできます。オブジェクト自体をイテレータにします。
let obj = {
から:1、
〜:5、
[Symbol.iterator](){
this.current = this.from;
return this;//オブジェクト自体を返す},
next(){//next メソッドをオブジェクトに追加します if(this.current<this.to){
return {done:false,value:this.current++}
}それ以外{
{完了:true} を返す
}
}}for(let para of obj){
console.log(para)}コードの実行結果は上の図と同じです。
これによりコードはより簡潔になりますが、新しい反復可能なオブジェクトは生成されないため、2 つの
for ... ofループを実行して同じオブジェクトを同時に反復することはできませんが、同じオブジェクトに対して 2 つの並列反復を実行することは非常に困難です。レア。
反復可能オブジェクトの概念を要約すると、
いわゆる反復可能オブジェクトは、通常のオブジェクトよりもSymbol.iteratorと呼ばれるメソッドが 1 つ多い通常のオブジェクトです。このメソッドは反復子を返します。
あるいは、 Symbol.iteratorとnextメソッドを持つオブジェクトも反復可能オブジェクトです。
let str = '123'for(let c of str){のように、 for...ofステートメントを使用して簡単に反復できます。
console.log(c)}これはサロゲート ペア ( UTF-16拡張文字) にも有効です:
let str = '...'for(let c of str){
console.log(c)}実行による効果は次のとおりです。
反復子を使用できるステートメントfor...of of だけでなく、明示的に反復子を呼び出すこともできます。
let str = '12345'let itr = str[Symbol.iterator]()while(true){
let result = itr.next()
if(result.done)break;
console.log(result.value)}コード実行の効果:
上記のコードは、文字列の文字を走査する操作を実行します。反復可能なオブジェクトは、もうそれほど神秘的ではないと思いませんか。
Symbol.iterator iterableの点では非常に似ていますが、どちらも内部要素に簡単にアクセスできますが、この 2 つの間には明らかな違いがあります。
array-like配列のようなオブジェクト: 数値インデックスを持ち、 length属性を持ちます。文字列は、配列のようなオブジェクトであっても反復可能なオブジェクトです。
反復可能なオブジェクトや配列のようなオブジェクトは通常、配列ではありません。反復可能なオブジェクトや配列のようなオブジェクトを配列に変換したい場合は、 Array.fromメソッドを使用する必要があります。
Array.fromを使用して文字列を配列に変換します。
let str = '123' let arr = Array.from(str)console.log(arr)
コードの実行結果は次のとおりです。
カスタムの配列のようなオブジェクトを配列に変換します。
let obj = {
0:'0'、
1:'1'、
2:'2'、
length:3}let arr = Array.from(obj)console.log(arr)コードの実行結果:
Array.fromの完全な構文:
Array.from(obj[, mapFunc, thisArg])
mapFuncメソッドは、配列を生成する前に各反復可能要素または配列のような要素で呼び出されます。mapFunc mapFuncメンバー メソッドの場合は、 thisArg使用できます。 thisポインタを提供します。
例:
let str = '12345'let arr = Array.from(str,itm=>+itm)console.log(arr)
コードの実行結果:
ここでは、マッピング関数を使用して、生成される文字配列を数値配列に変換します。
for...of 構文を使用できるfor...of 、反復可能オブジェクトと呼ばれます。Symbol.iteratorメソッドを実装するオブジェクトです。Symbol.iteratorSymbol.iteratorは、反復子を返しますnextこのメソッドは次の要素の値を返します。nextメソッドの戻り値は{done:Boolean,value:nextVal}の形式を満たす必要があります。done done:trueの場合、Array.fromクラス配列を変換し、 ;
[関連する推奨事項: JavaScript ビデオ チュートリアル、Web フロントエンド]
上記は、JavaScript クラス配列と反復可能オブジェクトの実装原理の詳細な説明です。 source code network!