Several commonly used traversal methods

  Sort out several commonly used traversal methods ,for and while The cycle is no longer said , Let's talk about several other very useful methods

1.for in 

for in It must be the method of traversing arrays that contacts earlier , In fact, it can also traverse objects （ Traversal of strings is also possible ！） Example demonstration

Traversal array

<script>
    var arr = ['a', 'b', 'c', 'd'];
    //  Traversal array   key It's the index 
    for (var key in arr) {
        console.log(arr[key] + '---' + key);
    }
</script>

  Traversing objects    

 var obj = {
        name: ' Zhang San ',
        age: '20',
        sex: ' male ',
    }
    //  Traversing objects   key Attribute   obj[key] It's property value 
    for (let key in obj) {
        console.log(obj[key] + '---' + key);

    }

  Traversal string   Similar to arrays

 //  Traversal string   key It's the index 
    var str = 'abcd';
    for (let key in str) {
        console.log(str[key] + '---' + key);
    }

2.for  of   （ES6）

p It's every element in the array ,for of Traversing iteratable data , Can't traverse object ！！！

 var arr = ['a', 'b', 'c', 'd'];
    //  Traversal array   key It's the index 
    for (let p of arr) {
        console.log(p);// Output a  b   c   d
    }

3.forEach（） Method performs the given function once for each element of the array .

 var arr = ['a', 'b', 'c', 'd'];
    //  Traversal array   element It's every element 
    arr.forEach((element) => {
        console.log(element);
    });

 
High-order usage

grammar

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

Parameters

callback

Functions executed for each element in the array , This function takes one to three parameters ：

currentValue

The current element being processed in the array .

index  Optional

The index of the current element being processed in the array .

array  Optional

forEach()  Method is operating on the array .

thisArg  Optional

Optional parameters . When the callback function is executed  callback  when , Used as a  this  Value .

4.find()  Returns the first element that satisfies the condition , Otherwise return to undefined

<script>
    var arr = [1, 2, 3, 4, 5];
    //  Traversal array   element It's every element 
    const a = arr.find(element => element > 3);
    console.log(a);// Output 4
</script>

5.findIndex  Return the first index that meets the condition , Otherwise return to -1 

<script>
    var arr = [1, 2, 3, 4, 5];
    //  Traversal array   element It's every element 
    const a = arr.findIndex(element => element > 3);
    console.log(a);// Output 3
</script>

6.filter（） All the elements that meet the conditions form a new array and return , Otherwise it's an empty array

<script>
    var arr = [1, 2, 3, 4, 5];
    //  Traversal array   element It's every element 
    const a = arr.filter(element => element > 3);
    console.log(a);
</script>

 7.Object.keys(obj)      You can traverse objects , You can also iterate over groups

<script>
    var arr = [1, 'a', 3, 4, 5];
    var obj = { a: 1, b: 2 }
    //  Traverse the array and return the index of each element 
    let a = Object.keys(arr);
    console.log(a);
    //  Traverse the object, convert each attribute in the object into characters, form a new array, and return 
    let b = Object.keys(obj);
    console.log(b);
</script>