文章目录
- 循环
- For
- For-of (ES6)
- For-in
- While
- Do-While
- 注意以上for与while方法均支持break与continue
- 数组遍历(不支持break与continue,return只是结束当前的回调函数执行)
- Array.prototype.forEach()
- Array.prototype.map()
- Array.prototype.filter()
- Array.prototype.reduce()
- Array.prototype.find()
- 对象遍历(配合forEach使用)
- Object.keys(), values(), entries()
在JavaScript中,循环与遍历是编程过程中常见的操作,用于重复执行一段代码或访问集合中的每个元素。以下是JavaScript中常见的几种循环与遍历方法
循环
For
最通用的循环结构,可以用于任何需要重复执行代码的情况。
可以精确控制迭代次数和迭代变量(索引)。
适用于数组、字符串等线性数据结构的遍历。
let array = [1, 2, 3, 4, 5];for (let i = 0; i < array.length; i++) {console.log(array[i]);
}
For-of (ES6)
针对可迭代对象设计,如数组、Set、Map、生成器函数返回的迭代器等。
直接迭代值而非索引,简化了迭代过程。
不支持非可迭代对象或类数组对象的遍历。
let array = [1, 2, 3, 4, 5];for (let item of array) {console.log(item);
}
For-in
主要用于遍历对象的可枚举属性,包括原型链上的属性(通过hasOwnProperty可以过滤掉原型链上的属性)。
不适用于数组遍历,因为数组的索引也会被视为属性被遍历,且顺序可能与预期不符。
let obj = { a: 1, b: 2, c: 3 };for (let key in obj) {if (obj.hasOwnProperty(key)) {console.log(key + ': ' + obj[key]);}
}
While
区别:只要条件表达式为真,就会一直执行循环体。初始化和更新操作通常放在循环体内部。适合当循环次数未知,只知道需要持续执行直到满足某个条件为止的情况。
let counter = 0;
while (counter < 5) {console.log(counter);counter++;
}
Do-While
在 do-while 循环中,无论条件是否满足,循环体内的代码至少会被执行一次。
let counter = 0;
do {console.log(counter);counter++;
} while (counter < 5);
在这个例子中,即使一开始 counter 的值为 0(不满足条件),它仍然会先执行一次循环体,然后检查条件并决定是否继续下一次循环。与 while 循环相同,这里也会输出从 0 到 4 的数字。
注意以上for与while方法均支持break与continue
使用 break 语句可以立即退出整个循环,而 continue 语句则会跳过当前循环体剩余的代码,并进入下一次循环(如果条件满足)。
另外return,不仅结束循环还结束整个函数
数组遍历(不支持break与continue,return只是结束当前的回调函数执行)
Array.prototype.forEach()
数组方法,遍历数组中的每个元素并对其执行回调函数。
回调函数接收三个参数:当前元素值、元素索引和原数组本身。
无法使用break语句跳出循环,也无法在forEach内部直接return来结束整个循环。
在forEach回调函数内部的return只能用于提前结束当前的回调函数执行,而不是跳出整个forEach循环。
不会创建新的数组,而是直接操作原数组。
let array = [1, 2, 3, 4, 5];array.forEach((item, index) => {console.log(item);
});
Array.prototype.map()
对数组中的每个元素应用一个函数,并返回一个新的数组,包含应用函数后的结果。
let numbers = [1, 2, 3, 4, 5];let squaredNumbers = numbers.map(number => number * number);console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]
Array.prototype.filter()
根据提供的测试函数过滤数组元素,并返回通过测试的元素组成的新数组
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];let evenNumbers = numbers.filter(number => number % 2 === 0);console.log(evenNumbers); // 输出: [2, 4, 6, 8]
Array.prototype.reduce()
从左到右对数组的每个元素应用一个累积函数(累计器),将其结果与下一个元素结合,最后返回单个输出值。
let numbers = [1, 2, 3, 4, 5];let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
//这里的0就是accumulator的初始值。
//如果没有提供初始值,则reduce()会使用数组的第一个元素作为初始值,并从数组的第二个元素开始迭代。
console.log(sum); // 输出: 15
Array.prototype.find()
查找数组中满足给定测试函数的第一个元素,如果找到则返回该元素,否则返回 undefined。
let users = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },{ id: 3, name: 'Charlie' }
];let user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }
对象遍历(配合forEach使用)
Object.keys(), values(), entries()
用于获取对象的键名、键值或键值对数组,之后可以配合forEach或其他迭代方法遍历。
let obj = { a: 1, b: 2, c: 3 };Object.keys(obj).forEach(key => {console.log(key + ': ' + obj[key]);
});Object.values(obj).forEach(value => {console.log(value);
});Object.entries(obj).forEach(([key, value]) => {console.log(key + ': ' + value);
});