JS的四种 for loop

·  阅读 258

for loop

普通 for 循环

自行指定循环次数。
先来看一下常见写法:

const arr = [1, 2, 3];
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
复制代码

如果数组长度在循环过程中不会改变,将数组长度用变量存储起来会获得更好的效率,改进后的写法:

const arr = [1, 2, 3];
for(let i = 0, len = arr.length; i < len; i++) {
    console.log(arr[i]);
}
复制代码

forEach 循环

iterable可被迭代的对象都有forEach(callbackFn, ?thisArg)。 而Array, Map, Set对象都是可被迭代的。 forEach()接收一个回调函数callbackFn,每次迭代都回调该函数。 回调函数的参数列表为(value, key, iterable),依次是(值, 键, 可迭代的对象本身)。

iterable.forEach(function(value, key, iterable) {
  console.log(key, value, iterable);
});
复制代码

image.png

image.png

如果想要让每个数组相加,只需要 sum += value 相比原来方便了不少。

补充 forEach与some的区别,forEach找到了需要的value然后return出去后,并不会中止后续操作,还是能打印后面的元素,而some一旦return出去,就中止了操作。

for..in循环

属历史遗留,用于遍历对象的属性(数组的索引值也算属性)。
但有一个缺点:如果手动向数组添加成员属性,则:
虽然数组的length不变,但用for..in遍历数组会遍历到那些新定义的属性。

for (property in obj) {
  console.log(property, obj[property]);
}
复制代码
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-in 遍历的对象不局限于数组,还可以遍历对象。

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
复制代码

for-in 并不适合用来遍历 Array 中的元素,其更适合遍历对象中的属性,这也是其被创造出来的初衷。

for..of循环(ES6)

for..of循环修复了for..in存在的问题,他只遍历属于对象本身的属性值。
且这个对象必须是iterable可被迭代的。如Array, Map, Set。\

image.png

ES6之前的 3 种 for 循环有什么缺陷

  • forEach 不能 break 和 return;
  • for-in 缺点更加明显,它不仅遍历数组中的元素,还会遍历自定义的属性,甚至原型链上的属性都被访问到。而且,遍历数组元素的顺序可能是随机的。

所以,鉴于以上种种缺陷,我们需要改进原先的 for 循环。但 ES6 不会破坏你已经写好的 JS 代码。目前,成千上万的 Web 网站依赖 for-in 循环,其中一些网站甚至将其用于数组遍历。如果想通过修正 for-in 循环增加数组遍历支持会让这一切变得更加混乱,因此,标准委员会在 ES6 中增加了一种新的循环语法来解决目前的问题,即 for-of 。

那 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 循环(这也是它的本职工作)。

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改