版权声明:本文为博主原创文章,转载请注明出处 thx~ https://blog.csdn.net/x550392236/article/details/88690175
先说结论:
for...in
循环出的是key
,for...of
循环出的是value
。for...of
是 ES6 新引入的特性,修复了 ES5 引入的for...in
的不足。for...of
不能循环普通的对象,需要通过和Object.keys()
搭配使用。- 推荐在循环对象属性的时候使用
for...in
,在遍历数组的时候的时候使用for...of
。
let arr = ['x', 20, { a: 1, b: 2 }];
// for…in循环
for (let index in arr) {
console.log(arr[index]);
}
// x 20 {a: 1, b: 2}
// for…of循环
for (let value of arr) {
console.log(value);
}
// x 20 {a: 1, b: 2}
咋一看好像好像只是写法不一样而已,那为什么说 for...of
修复了 for...in
的缺陷和不足。
假设我们往数组添加一个属性name
:
let arr = ['x', 20, { a: 1, b: 2 }];
arr.name = 'demo';
// for…in循环
for (let index in arr) {
console.log(arr[index]); // arr.name也被循环出来了
}
// x 20 {a: 1, b: 2} demo
// for…of循环
for (let value of arr) {
console.log(value);
}
// x 20 {a: 1, b: 2}
所以说,作用于数组的 for-in
循环除了遍历数组元素以外,还会遍历自定义属性。
for...of
循环不会循环对象的 key
,只会循环出数组的 value
,因此 for...of
不能循环遍历普通对象,对普通对象的属性遍历推荐使用 for...in
如果实在想用 for...of
来遍历普通对象的属性的话,可以通过和 Object.keys()
搭配使用,先获取对象的所有 key
的数组
然后遍历:
let my = {
name: '猫老板的豆',
title: '吃饭睡觉打豆豆',
age: 20,
address: {
country: 'china',
city: 'shenzhen',
school: 'hi-tech park'
}
}
for (let key of Object.keys(my)) {
//使用Object.keys()方法获取对象key的数组
console.log(key + ": " + my[key]);
}