for…in
for (variable in object) {…}
for…in语句以任意顺序遍历一个对象自有的、继承的、可枚举的、非Symbol的属性。对于每个不同的属性,语句都会被执行。
for…in 只遍历可枚举属性。即遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)
for…in 循环以任意序迭代一个对象的属性,所以当迭代访问顺序很重要的数组时,尽量不要用 for…in
for…of
for (variable of iterable) {…}
for…of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句
代码示例
let str = 'hello'
let arr = ['1', '2', '3']
let obj = {
a: 'aa',
b: 'bb',
c: 'cc'
}
String.prototype.toWho = 'world'
Array.prototype.hello = 'world'
Object.prototype.sayHi = 'hi'
console.log('---for...in遍历字符串---')
for(let key in str) {
console.log(key) // 0, 1, 2, 3, 4, toWho, sayHi
}
console.log('---for...in遍历数组---')
for(let key in arr) {
// key都为string类型
console.log(key) // 0, 1, 2, hello, sayHi
}
console.log('---for...in遍历对象---')
for(let key in obj) {
console.log(key) // a, b, c, sayHi
}
console.log('---for...of遍历字符串---')
for(let item of str) {
console.log(item) // h, e, l, l, o
}
console.log('---for...of遍历数组---')
for(let item of arr) {
console.log(item) // 1, 2, 3
}
console.log('---for...of遍历对象---')
for(let item of obj) {
console.log(item) // Uncaught TypeError: obj is not iterable
}
总结
- for…in 遍历的是属性,for…of 遍历的是属性的值
- for…in 遍历原型链定义的属性,for…of 不遍历原型链
- for…in 遍历对象的可枚举属性,for…of 遍历可迭代对象定义要迭代的数据
- for…in 不能保证将以任何特定的顺序返回索引,for…of 保证有序性
- for…in 不能关闭迭代器, for…of 可用break等关闭迭代器