js中数组的各种遍历方式

js中数组的各种遍历方式

一、ES5中数组遍历方式

let arr = [1, 2, 3, 2, 4]

1、for循环

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

// 1 2 3 2 4

2、forEach()：没有返回值，调用数组的每个元素，并将元素传递给回调函数。

// 参数：item(必需)->当前元素
//      index(可选)->当前元素的索引值
//      array(可选)->当前元素所属的数组对象

arr.forEach(function (item, index, array) {
    console.log(item, index)
})

// 1 0
// 2 1
// 3 2
// 2 3
// 4 4

注意：

forEach 的代码块中不能使用 break、continue，它会抛出异常。

3、map()：返回新的数组，按照原始数组元素顺序依次处理元素。

let res = arr.map(function (item, index, array) {
    return item + 1
})

console.log(arr, res)

// [1, 2, 3, 2, 4] 
// [2, 3, 4, 3, 5]

4、filter()：返回符合条件所有元素的数组

let res = arr.filter(function (item, index, array) {
    return item == 2
})

console.log(arr, res)

// [1, 2, 3, 2, 4]
// [2, 2]

5、some()：返回Boolean，检测数组中的元素是否满足指定条件

let res = arr.some(function (item, index, array) {
    return item == 4
})

console.log(arr, res)

// [1, 2, 3, 2, 4] true

6、every()：返回Boolean，判断每个元素是否符合function条件

let res = arr.every(function (item, index, array) {
    return item == 2
})

console.log(arr, res)

// [1, 2, 3, 2, 4] false

7、reduce()：接收一个函数作为累加器

• 累加

// prev(必需)->初始值, 或者计算结束后的返回值。
// cur(必需)->当前元素

let sum = arr.reduce(function (prev, cur, index, array) {
    return prev + cur
}, 0) // 0 可选-传递给函数的初始值

console.log(arr, sum)

// [1, 2, 3, 2, 4] 12

• 取最大

let max = arr.reduce(function (prev, cur, index, array) {
    return Math.max(prev, cur)
})

console.log(arr, max)

// [1, 2, 3, 2, 4] 4

• 去重

let res = arr.reduce(function (prev, cur, index, array) {
    prev.indexOf(cur) == -1 && prev.push(cur)
    return prev
}, [])

console.log(arr, res)

// [1, 2, 3, 2, 4] 
// [1, 2, 3, 4]

8、for in

for (let index in arr) {
    console.log(arr[index]);
}

// 1 2 3 2 4

注意：

// 如果在Array上添加原型方法，for...in也会将其输出

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

for (let index in arr) {
    console.log(arr[index]);
}

// 1 2 3 2 4
/* 
ƒ () {
	console.log('foo');
}
*/

for…in代码块中不能有 return，不然会抛出异常。

二、ES6中数组遍历方式

1、for…of

for (let val of [1, 2, 3]) {
    console.log(val);
}

// 1,2,3

乍一看觉得它并没有什么强大之处。这里就强调下for…of的来历和作用。

for (variable of iterable) {

}

of后面是iterable既不是for循环规定的array，也不是for…in规定的object，而是iterable。

如果查查 iterable 的含义就很直观的感受到 for…of 遍历的是**一切可遍历的元素（数组、对象、集合）**等。

for (let item of arr) {
    console.log(item);
}
// 1 2 3 2 4

for (let item of arr.values()) {
    console.log(item)
}
// 1 2 3 2 4

for (let item of arr.keys()) {
    console.log(item)
}
// 0 1 2 3 4

for (let [index, item] of arr.entries()) {
    console.log(index, item)
}
// 0 1
// 1 2
// 2 3
// 3 2
// 4 4

TIP

for…of是支持 break、continue、return的，所以在功能上非常贴近原生的 for。

2、Array.from()

Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

console.log(Array.from('foo'));
// ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// Array [2, 4, 6]

语法：Array.from(arrayLike[, mapFn[, thisArg]])

参数	含义	必/可选
arrayLike	想要转换成数组的伪数组对象或可迭代对象	必
mapFn	如果指定了该参数，新数组中的每个元素会执行该回调函数	可
thisArg	可选参数，执行回调函数 mapFn 时 this 对象	可

将伪数组转换成真正的数组

let arrayLike = {
    0: '张三', 
    1: '30',
    2: '男',
    3: ['李四','王五','二麻子'],
    'length': 4
}
let res = Array.from(arrayLike)
console.log(res)

// ["张三", "30", "男",['李四','王五','二麻子']

具备 map 的功能

let res = Array.from(arr, item => item + 1)
console.log(res)

// [2, 3, 4, 3, 5]

3、Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

Array.of(7); // [7]			// 创建一个具有单个元素 7 的数组
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]		// 创建一个长度为7的空数组
Array(1, 2, 3); // [1, 2, 3]

4、Array.prototype.find()

find()方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

let array = [1, 5, 12, 100, 8];

let found = array.find(function(item) {
    return item > 10;
});

console.log(found);

// 12

5、Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

let array = [1, 5, 12, 100, 8];

let found = array.findIndex(function(item) {
    return item > 10;
});

console.log(found);

// 2

参考链接：https://coding.imooc.com/class/444.html