JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

序文

今日は、JavaScript の基本とループ トラバーサル メソッドをいくつか見ていきます。

1. 配列走査法

1. 各()

forEach メソッドは、配列の各要素を呼び出し、その要素をコールバック関数に渡すために使用されます。配列内の各値に対してコールバック関数が呼び出されます。構文は次のとおりです。

array.forEach(関数(現在の値、インデックス、arr)、この値)

このメソッドの最初のパラメーターはコールバック関数で、必須であり、次の 3 つのパラメーターがあります。

• currentValue: 必須。現在の要素
• インデックス: オプション。現在の要素のインデックス値。
• arr: オプション。現在の要素が属する配列オブジェクト

arr = [1,2,3,4,5]とする
arr.forEach((アイテム、インデックス、arr) => {
  console.log(インデックス+":"+アイテム)
})

このメソッドには、コールバック関数内で this 変数をバインドするための 2 番目のパラメーターを指定することもできます (ただし、アロー関数には this がないため、コールバック関数をアロー関数にすることはできません)。

arr = [1,2,3,4,5]とする
arr1 = [9,8,7,6,5]とする
arr.forEach(関数(項目, インデックス, arr){
  console.log(this[インデックス]) // 9 8 7 6 5
}, 編曲1)

知らせ：

• forEach メソッドは元の配列を変更せず、戻り値もありません。
• forEach はループを終了するために break または continue を使用することはできません。return を使用すると、効果は for ループで continue を使用するのと同じになります。
• forEach メソッドはオブジェクトを走査することはできず、配列の走査にのみ適用されます。

2. マップ()

map() メソッドは、元の配列の要素に対して関数を呼び出すことによって処理された値を要素とする新しい配列を返します。このメソッドは、元の配列内の要素を順番に処理します。構文は次のとおりです。

配列.map(関数(現在の値、インデックス、arr)、この値)

このメソッドの最初のパラメーターはコールバック関数で、必須であり、次の 3 つのパラメーターがあります。

• currentValue: 必須。現在の要素の値。
• インデックス: オプション。現在の要素のインデックス値。
• arr: オプション。現在の要素が属する配列オブジェクト。

arr = [1, 2, 3]とします。
 
arr.map(アイテム => {
    アイテム + 1 を返します。
})

// 出力: [2, 3, 4]

このメソッドの 2 番目のパラメーターは、パラメーター関数内で this 変数をバインドするために使用され、オプションです。

arr = ['a', 'b', 'c'] とします。
 
[1, 2].map(関数(e) {
    this[e]を返します。
}, 編曲)

// 出力: ['b', 'c']

このメソッドは連鎖させることもできます:

arr = [1, 2, 3]とします。
 
arr.map(アイテム => アイテム + 1).map(アイテム => アイテム + 1)

// 出力: [3, 4, 5]

知らせ：

• map メソッドは空の配列を検出しません。
• map メソッドは配列を走査するときに新しい配列を返し、元の配列は変更しません。
• map メソッドには戻り値があり、それを返すことができます。map コールバック関数は戻り値をサポートしています。
• map メソッドはオブジェクトを走査することはできず、配列の走査にのみ適用されます。

3. 〜のために

for...of ステートメントは、反復可能なオブジェクトを反復処理するループを作成します。 for...of ループは、ES6 で for...in と forEach() の代わりに導入され、新しい反復プロトコルをサポートしています。構文は次のとおりです。

for (反復可能な変数) {
    声明
}

このメソッドは 2 つのパラメータを取ります。

• 変数: 各反復のプロパティ値がこの変数に割り当てられます。
• 反復可能: 列挙可能なプロパティを持ち、反復処理できるオブジェクト。

このメソッドを使用すると、オブジェクト内のキーの値を取得できます。

arr = [とする
    {id:1, 値:'hello'},
    {id:2, 値:'world'},
    {id:3、値:'JavaScript'}
]
for (let item in arr) {
  console.log(アイテム); 
}
// 出力: 0 1 2 

知らせ：

