JavaScript 之数组遍历（迭代）方法介绍

Pikachu 发布于2019-08-23 18:33 / 2854人阅读

摘要：中一共有五种数组遍历迭代方法，它们都会对数组中每个元素执行一些业务，且都不会修改原数组，这些方法包括如果该函数任意一项返回，则返回，如果全部返回则最终返回如果该函数每一项都返回，则返回，否则返回会返回一个新数组，该数组是由满足条件的任意项组

ES5中一共有五种数组遍历（迭代）方法，它们都会对数组中每个元素执行一些业务，且都不会修改原数组，这些方法包括：

1、some() 如果该函数任意一项返回 true，则返回 true，如果全部返回 false 则最终返回 false

2、every() 如果该函数每一项都返回 true，则返回 true，否则返回 false

3、filter() 会返回一个新数组，该数组是由满足条件的任意项组成

4、forEach() 该函数没有返回值，本质上与使用 for 循环迭代数组一样

5、map() 最终会返回一个经过操作后的新数组；

其中 some() 和 every() 是非常相似的，它们都会返回一个 boolean，主要区别就在于，前者数组中只要有一项满足条件即可返回 true，而后者需要每一项都要满足条件才返回 true

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

let res = arr.every((item, index ,arr) => {
    return item > 4
});

let otherRes = arr.some((item, index, arr) => {
    return item > 4
});

console.log(res); // false

console.log(otherRes); // true

可以看到 arr 数组中只有 5 满足了大于4，而 every() 方法要求必须每一项都返回 true 才满足，而 some()方法只要数组中有至少一项满足条件即可，所以 5 满足了条件则返回了 true；

filter()

这个方法就是指定一些条件然后过滤掉，然后返回满足条件的元素再组成数组，并不会影响原数组结构；

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

let res = arr.filter((item, index ,arr) => {
    return item > 3
});

console.log(res); // [ 4, 5 ]

console.log(arr); // [ 2, 3, 4, 5 ]

简单明了

再来看一下 forEach() 方法：

它并没有返回值，和 for 遍历类似：

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

let newArr = [];

arr.forEach((item, index ,arr) => {
    if (newArr.indexOf(item) === -1) {
        newArr.push(item)
    }
    return newArr
});

console.log(newArr); // [ 2, 3, 4, 5 ]

这里简单实现了一个数组去重，当然即然刚刚说 forEach() 和 for 相似，看看代码如何体现：

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

let newArr = [];

for (let i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
    }
}

console.log(newArr); // [ 2, 3, 4, 5 ]

区别只不过 for遍历中 arr[i] 相当于 forEach中callback函数中的item参数

forEach() 看起来更清晰简洁一些

最后就要说一下 map() 这个方法：

在 React 这个框架中其实我们经常见到这个方法，通常用来做渲染 list

先看一下用法：

let arr = [1, 2, 3];

let newArr = arr.map((item, index ,arr) => {
    return item * 2
});

console.log(newArr); // [ 2, 4, 6 ]

map() 方法是让每个元素执行指定逻辑，最后再返回一个新的数组；

数组的遍历（迭代）方法就说到这里，欢迎有问题和错误指出，也欢迎阅读我近期关于TypeScript的相关介绍。

海外云主机云服务器 javascript迭代数组 javascript数组方法数组迭代器 js迭代数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105413.html

ES6语法之可迭代协议和迭代器协议

摘要：有两个协议可迭代协议和迭代器协议。为了变成可迭代对象，一个对象必须实现或者它原型链的某个对象必须有一个名字是的属性迭代器协议该迭代器协议定义了一种标准的方式来产生一个有限或无限序列的值。 ECMAScript 2015的几个补充，并不是新的内置或语法，而是协议。这些协议可以被任何遵循某些约定的对象来实现。有两个协议：可迭代协议和迭代器协议。可迭代协议可迭代协议允许 JavaScri...

sarva 2019-08-22 11:23 评论0 收藏0
Javascript中数组方法reduce的妙用之处

摘要：数组方法中，相比等常用的迭代方法，常常被我们所忽略，今天一起来探究一下在我们实战开发当中，能有哪些妙用之处，下面从语法开始介绍。按顺序运行异步函数我们可以做的另一件事是按顺序运行而不是并行。函数返回一个对象，可以使用方法添加回调函数。 showImg(https://segmentfault.com/img/remote/1460000019423051); Javascript数组方...

yiliang 2019-08-23 18:01 评论0 收藏0
Javascript 中的 Array 操作

摘要：语法函数的几个参数含义上一次执行函数后返回的值当前数组元素值当前数组元素索引遍历的数组对象第一次调用函数时，如果有值，则为，为数组第一个元素。 Javascript 中的 Array 操作在各种语言中，数组总是一个比较重要的数据结构，Javascript 中的 Array 也不例外。Javascript 中的 Array 提供了一系列方法可以更好地让我们操作 Array 中的元素，下...

khs1994 2019-08-21 10:43 评论0 收藏0
js遍历之for forEach in of

摘要：语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的，目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组，还可以遍历结构，某些类似数组的对象如对象对象，对象，以及字符串。即使是最简单的循环，其中也深藏学问 ECMAScript5(es5)有三种for循环简单for for in forEach ECMAScript6(es6)新增 fo...

yeyan1996 2019-08-20 17:38 评论0 收藏0
Javascript基础之Array数组API

摘要：数组原型提供的方法非常之多，主要分为三种直接修改原数组原数组不变，返回新数组数组遍历方法直接修改原数组的删除一个数组中的最后的一个元素，并且返回这个元素添加一个或者多个元素到数组末尾，并且返回数组新的长度删除数组的第一个元素，并返回这个元素 Javascript数组原型提供的方法非常之多，主要分为三种：直接修改原数组原数组不变，返回新数组数组遍历方法直接修改原数组的API ...

hsluoyz 2019-08-23 15:28 评论0 收藏0