1. 在ES5中常用的10种数组遍历方法:
- for循环语句
- Array.prototype.forEach
- Array.prototype.map
- Array.prototype.filter
- Array.prototype.reduce
- Array.prototype.some
- Array.prototype.every
- Array.prototype.indexOf
- Array.prototype.lastIndexOf
- for…in循环语句
1. for:简洁明了,通俗易懂,可能需要多写点代码,多定义几个变量
「普通版」
let arr = [1, 2, 3, 4, 5];
for(let i = 0; i < arr.length; i++) {
arr[i] = arr[i] * 2;
}
console.log(arr);
「升级版」
let arr = [1, 2, 3, 4, 5];
for(let i = 0; len = arr.length,i < len; i++) {
arr[i] = arr[i] * 2;
}
console.log(arr);
2. forEach:接收两个参数,第一个参数是在每一项上运行的函数(拥有三个参数),第二个参数「可选的」是运行该函数的作用域对象(影响this的值),return不能中断函数继续执行,所以没有返回值,不能改变原数组,使用方便一般用来代替for,但是没for性能高,而且有兼容性(IE6-8)。
let arr = [1, 2, 3, 4, 5];
arr.forEach((value, index, array) => {
return value * 2;
});
console.log(arr);
3. map:基本用法和foreach相同,不同的是可以return返回值,但是不改变原数组,一般用来修改数组的值从而映射为一个新数组。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.map((value, index, array) => {
return value * 2;
});
console.log(arrs);
4. filter:顾名思义是"过滤",就是去掉不想要的值,return true为想要的值,return false则为去掉的值,一般用来过滤一个数组,不改变原来的数组。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.filter((value, index, array) => {
if (value > 2) {
return true;
} else {
return false;
}
});
console.log(arrs);
5. some:类似于filter,不同的是返回值为Boolean,不是筛选一个新的数组,而是筛选有没符合条件的值,只要有一个值满足即立刻返回true,不再继续执行,否则返回false。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.some((value, index, array) => {
return value > 3;
});
console.log(arrs);
6. every:类似于some,不同的是找到符合条件的值会继续执行,如果每个值都满足条件才会返回true,否则就是false。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.every((value, index, array) => {
return value > 3;
});
console.log(arrs);
let arr = [ 4, 5];
let arrs = arr.every((value, index, array) => {
return value > 3;
});
console.log(arrs);
7. reduce:可以实现一个累加器的功能,将数组的每个值(从左到右)累加起来,不同的是有四个参数,prev表示前两个值的和(没有定义初始值时为第一个值),next为后一个值。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.reduce((prev, next, index, array) => {
console.log(prev);
console.log(next);
return prev + next;
});
console.log(arrs);
8. indexOf:数组中的这个方法和字符串中的几乎一样,都是找到一个满足条件的值就不继续执行了,返回值是满足条件值的下标,否则返回-1。
let arr = [1, 2, 3, 4, 5];
let arrs = arr.indexOf(2);
console.log(arrs);
let arr = [1, 2, 3, 4, 5];
let arrs = arr.indexOf(6);
console.log(arrs);
9. lastIndexOf:类似于indexOf,不同的是查找方向是从后向前
let arr = [1, 2, 3, 4, 5, 1];
let arrs = arr.lastIndexOf(1);
console.log(arrs);
let arr = [1, 2, 3, 4, 5, 1];
let arrs = arr.lastIndexOf(6);
console.log(arrs);
10. for…in:主要用来遍历对象,其实数组的本质也是以key和value的键值对存在的,数组遍历的是下标,对象遍历的是key,一般用来遍历对象。
let arr = [1, 2, 3, 4, 5];
for(let i in arr) {
console.log(i);
}
let arr = {name: "lewis", age: 25};
for(let i in arr) {
console.log(i);
}
2. 在ES6中常用的for…of数组遍历方法:
let arr = [1, 2, 3, 4, 5];
for (let i in arr) {
console.log(i);
}
for (let i of arr) {
console.log(i);
}