• for of メソッドは、現在のオブジェクトのプロパティのみを走査し、そのプロトタイプ チェーン上のプロパティは走査しません。
• for of メソッドは、配列/クラス配列/文字列/マップ/セットなどの反復子オブジェクトを含むコレクションの走査に適用できます。
• for of メソッドにはイテレータ オブジェクトがないため、プレーン オブジェクトのトラバーサルはサポートされません。オブジェクトのプロパティを反復処理する場合は、 for in メソッドを使用できます。
• ループのトラバースを中断するには、break、continue、return を使用できます。

4. フィルター()

filter() メソッドは配列をフィルタリングするために使用され、条件を満たす要素が返されます。パラメータはコールバック関数です。配列のすべての要素が順番に関数を実行します。戻り値が true の要素が返されます。条件を満たす要素がない場合、空の配列が返されます。構文は次のとおりです。

配列.filter(関数(現在の値、インデックス、arr)、この値)

このメソッドの最初のパラメーターはコールバック関数で、必須であり、次の 3 つのパラメーターがあります。

• currentValue: 必須。現在の要素の値。
• インデックス: オプション。現在の要素のインデックス値。
• arr: オプション。現在の要素が属する配列オブジェクト。

定数arr = [1, 2, 3, 4, 5]
arr.filter(アイテム => アイテム > 2) 

// 出力: [3, 4, 5]

同様に、2 番目のパラメーターもあり、これはパラメーター関数内で this 変数をバインドするために使用されます。

filter() メソッドを使用して、配列から undefined、null、NAN などの値を削除できます。

arr = [1, 未定義, 2, null, 3, false, '', 4, 0] とします
arr.filter(ブール値)

// 出力: [1, 2, 3, 4]

知らせ：

• フィルター メソッドは新しい配列を返し、元の配列を変更しません。
• フィルターメソッドは空の配列を検出しません。
• フィルター メソッドは配列に対してのみ機能します。

5. いくつか()、すべて()

some() メソッドは、配列内の各項目を反復処理します。少なくとも 1 つの要素が条件を満たす場合は true を返し、残りの要素はテストされません。それ以外の場合は false を返します。

every() メソッドは配列内のすべての項目を反復処理し、すべての要素が条件を満たす場合にのみ true を返します。配列内の 1 つの要素が不適切であると検出された場合、式全体が false を返し、残りの要素は再度テストされません。構文は次のとおりです。

両方の構文は次のとおりです。

配列.some(関数(現在の値、インデックス、arr)、この値)
配列.every(関数(現在の値、インデックス、arr)、この値)

両方のメソッドの最初のパラメーターはコールバック関数で、必須であり、次の 3 つのパラメーターがあります。

• currentValue: 必須。現在の要素の値。
• インデックス: オプション。現在の要素のインデックス値。
• arr: オプション。現在の要素が属する配列オブジェクト。

arr = [1, 2, 3, 4, 5]とします。
arr.some(アイテム => アイテム > 4) 

// 出力: true

arr = [1, 2, 3, 4, 5]とします。
arr.every(アイテム => アイテム > 0) 

// 出力: true

知らせ：

• どちらの方法も元の配列を変更せず、ブール値を返します。
• どちらの方法でも空の配列は検出されません。
• どちらの方法も配列にのみ適用できます。

6. 削減()、削減右()

Reduce() メソッドは関数をアキュムレータとして受け取り、配列内の各値 (左から右へ) が削減され、最終的に単一の値に評価されます。 Reduce() は関数 compose の高階関数として使用できます。構文は次のとおりです。

配列.reduce(関数(合計、現在の値、現在のインデックス、arr)、初期値)

Reduce メソッドは、削除された要素や配列に割り当てられていない要素を除いて、配列内の各要素に対してコールバック関数を順番に実行します。コールバック関数は、次の 4 つのパラメータを受け入れます。

• total: 最後のコールバック呼び出しによって返された値、または指定された初期値 (initialValue)。
• currentValue: 現在処理中の要素。
• currentIndex: 現在の要素のインデックス。
• arr: 現在の要素が属する配列オブジェクト。

