区别：
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 cgl2.只遍历对象自身的属性，而不遍历继承于原型链上的属性，使用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)输出结果：
