乐趣区

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

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 的相关介绍。

退出移动版