for of

Posted 2021-09-25 前端纸飞机

for…of语句在可迭代对象上执行遍历，在 每次遍历中，将不同属性的值（ Map是键值 对）分配给变量。

可迭代对象是具有Iterator接口，即含有 [SymboLiterator]属性的数据类型:包括 Array, Map, Set, String, arguments, TypedArray(二进制相关数组)等。

//遍历array。array的黑犬认[SymboLiterator]是array的values。方法。返回array每项的值的迭代器。
let arr = [1,2,3];
for (let val of arr) {
    console.log(val);
}
//123
//遍历arguments
function sum() {
    let sum = 0
    for(let num of arguments){
        sum += num
    }
    console.log(sum); //15
}
sum(1,2,3,4,5)
//遍历Map, Map的默认[Symbol.iterator]是Map的entries()方法。返回Map键值对迭代器。
var map = new Map()
map.set('a', 'A')
map.set('b', 'B')
map.set('c', 'C')
for(var n of map){
    console.log(n)
}
// ['a','A']
// ['b','B']
// ['c','C']
for (let [key, val] of map) {
    console.log(val);
}
// 'A''B'C'
//遍历 Set。Set的黑犬认[Symbol.iterator]是Set的values。方法。返回Set值迭代器。
let set = new Set([1,1,2,2,3,3]);
for (let val of set) {
 console.log(val);
}
//1 2 3
//遍历由生成器创建的迭代器(iterator)
function *gen(){
    yield 1;
    yield 2;
    yield 3;
}
let iterl = gen();
for (let letter of iterl) {
    console.log(letter);
}
//1 2 3
let arr =['a','b','c'];
let iter2 = arr[Symbol.iterator]();
for (let letter of iter2) {
    console.log(letter);
}
// a b c

 使用 break、continues return 和 throw 终止循环执行：

const iterable = ['a','b','c'];
for (const value of iterable) {
    console.log(value);
    break;
}
//a (只有a被打印出来)

普通对象非可迭代对象，无法使用for of遍 历 ， 如需使用可添加一个[SymboLiterator]属性，并指向一个迭代器生成函数（生成器，或任何可以返回一个 迭代器的函数）即可。

let obj = {
    "0": "aa",
    "2": "cc"
}
obj[ Symbol.iterator ] = function *(){
    for( let key in this){
        let val = this[key];
        yield val;
    }
}
for( let i of obj){
    console.log(i)
}
//aa
//bb
// cc
如果是伪数组对象（含索引数属性和length属性）还可直接借用数组的。obj[Symbol.iterator] = [] [Symbol.iterator]

或者使用 Object.keys和Object.entries转 化成数组后再用for of

const obj = {
    a: 1,
    b: 2,
    c: 3
}
// Object.keys(obj)输出["a", "b", "c"]
for (var key of Object.keys(obj)) {
    console.log(key + ':'+ obj[key])
}
//a: 1
//b:2
//c:3
// Object.entries(obj)输出[["a", 1],["c",3]]
for (let [key, value] of Object.entries(obj)) {
    console.log(key,value)
}
//a-1
//b-2
//c-3

for of遍历原理:

//先调用可迭代对象iterable内部的Symbol.iterator方法来获取迭代器iterator。然后循环每执行一次都会调用迭代器的next。方法,并将迭代器返回的结果对象中的value性存储在一个变量中，这样不断循环直到返回
对象的done属性的值为true。for of实际遍历的是迭代器。
var iterator = iterable[Symbol.iterator]();
for(;;){
    var result = iterator.next();
    if (result.done) break;
    var item = result.value;
    ...
}