for-in与for-of区别

for-in是ES5标准，遍历的是key（可遍历对象、数组或字符串的key）；for-of是ES6标准，遍历的是value（可遍历对象、数组或字符串的value）

1.遍历数组

    let arr = [9,8,7,6,5]
    for(let i in arr){
        console.log(i,arr[i])//i是key
    }
    for(var i of arr){
        console.log(i,arr[i])//i是value
    }

2.遍历数组及数组的原型

    let arr = [9, 8, 7, 6, 5]
    arr.name='shy'
    arr.foo = function(){
        return this.name
    }
    for (let i in arr) {//会遍历arr上所有的属性
        console.log(i, arr[i])//i是key
    }
    for (var i of arr) {//只会遍历arr数组内部
        console.log(i, arr[i])//i是value
    }

3.遍历对象

    let obj = {
        name: 'shy',
        age: 24,
        foo: function () {
            return this.name
        }
    }
    for (let i in obj) {//会遍历obj上所有的属性
        console.log(i, obj[i])//i是key
    }
    for (var i of obj) {
        console.log(i, obj[i])//obj is not iterable
    }
    for (var [key,value] of Object.entries(obj)) {
        console.log(key,value)
    }
    for (var key of Object.keys(obj)) {
        console.log(key)
    }
    for (var value of Object.values(obj)) {
        console.log(value)
    }

4.可以使用break,return,continue

    let arr = [9,8,7,6,5]
    for(let i in arr){
        console.log(i,arr[i])//i是key
        console.log(typeof i)
        if(i==='0'){
            break;
        }
    }
    for(var i of arr){
        console.log(i,arr[i])//i是value
        if(i===9){
            break;
        }
    }

5.遍历set与map

    let set = new Set();
    set.add("a").add("b").add("c").add("d");

    遍历Set
    for (let i of set) {
        console.log(i);//依次输出a,b,c,d
    }
    for (let i in set) {
        console.log(i);//无结果不报错
    }

    let map = new Map();
    map.set("a", 1).set("b", 2).set('c', 3);

    遍历Map
    for (let [key, value] of map) {
        console.log(key, value);//依次输出a 1,b 2,c 3
    }
    for (let key in map) {
        console.log(key);//无结果不报错
    }

相同点： 都可对数组或对象进行遍历,都可break,return,continue

不同点：

for in ：

1：会把数组的原型或属性的key值枚举出来

2：遍历顺序有可能不是按照数组的内部顺序。(可能是随机顺序)

3：i为string类型，非number类型

for of : 1: 只会把数组内部的value值遍历出来

2：遍历对象需搭配对象的部分方法使用

3：可以遍历set map

综上for-in 适合遍历对象 for-of适合遍历数组