整理一下常用的几种遍历方法,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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