区别:
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)
输出结果: