for in& for each in &for of

Posted 2021-01-18 bigwatermelon

for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。 语法 for (variable in object) {...} variable 在每次迭代时，将不同的属性名分配给变量。 object 被迭代枚举其属性的对象。 示例 下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。 var obj = {a:1, b:2, c:3}; for (var prop in obj) { console.log("obj." + prop + " = " + obj[prop]); } // Output: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3" 下面的函数说明了hasOwnProperty()的用法：继承的属性不显示。 var triangle = {a: 1, b: 2, c: 3}; function ColoredTriangle() { this.color = ‘red‘; } ColoredTriangle.prototype = triangle; var obj = new ColoredTriangle(); for (var prop in obj) { if (obj.hasOwnProperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // Output: // "obj.color = red" For each in 使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行. 语法节 for each (variable in object) { statement } 参数 variable 用来遍历属性值的变量,前面的var关键字是可选的.该变量是函数的局部变量而不是语句块的局部变量. object 该对象的属性值会被遍历. statement 遍历属性值时执行的语句. 如果想要执行多条语句, 请用({ ... }) 将多条语句括住. 示例 例子: 使用for each...in 警告:永远不要使用for each...in语句遍历数组,仅用来遍历常规对象, 下面的代码片段演示如何遍历一个对象的属性值, 并计算它们的和: var sum = 0; var obj = {prop1: 5, prop2: 13, prop3: 8}; for each (var item in obj) { sum += item; } print(sum); // 输出"26",也就是5+13+8的值 for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句 语法节 for (variable of iterable) { //statements } variable 在每次迭代中，将不同属性的值分配给变量。 iterable 被迭代枚举其属性的对象。 示例节 迭代Array节 let iterable = [10, 20, 30]; for (let value of iterable) { value += 1; console.log(value); } // 11 // 21 // 31 如果你不想修改语句块中的变量 , 也可以使用const代替let。 let iterable = [10, 20, 30]; for (const value of iterable) { console.log(value); } // 10 // 20 // 30 迭代String节 let iterable = "boo"; for (let value of iterable) { console.log(value); } // "b" // "o" // "o" 迭代 TypedArray节 let iterable = new Uint8Array([0x00, 0xff]); for (let value of iterable) { console.log(value); } // 0 // 255 迭代Map节 let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); for (let entry of iterable) { console.log(entry); } // ["a", 1] // ["b", 2] // ["c", 3] for (let [key, value] of iterable) { console.log(value); } // 1 // 2 // 3 迭代 Set节 let iterable = new Set([1, 1, 2, 2, 3, 3]); for (let value of iterable) { console.log(value); } // 1 // 2 // 3 迭代 arguments 对象节 (function() { for (let argument of arguments) { console.log(argument); } })(1, 2, 3); // 1 // 2 // 3 迭代 DOM 集合节 迭代 DOM 元素集合，比如一个NodeList对象：下面的例子演示给每一个 article 标签内的 p 标签添加一个 "read" 类。 //注意：这只能在实现了NodeList.prototype[Symbol.iterator]的平台上运行 let articleParagraphs = document.querySelectorAll("article > p"); for (let paragraph of articleParagraphs) { paragraph.classList.add("read"); } 关闭迭代器节 对于for...of的循环，可以由break, throw 或return终止。在这些情况下，迭代器关闭。 function* foo(){ yield 1; yield 2; yield 3; }; for (let o of foo()) { console.log(o); break; // closes iterator, triggers return } 迭代生成器节 你还可以迭代一个生成器： function* fibonacci() { // 一个生成器函数 let [prev, curr] = [0, 1]; for (;;) { // while (true) { [prev, curr] = [curr, prev + curr]; yield curr; } } for (let n of fibonacci()) { console.log(n); // 当n大于1000时跳出循环 if (n >= 1000) break; } 不要重用生成器 生成器不应该重用，即使for...of循环的提前终止，例如通过break关键字。在退出循环后，生成器关闭，并尝试再次迭代，不会产生任何进一步的结果。 var gen = (function *(){ yield 1; yield 2; yield 3; })(); for (let o of gen) { console.log(o); break;//关闭生成器 } //生成器不应该重用，以下没有意义！ for (let o of gen) { console.log(o); } 迭代其他可迭代对象 你还可以迭代显式实现可迭代协议的对象： var iterable = { [Symbol.iterator]() { return { i: 0, next() { if (this.i < 3) { return { value: this.i++, done: false }; } return { value: undefined, done: true }; } }; } }; for (var value of iterable) { console.log(value); } // 0 // 1 // 2