javascript 的各种遍历循环方式

发布于2023-04-15 17:46:01字数2392

for 循环

var arr = ["a", "b", "c"];

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

通过不断累加数组索引来遍历输出数组中的值，用于对数组的遍历，如果对象要使用这种方式，则可通过 Object.keys 将对象 key 组成一个数组进行遍历:

var obj = { a: 1, b: 2, c: 3 };

var arr = Object.keys(obj);

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

for 循环可通过 return、break 中断循环。

forEach

var arr = ["a", "b", "c"];

arr.forEach((item, index, array) => {
	console.log(item, index.array);
});

数组的原型方法，通过调用数组的每个元素，并将元素传递给回调函数。回调函数中有三个参数，分别是 item：数组中当前调用的元素；index：数组中当前调用元素的下标；array：当前被调用的数组。

forEach 循环与 for 循环作用一致，使用起来会更加优美些，for 则更加灵活一些，通过 forEach 执行循环只会从头到尾调用元素，而 for 可从头到尾：i=0,i++;也可从尾到头:i=arr.length,i--；或是从不同位置开始遍历，修改遍历位置等等各种方式。

并且 for 循环可中断，forEach 则无法中断

for...in

const obj = { a: 1, b: 2, c: 3 }; //或者obj = [9,8,7]

for (const key in obj) {
	console.log(key); //a,b,c
}

通过取出数组或对象的 key 进行遍历，如遍历的是数组则 key 为数组的下标；对比for循环，for...in不止可以遍历数组也可以遍历对象，但是for...in有个需要注意的点，for...in在遍历数组或对象的过程中也会将其proto原型中自定义的属性一同遍历，如：

const obj = { a: 1, b: 2, c: 3 };
obj.__proto__.test = 4;

for (const key in obj) {
	console.log(key); //a,b,c,test
}

如需只遍历对象中的属性而不遍历原型中的属性，使用 hasOwnProperty 判断属性是否在本对象上即可：

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
	if (Object.prototype.hasOwnProperty.call(obj, key)) {
		const el = obj[key];
		console.log(key); //a,b,c
	}
}

for...of

var arr = ["a", "b", "c"];

for (const iterator of arr) {
	console.log(iterator); //a,b,c
}

ES6 新增的遍历循环语法，用来对迭代器进行遍历，与for...in不同的是for...in取出的是被遍历元素的 key 或下标，for...of取出的则是值，且for..in会遍历在原型上的自定义属性，而for...of不会。

map

也是数组的原型方法，与forEach使用方式相同，不同点在于 map 方法可通过 return
方式在回调函数中返回值，并且该值将于其他的返回值组成一个新的数组：

var arr1 = [1, 2, 3, 4];
var arr2 = arr1.map((item) => {
	return item * 2;
});
console.log(arr2); //[2,4,6,8]

如没有使用 return 返回值，则新生成的数组中的值为 undefined。

while

let i = 5;
while (i > 0) {
	console.log(i); //5,4,3,2,1
	i--;
}

条件遍历，通过判断while(条件)中的条件是否为真来确定是否继续循环遍历，中断方式则是将条件改为 false。while方法需要谨慎使用，错误的条件判断容易导致无限的循环执行，使浏览器奔溃。

do...while

let a = 5;
do {
	console.log(a);
	a--;
} while (a > 5);

与while差不多，只是do...while最少执行一次，do 命令在前，先执行一次后再通过判断 while 中的条件是否为真决定是否继续循环执行。

评论

back top