for…of和for…in的区别
// for...of
for (const iterator of object) {
}
// for...in
for (const key in object) {
if (Object.hasOwnProperty.call(object, key)) {
const element = object[key];
}
}
for…in适合遍历对象(因为能够直接输出对象的值),并且for…in遍历数组输出的是数组的索引,对象的属性,以及原型链上的属性,for…of适合遍历数组(因为能够直接输出数组的值)。
1、循环数组
for…of和for…in都可以用来遍历数组,但是for…of输出的是数组的下标index, for…in输出的是数组的值
let fruits = ['apple', 'banana', 'orange'];
// for...of
for (const item of fruits) {
console.log(item);
}
// for...in
for (const item in fruits) {
console.log(item);
}
2、循环对象
for…in可以用来遍历对象的值,但是如果用for…of来遍历对象的话,就会报错。
let user = {
name: 'xiaoming',
age: '18',
sex: 'male'
}
// for...of
// for (const code of user) {
// console.log(code);
// }
// for...in
for (const code in user) {
// console.log(key);
console.log(user[code]);
}
3、遍历数组对象
在面对遍历数组对象的时候可以用for…of先遍历外面数组,for…in遍历数组里面的对象
const objArr = [{name:'xiaohong'},{age:18},{sex:'female'}];
for (const item of objArr) {
console.log(item);
for (const key in item) {
console.log(key);
console.log(item[key]);
}
}