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
的新特性,是一种接口,为各种不同数据结构提供统一的数据访问机制。