JavaScript では、配列をループする方法がいくつかあります。一般的な方法をいくつか示します。
1. ループ方式
1.1. for ループ
これはループの最も基本的な形式であり、配列を反復処理するために使用できます。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过for循环获取所有元素
for(let i = 0; i < numbers.length; i++){
console.log("索引：" + i, "值：" + numbers[i]);
}出力は次のとおりです。
インデックス: 0 値: 2
インデックス: 1 値: 50
インデックス: 2 値: 150
インデックス: 3 値: 30 インデックス:
4 値: 65 インデックス: 5
値: 90 インデックス
: 6 値: 7
インデックス: 7 値: 90
インデックス: 8 値: 16
インデックス: 9 値: 19
インデックス: 10 値: 23
インデックス: 11 値: 200
1.2. for...in ループ
Javascript では、for...in ループを使用して、オブジェクトまたは配列の列挙可能なプロパティを走査します。例は次のとおりです。
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过for...in获取所有元素
for(let i in numbers){
console.log("索引：" + i, "值：" + numbers[i]);
}
出力は次のとおりです。
インデックス: 0 値: 2
インデックス: 1 値: 50
インデックス: 2 値: 150
インデックス: 3 値: 30 インデックス:
4 値: 65 インデックス: 5
値: 90 インデックス
: 6 値: 7
インデックス: 7 値: 90
インデックス: 8 値: 16
インデックス: 9 値: 19
インデックス: 10 値: 23
インデックス: 11 値: 200
1.3. for...of ループ
これは ES6 で導入された配列を走査する新しい方法で、配列を走査するときに配列のインデックスではなく配列要素の値に簡単にアクセスできるようになります。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过for ... of循环获取
for(let val of numbers){
console.log("值：" + val)
}出力結果:
値: 2
値: 50
値: 150
値: 30
値: 65 値:
90
値: 7
値: 90
値: 16
値: 19
値: 23
値: 200
1.4. for...in と for...of の違い
- for...in は配列またはオブジェクトを走査できます
- for...of は配列を走査できますが、オブジェクトを走査したい場合はイテレータを使用する必要があります。
for ... では配列とオブジェクトを走査します。例は次のとおりです。
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
const fruits = {id: 1, name: "Orange"};
// 通过for...in获取所有元素
for(let i in numbers){
console.log("索引：" + i, "值：" + numbers[i]);
}
// 通过for...in获取对象中元素
for(let key in fruits){
console.log("键：" + key, "值：" + fruits[key]);
}出力は次のとおりです。
// for...in は配列内の要素を出力します
インデックス: 0 値: 2
インデックス: 1 値: 50
インデックス: 2 値: 150
インデックス: 3 値: 30 インデックス:
4 値: 65 インデックス: 5
値: 90 インデックス
: 6 値: 7
インデックス: 7 値: 90
インデックス: 8 値: 16
インデックス: 9 値: 19
インデックス: 10 値: 23
インデックス: 11 値: 200// fon...in 出力オブジェクトの要素
キー: id 値: 1
キー: name 値: Orange
for...of は配列とオブジェクトを走査します。例:
const fruits = {id: 1, name: "Orange"};
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// for...of遍历数组中元素
for(let value of numbers){
console.log("值：" + value);
}
// 获取fruits的迭代器实例对象
const fruitsIterator = Object.entries(fruits);
// for...of遍历对象中元素
for(let value of fruitsIterator){
console.log(value);
}出力は次のとおりです。
// for...of は配列内の要素を出力します
value: 2
value: 50
value: 150
value: 30
value: 65
value: 90
value: 7
value: 90
value: 16 value:
19
value: 23
value: 200
// for...of は、反復子[ 'id', 1 ]
[ 'name', 'Orange' ]を通じてオブジェクト内の要素を出力します。
1.5. forEach() メソッドのループ
Array.prototype.forEach メソッドは、配列の各要素を呼び出し、その要素をコールバック関数に渡すために使用されます。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 通过forEach()方法获取所有元素
numbers.forEach((item, index) => {
console.log("值：" + item, " 索引：" + index);
});出力は次のとおりです。
値: 2 インデックス: 0
値: 50 インデックス: 1
値: 150 インデックス: 2
値: 30 インデックス: 3
値: 65 インデックス: 4
値: 90 インデックス: 5 値: 7
インデックス: 6 値:
90 インデックス: 7
値: 16 インデックス: 8
値: 19 インデックス: 9
値: 23 インデックス: 10
値: 200 インデックス: 11
2. 結果が得られる循環法
2.1. Map() メソッドのループ
Array.prototype.map メソッドは新しい配列を作成し、その結果は配列内の各要素で呼び出された関数の戻り値になります。
このメソッドは配列データの取得に適しており、配列内の要素を再フィルタリングする必要がある場合に使用されます。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 将数组中所有元乘以2
const newArray = numbers.map(item => item * 2);
console.log("原数组：", numbers);
console.log("新数组：", newArray);出力は次のとおりです。
元の配列: [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200]
新しい配列: [4、100、300、60、130、180、14、180、32、38、46、400]
2.2. filter() メソッドのループ
Array.prototype.filter メソッドは、提供された関数によって実装されたテストのすべての要素を含む新しい配列を作成します。
このメソッドは、取得した配列の結果をフィルターして利用可能な要素を選択し、新しい配列を返す必要がある場合の使用に適しています。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 筛选出所有偶数值
const newArray = numbers.filter(item => item%2==0);
console.log("原数组：", numbers);
console.log("新数组：", newArray);出力は次のとおりです。
元の配列: [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200]
新しい配列: [2、50、150、30、90、90、16、200]
2.3.reduce()メソッドのループ
Array.prototype.reduce メソッドは、アキュムレータと配列内の各要素 (左から右) に関数を適用し、単一の値に削減します。
このループ方法は主に加算に使用されます。
例：
const numbers = [2, 50, 150, 30, 65, 90, 7, 90, 16, 19, 23, 200];
// 求和（将数组中所有元素累加结果）
const total = numbers.reduce((total, value) => total + value, 0);
console.log("值：", total);出力は次のとおりです。
値: 742