JS中的一些遍历方法

1、遍历数组

以下遍历方法中for循环性能最好，而且优化版for循环性能最高。只有forEach不能跳出循环。

在循环数组时，如果在循环过程中对数组进行了增删改，那么在后面的每次循环中，进行操作的都是已经修改过后的数组。

let arr = ['a','b','c','d'];  
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  if(i ==0 || i ==1) {
    arr.splice(i, 1);
  }
}
console.log(arr);  //此时输出 ["b", "d"]  而不是  ["c", "d"]，即实际上删除了 a、c

1.1、for循环

该循环可以使用 break、continue 来跳出循环，若该循环放在函数体内则可以使用 return ，return 只能在函数体内使用。

var arr = [1,2,3]
for(var i=0; i<arr.length; i++) {
  console.log(arr[i])   //1,2,3  
}
//优化版for循环，对于较大的数组优化比较明显
for(var i=0,len = arr.length; i<len; i++) {
  console.log(arr[i])  //1,2,3
}

注意，以上循环是先判断再执行，第一次执行也需判断

1.2、forEach循环

forEach循环每个元素是值。

该循环无法中途跳出循环，break、continue、return都无法使用。

var arr = [1,2,3]
arr.forEach(function(value, index, arr){
  console.log(value, index, arr)  
})
//value：必需，当前数组元素的值
//index：可选，当前元素的索引
//arr：可选，当前元素所属的数组对象

1.3、for...in循环

for...in循环每个元素是索引，该循环效率比较低。for...in 循环不太适用于遍历数组，主要是为遍历对象而设计的。

该循环可以使用 break、continue 来跳出循环，若该循环放在函数体内则也可以使用 return 。

//用于数组
var arr = [1,2,3,4]
for (var i in arr) {
  console.log(arr[i])   //1,2,3,4
}
//用于对象
var obj = {'a':1, 'b':2, 'c':3}
for (var j in obj) {
  console.log(obj[j])   //1,2,3
}

1.4、for...of循环 （es6新引入）

for...of循环每个元素是值。该循环不支持对象。

该循环可以使用 break、continue 来跳出循环，若该循环放在函数体内则也可以使用 return。

var arr = [1,2,3]
for (var value of arr) {
  console.log(value)
}
for (var value of arr) {
　if(value> 2)
　　break;　　　　    //break跳出循环
 console.log(value)
}　　　　　　　　     //输出：1  2 

1.5、map循环

map 循环可以遍历数组

map的回调函数中支持 return返回值，return 后面的值将返回作为新数组的元素，原数组不会改变。

 array.map(function(val,index,arr){})

let arr = ['a','b','c'];
arr.map(function(val,index,arr){
  console.log(val,index,arr);   // ["a", "b", "c"]
})
let arr2 = arr.map(function(val,index,arr){
  return 'new '+val;      
})
console.log(arr2)      //["new a", "new b", "new c"]

2、遍历对象

2.1、可枚举性的概念

对象的每个属性都有一个描述对象（Descriptor），用来控制该属性的行为。Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。

let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述对象的enumerable属性，称为“可枚举性”，如果该属性为false，某些操作比如一些遍历操作会忽略当前属性。

目前，有四个操作会忽略enumerable为false的属性。

• for...in循环：只遍历对象自身的和继承的可枚举的属性。
• Object.keys()：返回对象自身的所有可枚举的属性的键名。
• JSON.stringify()：只串行化对象自身的可枚举的属性。
• Object.assign()：忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

2.2、for...in方法遍历

该遍历方法输出的是对象自身的属性以及原型链上可枚举的属性。不含Symbol属性。（包含所有可枚举的）（不含 Symbol 的）

var obj = {
  'name': "wen",
  'age': '12',
};
Object.prototype.country = 'china'; //在原型链上添加属性，默认的可枚举性是 true
console.log(obj);
for (var index in obj) {
  console.log(index,obj[index])
}

2.2、利用Object.keys(obj)实现遍历

Object.keys返回一个数组，该数组由对象自身的所有可枚举属性的键名组成。（只包含自身可枚举的）（不含 Symbol 的，不含继承的）

var obj = {
  'name': "wen",
  'age': '12',
};
Object.keys(obj).forEach(function(item){
  console.log(obj[item]);
})

2.3、Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组，该对象由对象自身所有的属性的键名组成。（包括自身所有的）（不含 Symbol  的，不含继承的）

2.4、Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组，包含对象自身的所有键名，不管键名是 Symbol 或字符串，也不管是否可枚举。（包含所有的除了继承）

3、跳出循环：break、continue

3.1、break（结束整个循环操作）

for(var i=1;i<=10;i++) { 
    if(i==8) { 
        break; 
    } 
    console.log(i)    //1234567
} 

但是要注意，break语句跳出的是自己所在的那一层 for 循环语法，如果有多个 for 循环嵌套，break 总是跳出自己所在的那一层 for 循环。

for (let i=1; i<=10; i++) {
     for (let j=1; j<=10; j++) {
         if (j >= i) {
              break;
          }
      }
     // break 只是跳到这里，外层的for循环还在继续
    console.log('break');
}

3.2、continue（跳过本次循环，继续执行下一个循环）

for(var i=1;i<=10;i++) { 
    if(i==8) { 
        continue; 
    } 
    console.log(i)    //1234567910
} 

3.3、return

return语句只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！return语句就是用于指定函数返回的值。

function a() {
  for(let i=0; i<10; i++){
    console.log(i);
    if(i==3){
      return 'aaa';
    }
  }
}
console.log(a());

//报错：Uncaught SyntaxError: Illegal return statement
for(var i=1;i<=10;i++) { 
    if(i==8) { 
        return; 
    } 
    console.log(i) 
}