JS循环遍历方法
本文主要总结一下 javascript 遍历方法。
# for
let arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
console.log(i, arr[i]);
}
// 0 1
// 1 2
// 2 3
2
3
4
5
6
7
8
for 循环是最常用的遍历方法,主要用来遍历数组。
# for in
let obj = { name: "Li", age: 18 };
for (i in obj) {
console.log(i, obj[i]);
}
// name Li
// age 18
2
3
4
5
6
for in 主要是遍历对象,i 表示对象 obj 的 key,obj[i]表示 value;当用于遍历数组时,i 输出为字符串形式,而不是数组需要的数字下标,这意味着在某些情况下,会发生字符串运算,导致数据错误,比如:'9'+1 = '91' 而不是我们需要的 10,所以不建议用来遍历数组。 另外 for in 循环的时候,不仅遍历自身的属性,还会找到 prototype 上去,所以最好在循环体内加一个判断,就用 obj[i].hasOwnProperty(i),这样就避免遍历出太多不需要的属性。
# while
let arr = [1, 2, 3];
var i = 0;
while (arr[i]) {
console.log(i, arr[i]);
i++;
}
// 0 1
// 1 2
// 2 3
2
3
4
5
6
7
8
9
10
while 循环会在指定条件下重复执行代码块。与 for 循环原理是一样的,只是 for 循环将条件判断、定义和自增都放在一个条件里了。
# do/while
var str = "number is",
i = 0;
do {
console.log(str + i); // number is0 number is1
i++;
} while (i < 2);
2
3
4
5
6
do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环,否则就结束循环。
# forEach(Array)
let arr = [1, 2, 3];
arr.forEach(function (item, index, arr) {
console.log(index, item, arr);
});
// 0 1 [1,2,3]
// 1 2 [1,2,3]
// 2 3 [1,2,3]
2
3
4
5
6
7
8
forEach 循环 循环数组中的每一个元素并操作,直接修改原数组,没有返回值;一共有三个参数:item(数组的每一项),index(下标),arr(原数组),只有 item 是必须的。 注意:forEach 循环在所有元素调用完毕之前是不能停止的,它没有 break 语句,如果你必须要停止,可以尝试 try catch 语句,就是在要强制退出的时候,抛出一个 error 给 catch 捕捉到,然后在 catch 里面 return,这样就能中止循环了。
# map(Array)
let arr = [1, 2, 3];
let arr2 = arr.map(function (item) {
console.log(item); // 1 2 3
return item + 1;
});
console.log(arr2); // [2, 3, 4]
2
3
4
5
6
map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
# filter(Array)
let arr = [1, 2, 3];
let arr2 = arr.filter(function (item) {
return item < 3;
});
console.log(arr2); // [1, 2]
2
3
4
5
filter()方法是 Array 对象内置方法,它会返回通过过滤的元素,不改变原来的数组。
# some(Array)
let arr = [1, 2, 3];
let bool = arr.some(function (item) {
return item < 3;
});
console.log(bool); // true
2
3
4
5
some()方法用于检测数组中的元素是否满足指定条件(函数提供),返回 boolean 值,不改变原数组。
# every(Array)
let arr = [1, 2, 3];
let bool = arr.every(function (item) {
return item > 1;
});
console.log(bool); // false
2
3
4
5
every()方法用于检测数组所有元素是否都符合指定条件(通过函数提供),返回 boolean 值,不改变原数组。
# reduce(Array)
let arr = [1, 2, 3];
let arr2 = arr.reduce(function (i, j) {
return i + j;
});
console.log(arr2); // 6
2
3
4
5
reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
# reduceRight(Array)
let arr = [1, 2, 3];
let arr2 = arr.reduceRight(function (i, j) {
return i + j;
});
console.log(arr2); // 6
2
3
4
5
reduceRight()方法,和 reduce() 功能是一样的,它是从数组的末尾处向前开始计算。
# for of
let arr = ["a", "b", "c"];
for (let i of arr) {
console.log(i);
}
// 'a'
// 'b'
// 'c'
2
3
4
5
6
7
for of 循环是 Es6 中新增的语句,用来替代 for in 和 forEach,它允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代(Iterable data)的数据结构。