各类循环

1.while 循环:

         While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件) 语句; 
 
// 或者
 while (条件) 语句;
 
//举例：
var i = 0; 
while (i < 100) { 
    console.log('i 当前为：' + i); i = i + 1; 
}
 

 

2. do……while循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do 语句 while (条件
 
// 或者
do { 
    语句 
} while (条件);
 
//举例：
var x = 3;
var i = 0; 
 
do { 
    console.log(i); i++; 
} while(i < x);

3.for循环：

 

 遍历数组
let arr = [1,2,3];
for(let i = 0;i < arr.length;i++){
    console.log(i) // 索引，数组下标
    console.log(arr[i]) // 数组下标所对应的元素
}

遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){
    console.log(keys[i]) // 对象的键值
    console.log(profile[keys[i]]) // 对象的键对应的值
}

遍历字符串
let str = "abcdef";
for(let i = 0;i < str.length ;i++){
    console.log(i) // 索引 字符串的下标
    console.log(str[i]) // 字符串下标所对应的元素
}
遍历DOM 节点
let articleParagraphs = document.querySelectorAll('.article > p');
for(let i = 0;i<articleParagraphs.length;i++){
articleParagraphs[i].classList.add("paragraph");

for语句是最原始的循环语句。定义一个变量i(数字类型，表示数组的下标),按照一定的条件，对i进行循环累加。
条件通常为循环对象的长度，当超过长度就停止循环。因为对象无法判断长度，所以搭配Object.keys()使用。
for(var i=0;i<filterarray.length;i++){
 
    alert(filterarray[i]);
 
}

4.增强for…in循环：

var obj = {a: 1, b: 2, c: 3}; 
 
for (var i in obj) { 
    console.log('键名：', i); 
    console.log('键值：', obj[i]); 
} 
// 键名： a // 键值： 1 // 键名： b // 键值： 2
 
// 其中 obj为循环的对象， i 为对象中的“键名”。如果对象是数组，那么i就是坐标。

fo…in循环一般用于对象的遍历
 任何对象都继承了Object对象，或者其它对象，继承的类的属性是默认不可遍历的，for... in循环遍历的时候会跳过，但是这个属性是可以更改为可以遍历的，那么就会造成遍历到不属于自身的属性。
　　对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

var obj = {};// toString 属性是存在的obj.toString 
// toString() { [native code] }
for (var p in obj) { 
     console.log(p);
} // 没有任何输出
如果继承的属性是可遍历的，那么就会被for...in循环遍历到。但如果只想遍历自身的属性，使用for...in的时候，应该结合使用hasOwnProperty方法
在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。
var person = { name: '老张' };
for (var key in person) {  
    if (person.hasOwnProperty(key)) {   
         console.log(key);
      }
}// name

5.forEach循环

　　forEach 提出。自称是for语句的加强版，可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组，因此，不会改变原数组。返回值是undefine。
　　forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。也就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

/遍历数组
let arr = [1,2,3];
arr.forEach(i => console.log(i))

logs 1
logs 2
logs 3
 直接输出了数组的元素

遍历对象
let profile = {name:"April",nickname:"二十七刻",country:"China"};
let keys = Object.keys(profile);
keys.forEach(i => {
    console.log(i) // 对象的键值
    console.log(profile[i]) // 对象的键对应的值
})

function log(element, index, array) {
     console.log('[' + index + '] = ' + element); 
} ；
 
[2, 5, 9].forEach(log); // [0] = 2 // [1] = 5 // [2] = 9

6.map()循环：

          map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

var numbers = [1, 2, 3];
 
numbers.map(function (n) { 
     return n + 1; 
}); 
// [2, 3, 4] 
 
numbers // [1, 2, 3]  是返回一个新数组，而不会改变原数组。

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。
[1, 2, 3].map(function(elem, index, arr) { 
    return elem * index; 
}); 
// [0, 2, 6]
此外，map()循环还可以接受第二个参数，用来绑定回调函数内部的this变量，将回调函数内部的this对象，指向第二个参数，间接操作这个参数（一般是数组）。

var arr = ['a', 'b', 'c'];
 
[1, 2].map(function (e) {
    return this[e];
}, arr)
 // ['b', 'c']