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)

}

巴特西

JS中的一些遍历方法

1、遍历数组

1.1、for循环

1.2、forEach循环

1.3、for...in循环

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

1.5、map循环

2、遍历对象

2.1、可枚举性的概念

2.2、for...in方法遍历

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

2.3、Object.getOwnPropertyNames(obj)

2.4、Reflect.ownKeys(obj)

3、跳出循环：break、continue

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

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

3.3、return

最新文章

热门文章

巴特西

JS中的一些遍历方法

1、遍历数组

1.1、for循环

1.2、forEach循环

1.3、for...in循环

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

1.5、map循环

2、遍历对象

2.1、可枚举性的概念

2.2、for...in方法遍历

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

2.3、Object.getOwnPropertyNames(obj)

2.4、Reflect.ownKeys(obj)

3、跳出循环：break、continue

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

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

3.3、return

最新文章

热门文章

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