Article directory
loop array
Both for in and for of can loop the array, for in outputs the index subscript of the array, and for of outputs the value of each item of the array.
const arr = [1,2,3,4]
// for ... in
for (const key in arr){
console.log(key) // 输出 0,1,2,3
}
// for ... of
for (const key of arr){
console.log(key) // 输出 1,2,3,4
}
cycle object
for in can traverse objects, for of cannot traverse objects, it can only traverse objects with iterator interface, such as Set,Map,String,Array
const object = {
name: 'lx', age: 23 }
// for ... in
for (const key in object) {
console.log(key) // 输出 name,age
console.log(object[key]) // 输出 lx,23
}
// for ... of
for (const key of object) {
console.log(key) // 报错 Uncaught TypeError: object is not iterable
}
You can use the for...in loop to traverse the key names
for(let key in obj) {
console.log('for in key', key)
}
/*
for in key name
for in key age
*/
You can also use the Object.keys(obj) method to generate an array of the key names of the object, and then traverse the array
for(let key of Object.keys(obj)) {
console.log('key', key)
}
/*
key name
key age
*/
The for...in loop traverses not only numeric key names, but also other keys added manually, even keys on the prototype chain. for…of does not
let arr = [1, 2, 3]
arr.set = 'world' // 手动添加的键
Array.prototype.name = 'hello' // 原型链上的键
for(let item in arr) {
console.log('item', item)
}
/*
item 0
item 1
item 2
item set
item name
*/
for(let value of arr) {
console.log('value', value)
}
/*
value 1
value 2
value 3
*/
The forEach loop cannot break out of the middle, neither the break command nor the return command will work
let arr = [1, 2, 3, 5, 9]
arr.forEach(item => {
if(item % 2 === 0) {
return
}
console.log('item', item)
})
/*
item 1
item 3
item 5
item 9
*/
The for...of loop can be used in conjunction with break, continue, and return to break out of the loop
for(let item of arr) {
if(item % 2 === 0) {
break
}
console.log('item', item)
}
// item 1
Neither for...in nor for...of can traverse the value of Symbol type. To traverse the value of Symbol type, you need to use Object.getOwnPropertySymbols() method
{
let a = Symbol('a')
let b = Symbol('b')
let obj = {
[a]: 'hello',
[b]: 'world',
c: 'es6',
d: 'dom'
}
for(let key in obj) {
console.info(key + ' --> ' + obj[key])
}
/*
c --> es6
d --> dom
*/
let objSymbols = Object.getOwnPropertySymbols(obj)
console.info(objSymbols) // [Symbol(a), Symbol(b)]
objSymbols.forEach(item => {
console.info(item.toString() + ' --> ' + obj[item])
})
/*
Symbol(a) --> hello
Symbol(b) --> world
*/
// Reflect.ownKeys 方法可以返回所有类型的键名，包括常规键名和Symbol键名
let keyArray = Reflect.ownKeys(obj)
console.log(keyArray) // ["c", "d", Symbol(a), Symbol(b)]
}
loop over array object
const list = [{
name: 'lx' }, {
age: 23 }]
for (const val of list) {
console.log(val) // 输出{ name: 'lx' }, { age: 23 }
for (const key in val) {
console.log(val[key]) // 输出 lx,23
}
}
Summarize
- for in is suitable for traversing objects, and for of is suitable for traversing arrays.
- for in traverses the index of the array, the properties of the object, and the properties on the prototype chain.