区别:

1、for in遍历的是数组的索引(即键名),而 for of遍历的是数组元素值。

2、for in会遍历数组所有的可枚举属性,包括原型。for of遍历的只是数组内的元素,而不包括数组的原型

3、for in遍历顺序有可能不是按照实际数组的内部顺序

总结:

  • for..of 适用遍历数/数组对象/字符串/map/set等拥有迭代器对象的集合.但是不能遍历对象,因为没有迭代器对象.与forEach()不同的是,它可以正确响应break、continue和return语句
  • for-of循环不支持普通对象,但如果你想迭代一个对象的属性,你可以用for-in循环(这也是它的本职工作)或内建的Object.keys()方法,但是Object.keys()只能遍历对象自身属性不能遍历原型链上的属性  ,Note: 它同for..in一样不能保证属性按对象原来的顺序输出。
for (var key of Object.keys(someObject)) {
console.log(key + ": " + someObject[key]); 

}

案例分析:

  • 一.for in
    1.使用 for in 循环遍历对象的属性时,原型链上的所有属性都将被访问:
Object.prototype.say="cgl";   // 修改Object.prototype  
    var person ={ age: 18 };
    for (var key in person) {
        console.log(key, person[key]);//这里用person.key得不到对象key的值,用person[key] 或者 eval("person."+key);
    }   //结果: age 18 
                say cgl

2.只遍历对象自身的属性,而不遍历继承于原型链上的属性,使用hasOwnProperty 方法过滤一下。  

Object.prototype.say="cgl";
    var person ={
        age: 18
    };
    for (var key in person) {
        if(person.hasOwnProperty(key)){
            console.log(key, eval("person."+key));
        }
    }  //结果:age 18

二.Object.keys() 

Object.keys() 方法会返回一个由给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。返回值是这个对象的所有可枚举属性组成的字符串数组。Note: 它同for..in一样不能保证属性按对象原来的顺序输出。

Object.prototype.say="cgl";
var person ={ age: 18};
console.log(Object.keys(person));//结果  ["age"]

 小技巧:object对象没有length属性,可以通过Object.keys(person).length,来获取person的长度了。

开发中的实际应用

需求:将如下两个从后台不同端口获取的json对象数组整合处理成如下注释部分的json对象

var goodsSpecJSON = [{
                "SpecA": "颜色"
            }, {
                "SpecB": "容量"
            }, {
                "SpecC": "大小"
            }, {
                "SpecD": "尺寸"
            }, {
                "SpecE": "套餐"
            }];
var goodsSpecList = [{
    c_id: 3133,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "红色",
    specB: "32G",
    specC: "小",
    specD: "4.7寸",
    specE: "套餐一",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3134,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "白色",
    specB: "64G",
    specC: "小",
    specD: "5寸",
    specE: "套餐二",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3135,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "黑色",
    specB: "128G",
    specC: "小",
    specD: "4.7寸",
    specE: "套餐一",
    unionEarn: 0,
    vipPrice: 0
}, {
    c_id: 3136,
    costPrice: 0,
    discountPrice: 0,
    earn: 0,
    etime: null,
    flag: 0,
    goodsDetailCount: 199,
    goodsDetailId: "100PgQ2xy08121409mY27",
    goodsDetailInventory: 199,
    goodsDetailOff: 0,
    goodsDetailPic: "/upload/messageImage/1523281057461_Personal.jpg,/upload/messageImage/1523282906972_Personal.jpg,/upload/messageImage/1523283570897_Personal.jpg",
    goodsDetailPrice: 188,
    goodsDetailSpec: "",
    goodsId: "00Y1kR4r1029X822731o0",
    isHost: 0,
    managerEarn: 0,
    postage: 10,
    profit: 0,
    specA: "蓝色",
    specB: "64GG",
    specC: "大",
    specD: "4.5寸",
    specE: "套餐二",
    unionEarn: 0,
    vipPrice: 0
}];

// var keys = {
//     '颜色': ['红色', '白色'],
//     '容量': ['8g', '16g', '32g', '64g'],
//     '尺寸': ['大', '小', '大'],
//     '套餐': ['套餐一', '套餐二', '套餐三']
// };
// //SKU,Stock Keeping Uint(库存量单位)    
// var sku_list = [{
//     'attrs': '红色|16g|big|套餐二',
//     'price': 120
// }, {
//     'attrs': '红色|8g|big|套餐一',
//     'price': 10
// }, {
//     'attrs': '白色|16g|big|套餐二',
//     'price': 28
// }, {
//     'attrs': '红色|64g|small|套餐三',
//     'price': 220
// }, {
//     'attrs': '白色|32g|middle|套餐二',
//     'price': 130
// }, {
//     'attrs': '红色|32g|big|套餐一',
//     'price': 120
// }, ];

实现:主要利用Object.keys方法获取对象的key,value值,配上forEach循环实现最终想要的结果。 

var keys = {};
var sku_list = [];
//原数据转换小写
goodsSpecJSON = goodsSpecJSON.map(function (keyo) {
    var key = Object.keys(keyo)[0];
    var newkey = key.substring(0, 1).toLowerCase() + key.substring(1);
    var dic = {};
    dic[newkey] = keyo[key];
    return dic
});
//生成keys
goodsSpecJSON.forEach(function (keyo) {
    var key = Object.keys(keyo)[0]; //['specA']
    var val = keyo[key]; //颜色
    if (!keys.hasOwnProperty(val)) {
        keys[val] = [];
    }
    var hash = {};
    goodsSpecList.forEach(function (item, i) {
        if (hash[item[key]] === undefined) {
            hash[item[key]] = true;
            keys[val].push(item[key]);
        }
        // if (keys[val].indexOf(item[key]) === -1) {
        //     keys[val].push(item[key]);
        // }
    });
});
console.log(keys)
//生成sku_list
goodsSpecList.forEach(function (item) {
    var dic = {
        attrs: ''
    };
    goodsSpecJSON.forEach(function (keyo, j) {
        var key = Object.keys(keyo)[0];
        dic.attrs += item[key] + (j === goodsSpecJSON.length - 1 ? '' : '|');
        dic.price = item.goodsDetailPrice;
        dic.goodsDetailCount = item.goodsDetailCount;
        dic.goodsDetailId = item.goodsDetailId;
    });
    sku_list.push(dic);
});
console.log(sku_list)

输出结果:

es6 无法使用new_Image