JavaScript 配列トラバーサル (転送) の 5 つの方法

この記事では主に、JavaScript の配列トラバーサルの 5 つの方法を紹介し、JavaScript の理解と使い方の学習を支援します。

JavaScript でコードを記述するプロセスでは、for ループ、forEach ループ、map ループ、forIn ループ、forOf ループなどのメソッドを含む、いくつかのメソッドを使用して配列を反復処理できます。

1. For ループ: 基本的かつ単純

これは、配列をトラバースする最も基本的で一般的に使用される方法であり、さまざまな開発言語が一般にこの方法をサポートしています。

let arr = ['a','b','c','d','e'];
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(i);    // 0 1 2 3 4
  console.log(arr[i]); //a b c d e
}

二、forEach()メソッド：コールバック関数を使う

forEach() これは Array オブジェクトのメソッドで、コールバック関数を引数として受け取ります。

コールバック関数には 3 つのパラメーターがあります。

1位：配列要素（必須）
2番目: 配列要素のインデックス値 (オプション)
3番目: 配列自体 (オプション)

let arr = ['a','b','c','d','e'];
arr.forEach((item,index,arr)=> {
  console.log(item);  // a b c d e 
  console.log(index); // 0 1 2 3 4
  console.log(arr);  // ['a','b','c','d','e']
})

3. map() メソッド: コールバック関数を使用

forEach() メソッドと同じ方法で使用されます。

var arr = [
  {name:'a',age:'18'},
  {name:'b',age:'19'},
  {name:'c',age:'20'}
];
arr.map(function(item,index) {
  if(item.name == 'b') {
    console.log(index) // 1
  }
})

4、for..in ループ: オブジェクトと配列をトラバースする

for...in ループを使用して、オブジェクトと配列をループできます。
オブジェクトのループに推奨され、json のトラバースにも使用できます。

let obj = {
  name: '王大锤',
  age: '18',
  weight: '70kg'
}
for(var key in obj) {
  console.log(key);    // name age weight
  console.log(obj[key]); // 王大锤 18 70kg
}
----------------------------
let arr = ['a','b','c','d','e'];
for(var key in arr) {
  console.log(key); // 0 1 2 3 4 返回数组索引
  console.log(arr[key]) // a b c d e
}

5、for...of ループ: オブジェクトと配列をトラバースする

配列のトラバースに推奨される、ループ可能な配列とオブジェクト。

for...of には、次の 3 つの新しいメソッドが用意されています。

key() はキー名の走査です。
value() はキー値の走査です。
entry() は、キーと値のペアのトラバーサルです。

let arr = ['科大讯飞', '政法BG', '前端开发'];
for (let item of arr) { 
 console.log(item); // 科大讯飞 政法BG 前端开发
}
// 输出数组索引
for (let item of arr.keys()) { 
 console.log(item); // 0 1 2
}
// 输出内容和索引
for (let [item, val] of arr.entries()) { 
 console.log(item + ':' + val); // 0:科大讯飞 1：政法BG 2：前端开发
}

6. 補足

6.1、中断と継続の問題

forEach、map、filter、reduce、every、some 関数では、break および continue キーワードは関数内にあるため効果がありませんが、関数はクロージャートラップの問題を解決します。
ブレークアンドコンティニューを使用するには、for、for...in、for...of、while を使用できます。

6.2、配列とオブジェクト

用于遍历数组元素使用：for()，forEach()，map()，for...of 。
用于循环对象属性使用：for...in。

转自：JavaScript 数组遍历的五种方法