for...of
- es6 引入的一种遍历迭代器的循环语句
- 用于遍历可迭代对象的值（如数组、字符串、Set、Map、Generator 等）
- 每次迭代，for...of 会将可迭代对象的下一个值赋值给一个变量，然后执行循环体
- for...of 不支持遍历普通对象，因为普通对象并不是可迭代的
/**
* 使用 for ... of 遍历对象属性
* es6
*/
const obj = {
name: '张三',
age: 18,
}
console.log('for ... of 遍历对象属性 ==> 根据对象的 key 遍历')
for(const key of Object.keys(obj)) {
console.log(key, obj[key])
}
/*
name 张三
age 18
*/
console.log('for ... of 遍历数组对象')
const arr = [1,2,3]
for(const num of arr) {
console.log(num)
}
/*
1
2
3
*/
// console.log('--------------------------')
// 下面这种情况会报错，因为对象obj是不可迭代的
/**
* TypeError: obj is not iterable
* at Object.<anonymous> (/Users/z/Desktop/a/notes/frontend/js/for/of.js:18:19)
* at Module._compile (node:internal/modules/cjs/loader:1254:14)
* at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
* at Module.load (node:internal/modules/cjs/loader:1117:32)
* at Module._load (node:internal/modules/cjs/loader:958:12)
* at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
* at node:internal/main/run_main_module:23:47
*/
// for(const item of obj) {
// console.log(item)
// }
for...in
- 遍历对象的可枚举属性
- 遍历数组的时候会遍历数组的索引，而不是值
- 需要过滤继承自原型链的属性
/**
* for...in
* 遍历对象属性的循环语句
* 用于遍历对象的可枚举属性（包括继承自原型链的属性）
* 也可以遍历数组，但是不推荐，因为它会遍历数组的索引（字符串类型），而不是值
*/
const obj = {
a: 1,
b: 2,
c: 3,
}
for(const key in obj) {
console.log(key, obj[key])
}
/*
a 1
b 2
c 3
*/
console.log('过滤掉继承自原型链的属性')
for(const key in obj) {
if(obj.hasOwnProperty(key)) {
console.log(key, obj[key])
}
}
console.log('for...in 遍历数组')
const arr = [1,2,3]
for(const index in arr) {
console.log(index, arr[index])
}
/*
0 1
1 2
2 3
*/
