JavaScript各种遍历循环

for in

for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性，ES5标准。

为什么用 for ... in?

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of，那么for ... in的到底有什么用呢？

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in。

for in 对于数组和对象。

1. 会遍历原型链上的key,可配合hasOwnProperty进过滤
2. 顺序不定
3. break, continue可正常执行。
4. return不能执行（报错"Uncaught SyntaxError: Illegal return statement"）

点击查看代码

const arr = ['a', 'b', 'c', 'd'];
Array.prototype.testxx = 'testxx1';
arr.testyy = 'testyy1';

for (let key in arr) {
    // console.log(key);
    if (arr.hasOwnProperty(key)) {
        // console.log(key);
    }
}


const obj = { a: 001, b: 002, c: '003' };
Object.prototype.testObjxx = 'testxx2';

for (let key in obj) {
    console.log(key);
    // break;
    // continue;
    // return;
    console.log(11);
}

for of

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。没有迭代器的对象不能for of。

1. 可以由 break, throw 或 return 终止。
2. 遍历出的为值。

点击查看代码

const arr = ['a', 'b', 'c', 'd'];
Array.prototype.testxx = 'testxx1';
arr.testyy = 'testyy1';

for (let val of arr) {
    console.log(val);
}

forEach(),map(),filter(),some(),every()

是数组的实例方法，break和continue不能正常执行，return仅仅跳出当前循环，不会跳出整个函数。

遍历对象

Object.keys(); // 返回对象属性名，只有可枚举属性，ES5方法。
Object.getOwnPropertyNames(); // 返回对象属性名，包含不可枚举属性，ES5方法。
Object.values(); // ES2017 引入
Object.entries(); // ES2017 引入
// 返回数组，然后再调用数组的遍历方法。