このメソッドの 2 番目のパラメーターは initialValue で、関数に渡される初期値を表します (コールバックの最初の呼び出しの最初のパラメーターとして)。

arr = [1, 2, 3, 4]とします。
sum = arr.reduce((prev, cur, index, arr) => { とします。
    console.log(前、現在、インデックス);
    prev + cur を返します。
})
console.log(arr, 合計);

出力：

1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

初期値を追加してみましょう。

arr = [1, 2, 3, 4]とします。
sum = arr.reduce((prev, cur, index, arr) => { とします。
    console.log(前、現在、インデックス);
    prev + cur を返します。
}, 5)
console.log(arr, 合計);

出力：

5 1 0
6 2 1
8 3 2
11 4 3
[1, 2, 3, 4] 15

このことから、初期値 initialValue が指定されていない場合、reduce は最初のインデックスをスキップして、インデックス 1 からコールバック メソッドを実行することがわかります。初期値が与えられた場合、実行はインデックス0から始まる。

ReduceRight() メソッドは、reduce() メソッドが配列を順方向に走査するのに対し、reduce() メソッドは配列を逆方向に走査するという点を除いて、reduce() メソッドとほぼ同じです。

arr = [1, 2, 3, 4]とします。
sum = arr.reduceRight((prev, cur, index, arr) => { とします。
    console.log(前、現在、インデックス);
    prev + cur を返します。
}, 5)
console.log(arr, 合計);

出力：

5 4 3
9 3 2
12 2 1
14 1 0
[1, 2, 3, 4] 15

知らせ：

• どちらの方法でも元の配列は変更されません。
• 2 つの方法で初期値を追加すると、元の配列が変更され、初期値が配列の最後に配置されます。
• どちらの方法でも、空の配列に対してコールバック関数は実行されません。

7. find()、findIndex()

find() メソッドは、関数によって決定された配列の最初の要素の値を返します。条件をテストするときに配列内の要素が true を返す場合、find() は条件を満たす要素を返し、後続の値に対して実行関数は呼び出されません。条件を満たす要素がない場合は、undefined を返します。

findIndex() メソッドは、テスト関数に渡された条件を満たす配列内の最初の要素の位置 (インデックス) を返します。配列内の要素が関数の条件で true を返す場合、findIndex() は条件を満たす要素のインデックス位置を返し、後続の値に対して実行関数は呼び出されません。条件を満たす要素がない場合は -1 を返します。

両方のメソッドの構文は次のとおりです。

array.find(関数(現在の値、インデックス、arr)、この値)
array.findIndex(関数(現在の値、インデックス、arr)、この値)

両方のメソッドの最初のパラメーターはコールバック関数で、必須であり、次の 3 つのパラメーターがあります。

• currentValue: 必須。現在の要素;
• インデックス: オプション。現在の要素のインデックス。
• arr: オプション。現在の要素が属する配列オブジェクト。

arr = [1, 2, 3, 4, 5]とします。
arr.find(アイテム => アイテム > 2) 

// 出力: 3

arr = [1, 2, 3, 4, 5]とします。
arr.findIndex(アイテム => アイテム > 2) 

// 出力: 2

find() メソッドと findIndex() メソッドは、異なる結果を返す点を除いてほぼ同じです。

• find(): 条件を満たす最初の値を返します。
• findIndex: 条件を返す最初の値のインデックス値を返します。

知らせ：

• 空の配列の場合、2 つのメソッドは関数を実行しません。
• どちらの方法でも元の配列は変更されません。

8. キー()、値()、エントリ()

これら 3 つのメソッドはすべて配列反復オブジェクトを返しますが、オブジェクトの内容は若干異なります。

• keys() は配列のインデックス値を返します。
• values() は配列の要素を返します。
• entry() はキーと値のペアの配列を返します。

3 つのメソッドの構文は次のとおりです。

配列.キー()
配列.値()
配列.エントリ()

