几种常用的数组遍历方法

 整理一下常用的几种遍历方法，for和while循环就不再说了，说一下其他几种非常好用的方法

1.for in 

for in可定是接触比较早的遍历数组的方法，其实它也可遍历对象（遍历字符串也是可以的！），这个方法主要是针对对象，遍历数组最好不要用！！！实例演示一下

遍历数组

<script>
    var arr = ['a', 'b', 'c', 'd'];
    // 遍历数组  key是索引
    for (var key in arr) {
        console.log(arr[key] + '---' + key);
    }
</script>

 遍历对象   

 var obj = {
        name: '张三',
        age: '20',
        sex: '男',
    }
    // 遍历对象  key是属性  obj[key]是属性值
    for (let key in obj) {
        console.log(obj[key] + '---' + key);

    }

 遍历字符串  和数组类似

 // 遍历字符串  key是索引
    var str = 'abcd';
    for (let key in str) {
        console.log(str[key] + '---' + key);
    }

2.for  of   （ES6）

p就是数组中的每个元素，for of 遍历可迭代数据，不能遍历对象！！！

 var arr = ['a', 'b', 'c', 'd'];
    // 遍历数组  key是索引
    for (let p of arr) {
        console.log(p);//输出a  b   c   d
    }

3.forEach（）方法对数组的每个元素执行一次给定的函数。

 var arr = ['a', 'b', 'c', 'd'];
    // 遍历数组  element是每个元素
    arr.forEach((element) => {
        console.log(element);
    });

 
高阶用法

语法

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

参数

callback

为数组中每个元素执行的函数，该函数接收一至三个参数：

currentValue

数组中正在处理的当前元素。

index 可选

数组中正在处理的当前元素的索引。

array 可选

forEach() 方法正在操作的数组。

thisArg 可选

可选参数。当执行回调函数 callback 时，用作 this 的值。

4.find()  返回第一个满足条件的元素，否则返回undefined

<script>
    var arr = [1, 2, 3, 4, 5];
    // 遍历数组  element是每个元素
    const a = arr.find(element => element > 3);
    console.log(a);//输出4
</script>

5.findIndex  返回第一个满足条件的索引，否则返回-1 

<script>
    var arr = [1, 2, 3, 4, 5];
    // 遍历数组  element是每个元素
    const a = arr.findIndex(element => element > 3);
    console.log(a);//输出3
</script>

6.filter（）所有满足条件的元素组成一个新数组返回，否则为空数组

<script>
    var arr = [1, 2, 3, 4, 5];
    // 遍历数组  element是每个元素
    const a = arr.filter(element => element > 3);
    console.log(a);
</script>

 7.Object.keys(obj)     可以遍历对象,也可以遍历数组

<script>
    var arr = [1, 'a', 3, 4, 5];
    var obj = { a: 1, b: 2 }
    // 遍历数组返回每个元素的索引
    let a = Object.keys(arr);
    console.log(a);
    // 遍历对象把对象中的每个属性转换成字符组成新数组返回
    let b = Object.keys(obj);
    console.log(b);
</script>