for ループは日常の開発で最も頻繁に使用されます。フロントエンドとバックエンドのデータを操作するとき、一般的なデータ型は配列とオブジェクトです。オブジェクトと配列を処理するときに For トラバーサルがよく使用されるため、これらを完全に理解する必要があります5種類のforループ。彼らです：
- のために
- ～のために
- の
- 待ってください..
- それぞれに
- 地図
1. それぞれの概要
1、のための
for ループは最も古く、最も一般的に使用されるトラバーサルであり、ほとんどのトラバーサルに対応できます。配列、オブジェクト、文字列をトラバースできます。例:
// 遍历数组
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var i = 0,keys = Object.keys(obj); i< keys.length; i++){
console.log(obj[keys[i]])
}
//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
console.log(str[i])
}2. for ... in
for ... in は ES5 の新機能で、継承された列挙可能なプロパティを含め、Symbol を除くオブジェクトの列挙可能なプロパティを任意の順序で繰り返します。
// 遍历数组
var arr = [1, 2, 3]
for (var i in arr ){
console.log(i);//0 1 2
console.log(arr[i]);//1 2 3
}
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
for (var key in obj){
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
}
//遍历字符串
let str = 'abc'
for (var i in str){
console.log(i) // 0 1 2
console.log(str[i]) // a b c
}3. for ... of
for ... of ステートメントは、反復可能なオブジェクト (Array、Map、Set、String、TypedArray、引数オブジェクトなどを含む) に反復ループを作成し、カスタム反復フックを呼び出し、各ステートメントに対して異なる属性値に対して実行されます。
// 迭代 Array
var arr = [1, 2, 3]
for (var val of arr ){
console.log(val);// 1 2 3
}
//迭代 String
let str = 'abc'
for (var val of str){
console.log(val) // a b c
}
// 迭代 TypedArray - 一个类型化数组，描述了一个底层的二进制数据缓冲区！
let iterable = new Uint8Array([0x00, 0xff]);
for (let value of iterable) {
console.log(value);//0 255
}
// 迭代 Map - 对象保存键值对，能够记住键的原始插入顺序
let map = new Map([['a',1],['b',2]])
for (let key of map) {
console.log('key',key)//['a',1] ['b',2]
}
for (let [key,value] of map) {
console.log(key) // a b
console.log(value) // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
console.log(val)// 1 2 3
}4. for await...of は、
組み込みの String、Array、配列のようなオブジェクト (引数またはノードリスト)、TypedArray、Map、Set、およびユーザー定義の Asynchronous/ を含む、非同期反復可能オブジェクトと同期反復可能オブジェクトを横断するループを作成します。同期イテレータ。
オブジェクトのさまざまなプロパティの値を使用してカスタム反復フックを呼び出し、実行するステートメントを呼び出します。
await 演算子と同様に、このステートメントは非同期関数内でのみ使用できます。
async function* asyncGenerator() {
var i = 0;
while (i < 3) {
yield i++;
}
}
(async function () {
for await (num of asyncGenerator()) {
console.log(num);// 0 1 2
}
})();5. forEach
forEach は ES5 バージョンでリリースされます。配列内の有効な値を含む各項目に対して昇順でコールバック関数を実行します。削除または初期化されていない項目はスキップされます (たとえば、スパース配列上)一般に、通常の for ループの拡張バージョンであると考えられています。
// 遍历数组
var arr = [1, 2, 3]
arr.forEach((item, index) => {
console.log(index);//0 1 2
console.log(item);// 1 2 3
})
//遍历对象
var obj = {
job: 'web worker',
name:'前端代码女神'
}
var keys = Object.keys(obj)
keys.forEach((key) => {
console.log(key)// job name
console.log(obj[key])// web worker 前端代码女神
})6.
マップ トラバーサル中に新しい配列を返すことができます。新しい配列の結果は、元の配列の各要素に対して提供された関数を 1 回呼び出した後に返される値です。
// 遍历数组
var arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]2. 複数の for の違い
1. 利用シーンの違い
for ループは、最も初期かつ最も原始的なループ走査ステートメントです。変数は for 内で定義され、条件 (通常は配列の長さ) に従ってループが走査されます。長さを超えると、ループは停止します。一般に、配列または配列のような走査が走査されます。
オブジェクトを走査するとき、オブジェクトには長さが存在しないため、Object.keys() を使用してオブジェクトのすべてのプロパティを取得し、配列の形式で返します。
for / in は主に、プロトタイプ オブジェクトのプロパティを含む、オブジェクトの列挙可能なプロパティを任意の順序で走査するために使用されます。オブジェクトを走査すると、プロパティのキー値が取得されます。走査されるのは配列と添え字です配列のキー値として。
for / of は、Array、Map、Set、String、TypedArray、arguments オブジェクトなどの反復可能なオブジェクトのデータを走査するために使用されます。
for await...of は、非同期反復可能オブジェクトを走査するために使用されます。このステートメントは、async 関数内でのみ使用できます。
forEach は for のアップグレード バージョンです。使用が簡単になり、より多くのパラメータを持ちますが、その本質は依然として配列ループです。各要素は元の配列を変更せずにコールバックを実行します。
Map は、元の配列の各要素に対してコールバックを実行し、元の配列を変更せずに新しい配列を返します。
2. 機能の違い:
forEach と Map はループからの抜け出しをサポートしませんが、その他はサポートしません。
for await ... of は非同期操作をサポートできますが、他のものはサポートしません。
純粋なオブジェクトの走査には、 for ... in 列挙の方が便利です。
配列トラバーサルの場合、インデックスが必要ない場合は、for...of を直接使用して値を取得できます。また、break または return もサポートされています。インデックスも必要な場合は、forEach の方が適していますが、return はサポートされていません。 。
ある配列が別の配列にマップされている場合は、map を使用するのが最も適切です。
3. 性能の違い
テスト環境とテスト データの条件が一致している場合、パフォーマンス ランキングは、
for > for of > forEach > Map > for in となります。
for は追加の関数呼び出しやコンテキストがないため、最も高速なパフォーマンスを実現します。
for ... of はイテレータ インターフェイスを備えたデータ構造であり、メンバーを反復してキー値を直接読み取るために使用できます。
forEach は for の糖衣構文であり、多くのパラメーターとコンテキストがあるため、速度は遅くなります。
Map は同じ長さの新しい配列を返すため、配列の作成と割り当てによって生じるパフォーマンスのオーバーヘッドは比較的大きくなります。
for...in は、オブジェクトのすべての属性を列挙する必要があり、変換プロセスが必要で、比較的高価であるため、パフォーマンスが最も悪くなります。
3.forの使用
プロジェクト開発では、実際のニーズに基づいてトラバースに適したものを選択する必要があります。以下に、使用上の提案をいくつか示します。
対応するブール値など、データを別の配列にマップする必要がある場合は、元の配列を変更せず、構文が単純なマップを使用することをお勧めします。
配列を走査するときは、for、forEach、または for...of を使用できます。
純粋なオブジェクトをトラバースする場合は、for ... in を使用することをお勧めします。
イテレータを走査する必要がある場合は、for ...of を使用することをお勧めします。
配列内の条件を満たす配列をフィルタリングする場合は、filter を使用します。