JS的for循环

JS的for循环

前言

在js的开发中，循环是经常用到的，不管是for循环还是while循环亦或者是do … while循环。这些都是前端开发必备技能。今天说一下，for循环。

从for循环说起

在ES6还没出来前，我们使用for循环遍历一个数组时：

var ary = [1,2,3,4,6,7];
for(var i=0;i<ary.length;i++)[
console.log(ary[i])
}

像这样，对于数组，类数组，甚至于String、Number类型，我们都可以使用这样的结构来循环。当然，这样的for循环还可以结合break,continue、return使用。

for…in循环

JSON数据及Object的一些可枚举的属性，需要遍历时，for循环似乎失效了。于是for…in循环登场了。

let data = {a:1,b:2,c:3};
for(let prop in data) {
  console.log(prop)
}

for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
可以说，for…in是为遍历对象属性而生的，不建议和数组一起使用（数组的遍历一般是按顺序的）。for…in中使用return、break、continue不会结束循环。

for…of迭代

for…of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句. 如：

let data = [10, 20, 30];

for (const value of data ) {
  console.log(value);
}

对于for…of的循环，可以由break, throw continue 或return终止，迭代器关闭。
for…of循环还可以迭代生成器。如：

var gen = (function *(){
    yield 1;
    yield 2;
    yield 3;
})();
for (let o of gen) {
    console.log(o);
    break;//关闭生成器
}

for…of循环在退出循环后，生成器关闭，并尝试再次迭代，不会产生任何进一步的结果,即上例中再次循环，不会有结果：

for (let o of gen) {
    console.log(o);
}

for…in 与for…of的区别

for…in 语句以任意顺序迭代对象的可枚举属性(包含继承过来的属性)。

for…of 语句遍历可迭代对象定义要迭代的数据。

vue中的v-for循环

v-for="…of…“与 v-for=”…in…“都可以遍历对象及数组；
但是v-for=”…of…“遍历数组、v-for=”…in…"遍历对象属性，这样比较贴近Js语法。