JavaScript之for...in和for...fo区别

Posted 2021-08-29 www-wanglong

1.for...in是ES6之前的语法，for...of是ES6语法

2. for...in只能获取对象的键名，for...of可以获取键值。

// 使用for...if
var names = ['ming', 'hua', 'li']
for (var name in names) {
  console.log(name)
}
// 0
// 1
// 2

// 使用for...in
let names2 = ['ming', 'hua', 'li']
for (let name of names2) {
  console.log(name)
}
// ming
// hua
// li

3. for…of只会遍历具有数字索引的属性，for…in会便利全部的索引

let arr =[1, 5, 8]
arr.name = 'long'
// 使用for...in
for (let i in arr) {
  console.log(i)
}
// 0
// 1
// 2
// name

// 使用for...of
for (let i of arr) {
  console.log(i)
}
// 1
// 5
// 8

// 添加数字属性
arr[5] = 'foo'
// 使用for...in
for (let i in arr) {
  console.log(i)
}
//  0
//  1
//  2
//  5
// name

// 使用for...of
for (let i of arr) {
  console.log(i)
}
// 1
// 5
// 8
// undefined
// undefined
// foo

4.for…of不能遍历普通的对象，for…in可以

let obj = {
  name: 'long',
  age: 18
}
// 使用for...in
for (let i in obj) {
  console.log(i)
}
// name
// age

使用for...of
for (let i of obj) {
  console.log(i)
}
// VM410:1 Uncaught TypeError: obj is not iterable

总结： for...in主要是为了遍历对象， for...of是为了遍历具有Iterator接口的数据结构，比如：Array、Map 、Set、String、TypedArray 、函数的 arguments 对象、NodeList 对象都是原生具备Iterator接口的。

Iterator（遍历器）：ES6的新特性，是一种接口，为各种不同数据结构提供统一的数据访问机制。