これら 3 つのメソッドにはパラメーターがありません。

let arr = ["バナナ", "オレンジ", "リンゴ", "マンゴー"];
イテレータ1 = arr.keys();
定数イテレータ2 = arr.values() 
定数イテレータ3 = arr.entries() 

for (iterator1の項目) {
  console.log(アイテム);
}
// 出力: 0 1 2 3

for (iterator2の項目を取得) {
  console.log(アイテム);
}
// 出力: バナナ オレンジ リンゴ マンゴー

for (iterator3の項目を取得) {
  console.log(アイテム);
}
// 出力: [0, 'バナナ'] [1, 'オレンジ'] [2, 'リンゴ'] [3, 'マンゴー']

要約:

2. オブジェクトトラバーサルメソッド

1. ～のために

for…in は主にオブジェクトのプロパティをループするために使用されます。ループ内のコードが実行されるたびに、オブジェクトのプロパティが操作されます。構文は次のとおりです。

(オブジェクト内の変数) {
実行するコードブロック
}

パラメータのうち 2 つは次のとおりです。

• var: 必須。指定される変数は、配列要素またはオブジェクト プロパティにすることができます。
• オブジェクト: 必須。反復処理するオブジェクト。

var obj = {a: 1, b: 2, c: 3}; 
 
(変数 i 内の obj) { 
    console.log('キー名:', i); 
    console.log('キー値:', obj[i]); 
}

出力：

キー名: a
キー値: 1
キー名: b
キー値: 2
キー名: c
キー値: 3

知らせ：

• for in メソッドは、現在のオブジェクトの列挙可能なすべてのプロパティを走査するだけでなく、そのプロトタイプ チェーン上のプロパティも走査します。

2. Object.keys()、Object.values()、Object.entries()

これら 3 つのメソッドは、オブジェクトをトラバースするために使用されます。指定されたオブジェクト自身の列挙可能なプロパティ (継承されたプロパティと Symbol プロパティを除く) で構成される配列を返します。配列要素の順序は、オブジェクトを通常どおりトラバースするときに返される順序と一致します。これら 3 つの要素によって返される値は次のとおりです。

• Object.keys(): オブジェクトのキー名を含む配列を返します。
• Object.values(): オブジェクトのキー値を含む配列を返します。
• Object.entries(): オブジェクトのキーと値を含む配列を返します。

obj = { 
  id: 1, 
  名前: 'こんにちは', 
  年齢: 18 
};
console.log(Object.keys(obj)); // 出力: ['id', 'name', 'age']
console.log(Object.values(obj)); // 出力: [1, 'hello', 18]
console.log(Object.keys(obj)); // 出力: [['id', 1], ['name', 'hello'], ['age', 18]

知らせ

• Object.keys() メソッドによって返される配列の値はすべて文字列です。つまり、文字列ではないキー値は文字列に変換されます。
• 結果配列内のプロパティ値はすべて、継承されたプロパティを除く、オブジェクト自体の列挙可能なプロパティです。

3. オブジェクト.getOwnPropertyNames()

Object.getOwnPropertyNames() メソッドは Object.keys() に似ています。これもオブジェクトをパラメータとして受け入れ、オブジェクト自体のすべてのプロパティ名を含む配列を返します。ただし、列挙不可能なプロパティを返すこともできます。

a = ['Hello', 'World'] とします。
 
Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "長さ"]

これらの方法は両方とも、オブジェクト内のプロパティの数をカウントするために使用できます。

var obj = { 0: "a"、1: "b"、2: "c" };
Object.getOwnPropertyNames(obj) // ["0", "1", "2"]
Object.keys(obj).length // 3
Object.getOwnPropertyNames(obj).length // 3

4. オブジェクト.getOwnPropertySymbols()

Object.getOwnPropertySymbols() メソッドは、文字列プロパティを除く、オブジェクト自身の Symbol プロパティの配列を返します。

obj = {a: 1} とします

