在讲循环的之前，先知道一下循环结构的执行步骤
- 声明循环变量；
- 判断循环条件;
- 执行循环体操作；
- 更新循环变量；
- 然后循环执行2-4，直到条件不成立，跳出循环。
一、原生JS中的循环：
（一）while循环（先判断循环条件，再执行循环操作）
var num=1;//1、声明循环变量 while (num<=10){//2、声明判断循环条件 console.log(num + “<br />” ;//3、声明循环要执行的操作 num++;//4、循环变量更新 }
①Boolean：true为真，false为假；
②String：空字符串为假，所有非空字符串为真；
③Number：0为假，一切非0数字为真；
④null/Undefined/NaN:全为假；
⑤Object：全为真。
（二）do while循环（先执行一次循环操作，再进行循环条件判断，如果成立继续执行，如果不成立则跳出循环）
var num=10;//1、声明循环变量 do { console.log(num+"<br />");//2、执行循环体操作 num--;//3、更新循环变量 }while(num==0);//4、判断循环条件是否成立
（三）for循环
//1、for有三个表达式：①声明循环变量；②判断循环条件；③更新循环变量；三个表达式之间，用;分割，for循环三个表达式都可以省略，但是两个“;”缺一不可。 //2、for循环的执行特点：先判断再执行，与while相同 //3、for循环三个表达式都可以有多部分组成，第二部分多个判断条件用&& ||连接，第一三部分用逗号分割； for (var i=0; i<5; i++){ console.log(i);// }
(四)for in循环（主要用于遍历对象）
//for()中的格式：for(keys in zhangsan){} //keys表示obj对象的每一个键值对的键！！所有循环中，需要使用obj[keys]来取到每一个值！！！ // //for-in 循环，遍历时不仅能读取对象自身上面的成员属性，也能延续原型链遍历出对象的原型属性 //所以，可以使用hasOwnProperty判断一个属性是不是对象自身上的属性。 //obj.hasOwnProperty(keys)==true 表示这个属性是对象的成员属性，而不是原先属性
//先声明一个类
function Person(){
this.name="张三”；
this.age= 18;
this.sex="male";
this.fun=function(){}
}
//实例化一个对象
var zhangsan=new Person();
//用for in遍历这个对象
for(keys in zhangsan){
console.log(zhangsan[keys]);
}
（五）for -of循环
ES6 借鉴 C++、Java、C# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法。
一个数据结构只要部署了Symbol.iterator属性，就被视为具有iterator接口，就可以用for...of循环遍历它的成员。也就是说，for...of循环内部调用的是数据结构的Symbol.iterator方法。
for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。
1、数组（JavaScript 原有的for...in循环，只能获得对象的键名，不能直接获取键值。ES6 提供for...of循环，允许遍历获得键值。）
var arr = ['a', 'b', 'c', 'd']; for (let a in arr) { console.log(a); // 0 1 2 3 } for (let a of arr) { console.log(a); // a b c d }
//上面代码表明，for...in循环读取键名，for...of循环读取键值。如果要通过for...of循环，获取数组的索引，可以借助数组实例的entries方法和keys方法
2、Set和Map结构
var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]); for (var e of engines) { console.log(e); } // Gecko Trident Webkit var es6 = new Map(); es6.set("edition", 6); es6.set("committee", "TC39"); es6.set("standard", "ECMA-262"); for (var [name, value] of es6) { console.log(name + ": " + value); } // edition: 6 // committee: TC39 // standard: ECMA-262 //上面代码演示了如何遍历 Set 结构和 Map 结构。值得注意的地方有两个，首先，遍历的顺序是按照各个成员被添加进数据结构的顺序。
//其次，Set 结构遍历时，返回的是一个值，而 Map 结构遍历时，返回的是一个数组，该数组的两个成员分别为当前 Map 成员的键名和键值。
3、类似数组的对象类似数组的对象包括好几类。下面是for...of循环用于字符串、DOM NodeList 对象、arguments对象的例子。（）
// 字符串 var str = "hello"; for (let s of str) { console.log(s); // h e l l o } // DOM NodeList对象 let paras = document.querySelectorAll("p"); for (let p of paras) { p.classList.add("test"); } // arguments对象 function printArgs() { for (let x of arguments) { console.log(x); } } printArgs('a', 'b');// 'a' 'b'
与其他遍历语法的比较
for...in循环有几个缺点
①数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
②for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
③某些情况下，for...in循环会以任意顺序遍历键名。
for...in循环主要是为遍历对象而设计的，不适用于遍历数组。
for...of循环
有着同for...in一样的简洁语法，但是没有for...in那些缺点。
不同于forEach方法，它可以与break、continue和return配合使用。
提供了遍历所有数据结构的统一操作接口。
二、Jquery中的循环：
（一）each()方法
（二）map方法
三、VUE中的循环：
（一）v-for指令
//迭代一个数组
<div id="app1">
<ul>
<li v-for="fru in fruites">
{{fru}}
</li>
</ul> <ol> <li v-for="site in sites"> {{site.name}} </li> </ol> </div>
//在模板中这样使用
<ul>
<template v-for="site in sites">
<li>{{site.name}}</li>
</template>
</ul>
new Vue({ el: '#app1', data: {
fruits: ['orange', 'apple', 'banana'], sites: [ {name: 'runoob'}, {name: 'google'}, {name: 'taobao'} ] } })
//通过一个对象的属性来迭代数据 <div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> //也可以提供第二个的参数为键名(通过一个对象的属性来迭代数据) <div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div> //也可以提供第三个的参数为索引(通过一个对象的属性来迭代数据) <div id="app"> <ul> <li v-for="(value, key，index) in object"> {{ index }}.{{ key }} : {{ value }} </li> </ul> </div> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } })
//迭代一个整数
<ul id="app">
<li v-for="n in 10">
{{n}}
</li>
</ul>