JavaScript几种常见循环遍历使用和区别
短信预约 -IT技能 免费直播动态提醒
前言
在javascript语言中经常需要使用循环语法去获取数据中的一些值，例如，我们需要将列表中的商品逐个输出，或者运行相同的代码将数字 1 到 10 逐个输出。方法也比较多，该篇将讲解常见的循环遍历的使用及区别
1.“for” 循环：它是最常使用的循环形式
对以上代码做出解释
| begin | let i = 0 | 进入循环时执行一次。 |
|---|---|---|
| condition | i <= 3 | 在每次循环迭代之前检查，如果为 false，停止循环。 |
| body（循环体） | alert(i) | 条件为真时，重复运行。 |
| step | i++ | 在每次循环体迭代后执行。 |
2."for..in" 循环：为了遍历一个对象的所有键（key）
for (key in object) {
// 对此对象属性中的每个键执行的代码
}
// 案例：拿到对象中的键
let user = {
name: "千锋教育",
age: 11,
isAdmin: true
};
for (let key in user) {
// keys
alert( key ); // name, age, isAdmin
// 属性键的值
alert( user[key] ); // 千锋教育,11， true
}3.for..of：不能获取当前元素的索引，只是获取元素值
let arr = ["千锋教育", "HTML5学科", "前端扛把子"];
for (let key of arr) {
alert( arr[key] ); // 千锋教育,HTML5学科，前端扛把子
}对于以上常见三种的循环总结：
- for循环：常见的基础循环、可以提前break
- for..in循环：用于遍历对象属性、得到对象中的键(字符串)、不可以直接进行数学运算、可以提前break
- for..of循环：用于遍历数组和可迭代对象的循环、得到数组对象中的值、可以提前break
4.forEach：允许为数组的每个元素都运行一个函数
arr.forEach(function(item, index, array) {
// ... 执行代码
});
// 案例：
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
console.log(item) // 1,2,3,4,5
});// undefined
// 没有返回值，本质上等同于 for 循环，对每一项执行 function 函数，不会改变原数组5.Map and Set（映射和集合）
Map是一组键值对的结构，具有极快的查找速度
let arr = ['HTML5', 'Java', 'python'];
let age = [100, 80, 90];
let res = new Map([['HTML5', 100], ['Java', 80], ['python', 90]]);
res.get('HTML5'); // 100
// Map常见的方法
let res = new Map(); // 空Map
res.set('勇哥', 18); // 添加新的key的value
res.has('勇哥'); // 是否存在key
res.get('勇哥'); // 18
res.delete('勇哥'); // 删除key
res.get('翔哥'); // undefined
// Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key
let set = new Set(["千锋教育", "HTML5", "11"]);
for (let value of set) alert(value);
// 与 forEach 相同：
set.forEach((value, valueAgain, set) => {
alert(value);
});Map和Set的总结：
- Map是一个带键的数据项的集合、任何键、对象都可以作为键
- Set是一组唯一值的集合、不能对元素进行重新排序，也不能直接按其编号来获取元素
以上：作为比较高频的面试题，同学们可以针对练习记忆！
到此这篇关于JavaScript几种常见循环遍历使用和区别的文章就介绍到这了,更多相关JS循环遍历内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
