JavaScriptの主なループとは何ですか

JavaScript の主なループは次のとおりです: 1. for ループ; 2. "for...in" ループ; 3. map メソッド; 4. forEach ループ; 5. filter フィルター ループ; 6. Object.keysオブジェクトのトラバースプロパティ。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

プロジェクト開発では、どのフレームワークに基づいているかに関係なく、データ処理が必要であり、データ処理はさまざまなトラバーサル ループから切り離すことができません。 JavaScript でループする方法はたくさんありますが、ここでは一般的な JS ループをいくつか紹介します。

1. for ループ

for ループは、最も一般的で最もよく使用されるループ走査方法であるため、可読性とメンテナンスの容易さは比較的劣りますが、この問題から抜け出すことができます。時間のループ。

let arr = [1,2,3,4,5,6,7]for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}// 1,2,3,4,5,6,7

2. for...in

for...in ループは主にオブジェクトの走査を目的としており、オブジェクトの対応するキー値を取得したい場合は for を使用します。 ..in それはさらに便利です

//针对对象来说  
//任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，
//for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。
//结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

3.map

map メソッドは、配列のすべてのメンバーを順番にパラメータ関数に渡し、各実行の結果をパラメータ関数に返します。新しいアレイ。ループを途中で停止することはできず、すべてのメンバーが常に走査されます。

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map メソッドは関数をパラメーターとして受け取ります。この関数が呼び出されると、map メソッドは現在のメンバー、現在の位置、配列自体の 3 つのパラメーターを関数に渡します。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

4. forEach

forEach を使用する方法は、forEach メソッドが値を返さず、データを操作するためにのみ使用される点を除いて、map を使用する方法と似ています。ループを途中で停止することはできません。常にすべてのメンバーを走査します

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

5。フィルター フィルター ループ

フィルター メソッドは、配列メンバーと条件を満たすメンバーをフィルターするために使用されます。新しい配列を作成して返します。パラメータは関数であり、配列のすべてのメンバーが順番に関数を実行し、戻り結果が true になったメンバーが新しい配列を作成して返します。このメソッドは元の配列を変更しません。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 の Array クラスのフィルター メソッドは、すべての「false」タイプの要素 (false、null、未定義、0、NaN、または空の文字列) を削除するために使用されます。

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Booleanは、配列内の要素を走査し、要素の true または false の型に応じて true または false を返す関数です。

6. Object.keys は、オブジェクトのプロパティを走査します

Object .keys メソッドのパラメータはオブジェクトであり、配列を返します。この配列のメンバーはすべてオブジェクト自体のプロパティ名 (継承されていない) であり、列挙可能なプロパティのみが返されます。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

オブジェクトが空のオブジェクトかどうかを判断するには、Object.keys(obj).length>0

[推奨学習: JavaScript 上級チュートリアル]

以上がJavaScriptの主なループとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。