JS中的各种遍历方法

1,858 阅读4分钟

1、for

     for(let i=0;i<len;i++){

         //do something

      }

2、forEach

   

forEach 循环不支持return


实例:

let arr = [1,2,3,4,5];

arr.forEach( (v,i) => {

console.log(v,i);

},this);


第二个参数的用法:


            

3、for in(循环键名,一般用来遍历对象)

数组的私有属性也会被遍历,所以一般我们不会用这个方法遍历数组

let arr = [1,2,3,4,5];

arr.a = "key";

for(let key in arr){

     //do something....

    //key是键名

    console.log(typeof (key));

    console.log(key);

}

这里会打印出6个string


4、for of(es6)(key是值)

     for of 是es6的方法,弥补了forEach和for in循环的弊端。既有return,而且不会遍历数组的私有属性,但是for of不能遍历对象(可以遍历字符串,数组对象)。

let arr = [1,2,3,4,5];

arr.a = "key";

for(let key of arr){

   //do something....

   console.log(typeof (key));

   console.log(key);

}

不会去遍历私有属性


for of 与for in中key值得区别


for of:不同于forEach方法,它可以与breakcontinuereturn配合使用

5、filter过滤器

遍历一个数组并返回一个新数组,并且不影响原数组。遍历数组每一项,回调函数返回true,就把这一项添加到新数组中。其中回调函数中有三个参数,(value,index,array),value是每一项,index是索引,array是当前被遍历的数组

注:filter不会对空数组进行检测,filter不会改变原数组



6、map映射

map映射会去遍历数组每一项,但是不会改变元素组,同filter一样返回一个新数组,回调函数返回什么就是什么,对应的新数组的那一项就会是什么。



map 与 filter的区别,map返回的新数组与原数组的长度是一样的,是对数组每一项进行操作,返回每一项结果,而filter是返回我们需要的项(就是过滤掉我们不要的项);

map 与forEach的区别:map有返回值,forEach没有返回值

map与forEach的相同点:都只能遍历数组,参数都相同

7、include \find\findIndex

     include:

      Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串includes方法类似。

       [1,2,3].includes(2);              //true

        [1,2,3].includes(4);             //false

         [1,2,NaN].includes(NaN);      //true

       该方法的第二个参数表示搜索的起始位置,默认为0.如果第二个参数为负数,则表示倒数的位置,如果这是它大于数组长度,(比如第二个参数为-4,但长度为3),则会重置为0开始。

     

     

没有该方法之前,我们通常使用数组的indexof方法,检查包含某个值,indexof有两个缺点,一是不够语义化,它包含是找到参数的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观,二是,它内部使用严格相等(===)进行判断,会导致NaN的误判

语法: arr.indexOf(item);

     find:

      查找目标元素,参数是一个回调函数,函数的参数是每一项以及对应下标,find会返回匹配的那一项,一旦匹配就不会继续往下匹配(就是找到第一项,就停止查询),返回第一个符合条件的值,若没有匹配到符合条件的值,就返回undefined。

     函数参数有三个值,第一个是每次迭代查找的数组元素,第二个是每一次迭代查找的数组元素索引,第三个是被查找的数组。

     

     

      findIndex:查找目标元素,找到就返回元素的位置,找不到就返回-1.

       与find相比,他们只是返回值不一样,find返回的是符合条件的第一个值,findIndex返回的是符合条件的第一个值得索引,他们的参数都是一样的。



8、some和every

      some()是对数组中每一项运行给定函数,如果该函数对任一项返回true,则返回true.

      every()是对数组中每一项运行给定函数,如果该函数对每一项返回true,则返回true.

      some一直在找符合条件的值,一旦找到就不再继续迭代下去(有一个符合条件,就返回true)。

       every从迭代开始,一旦有一个不符合条件,则不会继续迭代下去(要求每一个都符合条件,才返回true)。

 

 

9、reduce

      reduce()方法接收一个函数作为累加器,数组中的每一个值(从左到右)开始缩减,最终计算为一个值。

      注:reduce()对于空数组是不会执行回调函数的。


语法:

       array.reduce((total,currentValue,currentIndex,arr),initialValue)