重温 JavaScript 之 ES5数组遍历的方法

for循环

let arr = [1, 2, 3, 2, 4];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

Array.prototype.forEach()

forEach() ⇒ 方法对数组的每个元素执行一次给定的函数。
注意： 不支持 break、continue，除了抛出异常以外，没有办法中止或跳出 forEach() 循环。

语法:

arr.forEach( callback(currentValue, index, array) )

参数:

callback：为数组中每个元素执行的函数，该函数接收一至三个参数：
	currentValue：数组中正在处理的当前元素。
	index：数组中正在处理的当前元素的索引。
	array：forEach() 方法正在操作的数组。

返回值:

undefined

const array1 = ['a', 'b', 'c'];

array1.forEach((item, index, arr) => {
	console.log('数组的每一项：',item, '数组每一项的下标：',index, '数组本身：',arr)
});

// "数组的每一项：" "a" "数组每一项的下标：" 0 "数组本身" Array ["a", "b", "c"]
// "数组的每一项：" "b" "数组每一项的下标：" 1 "数组本身" Array ["a", "b", "c"]
// "数组的每一项：" "c" "数组每一项的下标：" 2 "数组本身" Array ["a", "b", "c"]

Array.prototype.map()

map() ⇒ 方法创建一个新数组，不会改变原数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

语法:

arr.map( callback(currentValue, index, array) )

参数:

callback：为数组中每个元素执行的函数，该函数接收一至三个参数：
	currentValue：数组中正在处理的当前元素。
	index：数组中正在处理的当前元素的索引。
	array：map() 方法调用的数组。

返回值:

一个由原数组每个元素执行回调函数的结果组成的新数组。

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

Array.prototype.filter()

filter() ⇒ 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

语法:

arr.filter( callback(currentValue, index, array) )

参数:

callback：用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
	currentValue：数组中正在处理的当前元素。
	index：数组中正在处理的当前元素的索引。
	array：filter() 方法调用的数组。

返回值:

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

const words = [1, 2, 3];
const result = words.filter(word => word == 2);
// 返回检测通过的元素
console.log(result);  // [2]

const words = [1, 2, 3, 2, 4, 2];
const result = words.filter(word => word == 2);
// 返回所有检测通过的元素
console.log(result);  // [2, 2, 2]

Array.prototype.some()

some() ⇒ 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。返回一个 Boolean 值

语法:

arr.some( callback(currentValue, index, array) )

参数:

callback：用来测试每个元素的函数，接受三个参数：
	currentValue：数组中正在处理的元素。
	index：数组中正在处理的元素的索引值。
	array：some()被调用的数组。

返回值:

数组中有至少一个元素通过回调函数的测试就会返回true；所有元素都没有通过回调函数的测试返回值才会为 false。

const array = [1, 2, 3, 4, 5];

const even = (element) => element === 2;

console.log(array.some(even));  // true

Array.prototype.every()

every() ⇒ 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

语法:

arr.every( callback(currentValue, index, array) )

参数:

callback：用来测试每个元素的函数，它可以接收三个参数：
	currentValue：用于测试的当前值。
	index：用于测试的当前值的索引。
	array：调用 every 的当前数组。

返回值:

如果回调函数的每一次返回都为真值，返回 true，否则返回 false。

const array1 = [1, 30, 39, 29, 10, 13];

const isBelowThreshold = (currentValue) => currentValue < 40;

console.log(array1.every(isBelowThreshold));

Array.prototype.reduce()

reduce() ⇒ 方法对数组中的每个元素进行累加操作，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

语法:

arr.reduce(callbackFn, initialValue)
arr.reduce(function(previousValue, currentValue, currentIndex), initialValue)

参数:

callback：一个 “reduce” 函数，包含四个参数：
	1. previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
	2. currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
	3. currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
	4. array：用于遍历的数组。
initialValue：
	作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

返回值:

使用 “reduce” 回调函数遍历整个数组后的结果。

用法:

// 计算数组每一项的和
let arr = [1, 2, 3]
let sum = arr.reduce(function(prev, curr){
	return prev + curr;
}, 0)
console.log(sum);  // 6

// 计算数组中最大的值
let max = arr.reduce(function(prev, curr){
	return Math.max(prev, curr);
})
console.log(max);

// 数组去重
let arr2 = [1, 2, 3, 2, 3, 4]
let res = arr2.reduce(function(prev, curr){
    prev.indexOf(curr) == -1 && prev.push(curr);
	return prev;
}, [])
console.log(res);

for in Array

for in ??? ⇒ 用于变量数组。但是存在问题，它会把定义在原型上的方法一起遍历出来。看实例2代码

实例1

let arr2 = [1, 2, 3, 4]
for(let index in arr2){
	console.log(index, arr2[index])
}
// "0" 1
// "1" 2
// "2" 3
// "3" 4

实例2

Array.prototype.foo = function(){
	console.log('foo');
}

let arr2 = [1, 2, 3, 4]
for(let index in arr2){
	console.log(index, arr2[index])
}
// "0" 1
// "1" 2
// "2" 3
// "3" 4
// "foo" function(){
//    console.log('foo');
//  }