循环与遍历语句总结：for、for...in、for...of、forEach

1. 使用

（1）for循环

//1.最常见的for循环方式使用频率高，性能/效率也是比较不错的
//在这里v输出的是下标
var arr = ['apple', 'orange']
for (let v = 0; v < arr.length; v++) {
    console.log(v, arr[v])
}

//2.for...of，语法简洁，只能应用数组
//直接获取输出内容，性能优于for...in
var arr = ['apple', 'orange']
for (let v of arr) {
    console.log(v)
}

（2）for…in

// 3.for...in，用于遍历Object多些，效率低于for,
// 主要用于遍历对象的可枚举属性，包括自有属性、继承自原型的属性
// for...of，对象可以使用Object.keys()
//在这里v输出的是下标
var objs = { 0: 'apple', 1: 'orange' }
for (let v in objs) {
    console.log(v, objs[v])
    //console.log(v, arr.v) 尽量不要使用arr.v 对于数字属性无法使用
}

（3）for…of

//for...of，对象可以使用Object.keys()
for (let v of Object.keys(objs)) {
    console.log(v, objs[v]);
}

（4）forEach

// forEach() 本身是不支持的 continue 与 break 语句的，我们可以通过 some 和 every 来实现,使用 return 语句实现 continue 关键字的效果
// 注意如果使用箭头函数 那么this将一直指向widow  回调函数默认指向window 上面的map也一样
var arr = { a: ['apple', 'orange'] }
arr.a.forEach(function (item, index, array) {
    // console.log(item);//apple orange
    // console.log(index);//0 1
    console.log(array);//['apple', 'orange']
    console.log(this);//['apple', 'orange']
}.bind(arr));

（5）map

//map会返回一个新数组 返回与创建对象导致性能不佳 如果你不需要拷贝数组，不需要考虑
var arr = ['apple', 'orange']
let arrRes = arr.map(function(item,index,array){
    console.log(item);
    return item
});

2. 性能对比：

for > forEach > for…of > for…in > map

最原始的for最好，而map因为要创建对象访问性能最差

(function () {
    


    let arr = [];
    for (let i = 0; i <= 100000; i++) {
        arr.push(i);
    }

    console.time("for");
    for (let i = 0; i < arr.length; i++) {
    }
    console.timeEnd("for");

    console.time("for...of");
    for (let item of arr) {

    }
    console.timeEnd("for...of");


    console.time("for...in");
    for (let key in arr) {
    }
    console.timeEnd("for...in");



    console.time("forEach");
    arr.forEach((item) => {
        return true;
    })
    console.timeEnd("forEach");

    console.time("map");
    arr.map((item) => {
        return true;
    })
    console.timeEnd("map");
})()

3. 常见问题

为什么for…in比for…of慢？

//for...in要去从原型链上查找数据，for...of不用
//for...in是用来遍历可枚举的对象，key是不是枚举的，要进行判断，存在性能消耗，同时继承和原型的查找也要判断枚举
//for...of实现了迭代器，是通过迭代器进行访问的
let arr = [1, 2, 3, 4]
const fn = arr[Symbol.iterator]();
fn.next();
fn.next()