for in和for of语句

71 阅读2分钟

for in

The for...in statement iterates over all enumerable string properties of an object (ignoring properties keyed by symbols), including inherited enumerable properties.

for...in 语句遍历完对象的所有可枚举字符串属性(忽略以符号为键的属性),包括继承的可枚举属性。

for in 语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性

一个属性可不可枚举是由它的内部属性[[Enumerable]]决定的。

获取对象元素的属性描述:

Object.getOwnPropertyDescriptor(obj,prop);

返回值是一个对象,包含以下属性:

  • configurable:是否可配置
  • enumerable:是否可枚举
  • value:属性值
  • writable:是否可写
const obj = {a:1,b:2,c:3};
const propDesc = Object.getOwnPropertyDescriptor(obj,'a');
for(const prop in propDesc){
    console.log(prop);
}
console.log(proDesc.enumerable);

输出:

value
writable
enumerable
configurable
true

实际上for in遍历的是键名,而不是键值。

因为对象的属性是没有顺序的,所以for in语句以任意顺序遍历对象的属性。

for in语句会遍历对象及其原型链上的所有可枚举属性。

const obj = {a:1,b:2,c:3};
const obj2 = Object.create(obj);
obj2.d = 4;
for(const prop in obj2){
    console.log(prop);
}
//输出:d a b c

for in语句会遍历数组的索引,而不是数组元素。

const arr = [1,2,3];
for(const index in arr){
    console.log(index);
}
//输出:0 1 2

for of

The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), as well as the arguments object, generators produced by generator functions, and user-defined iterables.

for...of 语句执行一个循环,对来自可迭代对象的值序列进行操作。可迭代对象包括如 Array、String、TypedArray、Map、Set、NodeList(和其他 DOM 集合)等内置实例,以及auguments对象、由生成器函数生成的生成器和用户自定义的可迭代对象。

可迭代对象的判断:

function isIterable(obj){
    return obj!=null&&typeof obj[Symbol.iterator]==='function';
}
const arr = [1,2,3];
for(const value of arr){
    console.log(value);
}
//输出:1 2 3
​
const map = new Map().set('a',1).set('b',2).set('c',3);
for(const value of map){
    console.log(value);
}
//输出:["a", 1] ["b", 2] ["c", 3]
​
const set = new Set().add(1).add(2).add(3);
for(const value of set){
    console.log(value);
}
//输出:1 2 3
​
const str = 'abc';
for(const value of str){
    console.log(value);
}
//输出:a b c