一、最简单的for循环
const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
二、for-in ---- 循环遍历对象的属性
用for -in 可用来循环遍历的数组的内容,如下:
const arr = [1, 2, 3];
let index;
for(index in arr) {
console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
注意:for-in循环遍历的是该对象的属性,而不是数组的索引。所以,for-遍历的内容可以是数组,同时也可以是对象。例如:
const person = {
fname: "san",
lname: "zhang",
age: 29
};
let info;
for(info in person) {
console.log("person[" + info + "] = " + person[info]);
}
// 输出结果如下
// person[fname] = san
// person[lname] = zhang
// person[age] = 29
三、forEach循环
forEach 方法为数组中含有有效值的每一项执行一次 callback 函数。 callback 函数会被依次传入三个参数:
- 数组当前项的值;
- 数组当前项的索引;
- 数组对象本身;
添加数组当前项的索引参数,注意callback 函数中的三个参数顺序是固定的,不可以调整。
const arr = [1, 2, 3];
arr.forEach((data,index,arr) => {
console.log("arr[" + index + "] = " + data);
});
// 输出结果如下
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
forEach 将会遍历数组中的所有元素,但是 ES5 定义了一些其他用的方法:
- every: 循环在第一次 return false 后返回
- some: 循环在第一次 return true 后返回
- filter: 返回一个新的数组,该数组内的元素满足回调函数
- map: 将原数组中的元素处理后再返回
- reduce: 对数组中的元素依次处理,将上次处理结果作为下次处理的输入,最后得到最终结果。
四、for - of 循环 (ES6新增)
ES6之前的 3 种 for 循环有什么缺陷:
- forEach 不能 break 和 return;
- for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。
那 for-of 到底可以干什么呢?
- 跟 forEach 相比,可以正确响应 break, continue, return。
- for-of 循环不仅支持数组,还支持大多数类数组对象,例如 DOM nodelist 对象。
- for-of 循环也支持字符串遍历,它将字符串视为一系列 Unicode 字符来进行遍历。
- for-of 也支持 Map 和 Set (两者均为 ES6 中新增的类型)对象遍历。
总结一下,for-of 循环有以下几个特征:
- 这是最简洁、最直接的遍历数组元素的语法。
- 这个方法避开了 for-in 循环的所有缺陷。
- 与 forEach 不同的是,它可以正确响应 break、continue 和 return 语句。
- 其不仅可以遍历数组,还可以遍历类数组对象和其他可迭代对象。
但需要注意的是,for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用 for-in 循环(这也是它的本职工作)。
举一个最真实的例子吧:
最近在写Vue项目的时候要做一个数据匹配的方法(拿到id去自己的数据字典中进行id和name的匹配)我在for循环这样写的:
<span v-for=" item in detailForm.protocolIds" :key="item">
《{{ dataMatch(item) }}》
</span>
dataMatch方法我是这样定义的:
// 匹配协议名称
dataMatch(protocolId) {
this.options.forEach((item) => {
if (item.id === protocolId) {
return item.name
}
})
},
就是想返回当前的name,但是方法那里一直有一个警告是这样写的:
这时候我想到用forEach循环是不能在回调函数种进行return的,果断上了 for - of
let item
for (item of this.options) {
if (item.id === protocolId) {
return item.name
}
}
数据匹配成功!
感谢 Lynn_z 文章参考来源: https://www.cnblogs.com/lynn-z/p/13068866.html 感谢作者!