JS中的各种遍历方法

男娘i 2022-01-20 09:11 291阅读 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 条评论，291人围观）

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

相关阅读

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

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

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

相关 JS数组遍历方法

map .有返回值，将每一次遍历的返回值组成最终的数组 arr = [1, 12, 35, 13, 5, 98, 100, 8] let

妖狐艹你老母/ 2023年10月02日 12:18/ 0 赞/ 33 阅读

相关 js对象遍历方法

for in let obj = { a: 1, b: true, c: "hel

阳光穿透心脏的1/2处/ 2023年07月22日 03:44/ 0 赞/ 68 阅读

相关 js中遍历对象的方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

妖狐艹你老母/ 2023年03月02日 13:29/ 0 赞/ 21 阅读

相关 JS中各种数组遍历方式的性能对比

前提以下截图中的数据是在chrome (支持es6)中运行了100次后得出的结论 (每次运行10次,一共10个循环，得到的分析结果) ![在这里插入图片描述][

太过爱你忘了你带给我的痛/ 2023年02月20日 06:20/ 0 赞/ 14 阅读

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

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

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

相关遍历JS Object的方法

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

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

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

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

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

相关 JS中的各种遍历方法

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

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

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

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

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