js的15种循环遍历

js的15种循环遍历

方式一： 原生的 js 循环

1.while 循环

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

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

---

2. do…while 循环

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

do {
    
    语句 
} while (条件)

//举例：
var x = 3;
var i = 0; 
do {
    
    console.log(i);
  	i++;
} while(i < x)

---

3.for 循环

for(var i = 0; i < filterarray.length; i++){
   
    alert(filterarray[i]);
}

//也可以写作
var i = 0;
for ( ;i < arr.length; ){
     //;必须加
  console.log(arr[i]);
  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就是坐标。

注意：for...in循环一般用于对象的遍历，但是这里有一个坑需要注意：

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

举例来说，对象都继承了toString属性，但是for...in循环不会遍历到这个属性。

var obj = {
   };// toString 属性是存在的obj.toString 
// toString() { [native code] }
for (var p in obj) {
    
     console.log(p);
} // 没有任何输出

​ 所有继承了 Object的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

​ 如果继承的属性是可遍历的，那么就会被for...in循环遍历到。但如果只想遍历自身的属性，使用for...in的时候，应该结合使用hasOwnProperty方法，在循环内部判断一下，某个属性是否为对象自身的属性。否则就可以产生遍历失真的情况。

var person = {
    name: '老张' };
for (var key in person) {
     
    if (person.hasOwnProperty(key)) {
      
         console.log(key);
      }
}// name

此外，for循环遍历json对象有点奇葩：

无规律json数组：

var json = [{
   dd:'SB',AA:'东东',re1:123}, {
   cccc:'dd',lk:'1qw'}];
for(var i = 0