// オブジェクトに列挙不可能なSymbolプロパティを追加します。Object.defineProperties(obj, {
 [シンボル('baz')]: {
  値: 'シンボル baz'、
  列挙可能: false
 }
})
 
// オブジェクトに列挙可能なSymbolプロパティを追加します。obj[Symbol('foo')] = 'Symbol foo'
 
Object.getOwnPropertySymbols(obj).forEach((キー) => {
 console.log(obj[キー]) 
})

// 出力: シンボル baz シンボル foo

5. Reflect.ownKeys()

Reflect.ownKeys() は、オブジェクト自体のすべてのプロパティを含む配列を返します。これは Object.keys() に似ており、プロパティ キーを返しますが、列挙できないプロパティは含まれません。一方、Reflect.ownKeys() はすべてのプロパティ キーを返します。

var obj = {
	a: 1、
	2 倍
}
Object.defineProperty(obj, 'メソッド', {
	値: 関数 () {
	    警告("列挙できないプロパティ")
	},
	列挙可能: false
})

コンソールログ(Object.keys(obj))
// ["a", "b"]
コンソールログ(Reflect.ownKeys(obj))
// ["a", "b", "メソッド"]

知らせ：

• Object.keys(): オブジェクト属性の配列を返すのと同じです。
• Reflect.ownKeys() : Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj) と同等です。

要約:

3. その他のトラバーサル方法

1. のために

for ループはおそらく最も一般的なループ方法です。ループ変数の宣言、ループ条件の判断、ループ変数の更新という 3 つの式で構成されます。 3 つの式はセミコロンで区切られます。配列の長さを繰り返し取得する必要がないように、一時変数を使用して配列の長さをキャッシュすることができます。配列が大きい場合、最適化の効果はより顕著になります。

定数arr = [1,2,3,4,5]
for(let i = 0, len = arr.length; i < len; i++ ){
  コンソールログ(arr[i])
}

実行時にはまず実行条件を判断して実行します。 for ループは、配列、文​​字列、配列のようなオブジェクト、DOM ノードなどを反復処理するために使用できます。元の配列は変更できます。

2. ながら

while ループの終了条件はさまざまな型にすることができますが、最終的にはブール値に変換されます。変換ルールは次のとおりです。

• ブール値: true は真、false は偽。
• 文字列: 空の文字列は false であり、空でない文字列はすべて true です。
• 数値: 0 は false、0 以外の数値は true。
• null/Undefined/NaN: すべて false;
• 反対意見: すべて正しい。

num = 1 とします。
            
(数値 < 10){
    console.log(数値);
    数値++;
}

while は for と同じですが、どちらも最初に判断してから実行します。ループは、指定された条件が真である限りコードを実行します。

3. する / しながら

このメソッドは最初に実行してから判断します。初期条件が満たされない場合でも、do/while ループは少なくとも 1 回は実行されます。

数値を10とします。
            
する
	{
    console.log(数値);
    数値--;
  }
while(数値 >= 0);
            
console.log(数値); //-1

配列を反復処理するために do/while を使用することはお勧めしません。

4. 待つの

for await...of メソッドは非同期イテレータと呼ばれ、主に非同期オブジェクトを走査するために使用されます。 ES2018で導入されたメソッドです。

for await...of ステートメントは、文字列、配列、配列のようなオブジェクト、マップ、セット、カスタムの非同期または同期反復可能オブジェクトなどの非同期または同期反復可能オブジェクトに対して反復ループを作成します。このステートメントは非同期関数でのみ使用できます。

関数 Gen (時間) {
  新しい Promise を返します ((resolve,reject) => {
    setTimeout(関数() {
       解決(時間)
    }、時間）
  })
}

非同期関数テスト（）{
   arr = [Gen(2000),Gen(100),Gen(3000)] とします。
   for await (let 項目の arr) {
      console.log(日付.now(),項目)
   }
}
テスト（）

出力：

要約する

これで、24 個の JavaScript ループ トラバーサル メソッドに関するこの記事は終了です。JavaScript ループ トラバーサル メソッドの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。