JS中的各种遍历方法

男娘i 2022-01-20 09:11 227阅读 0赞

***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`方法，它可以与`break`、`continue`和`return`配合使用**。

***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)

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS中各种姿势的遍历,你知道几个？

前言：对于前端的循环遍历我们知道有针对js数组的length，forEach()、for of(），map()方法针对js对象的for/in语句(for/

蔚落/ 2023年10月06日 16:27/ 0 赞/ 6 阅读

相关 php中js的遍历,js如何进行元素遍历

这次给大家带来js如何进行元素遍历，js进行元素遍历的注意事项有哪些，下面就是实战案例，一起来看一下。支持Element Traversal 规范的浏览器有IE 9+、Fi

小灰灰/ 2023年01月13日 05:57/ 0 赞/ 112 阅读

相关 JS遍历与JQuery遍历

JS遍历语法： for(初始化值;循环结束条件;步长) html代码： <!DOCTYPE html> <html> <head>

电玩女神/ 2022年12月25日 15:59/ 0 赞/ 149 阅读

相关遍历JS Object的方法

遍历JS Object的方法 1.Object.keys 2. for in 1.Object.keys const body = {

以你之姓@/ 2022年11月27日 08:49/ 0 赞/ 248 阅读

相关 JS对象的遍历方法及对比

对象遍历的方法包括：Object.keys()、for-in、Object.getOwnPropertyNames(obj)、Reflect.ownKeys(obj)等方式。

冷不防/ 2022年11月09日 00:56/ 0 赞/ 172 阅读

相关 JS 迭代、遍历方法

目录 forEach 方法 map 建新数组，不会改变原数组 filter 条件过滤

左手的ㄟ右手/ 2022年10月15日 04:50/ 0 赞/ 186 阅读

相关 js数组遍历、对象遍历、字符串遍历

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 数组遍历 for \--使用变量将数组长度缓

男娘i/ 2022年10月02日 00:49/ 0 赞/ 276 阅读

相关 OC各种遍历方法的效率比较

[OC各种遍历方法的效率比较][OC] 看了一篇博客，挺有意思，OC各种遍历方法的效率，打算自己也测试一番。看看，究竟哪一个的效率更好一些！准备工作：懒加载一个数组，

川长思鸟来/ 2022年03月22日 11:07/ 0 赞/ 186 阅读

相关 JS中的各种遍历方法

1、for for(let i=0;i<len;i++)\{ //do something \} 2、forEach

男娘i/ 2022年01月20日 09:11/ 0 赞/ 228 阅读

相关 js数组、对象遍历的方法

![a1a6bd51d37a3020fef16fc75110cee9.png][] `for` 语句代码: var arr = [1,2,4,6]

男娘i/ 2021年09月18日 09:46/ 0 赞/ 611 阅读