JavaScript 知识碎片[四] for ···in 和 for ···of 的区别与基本使用

业精于勤荒于嬉

`for...in`语句

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

语法
for (variable in object)statement
variable

在每次迭代时，variable会被赋值为不同的属性名。

object

非Symbol类型的可枚举属性被迭代的对象。

数组迭代和 for...in

提示：for...in不应该用于迭代一个关注索引顺序的 Array。

仅迭代自身的属性

如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性（也能使用propertyIsEnumerable）。或者，如果你知道不会有任何外部代码干扰，您可以使用检查方法扩展内置原型。

为什么用for ... in?

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of，那么for ... in的到底有什么用呢？

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in。

示例

下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。

//下面的函数接受一个对象作为参数。被调用时迭代传入对象的所有可枚举属性然后返回一个所有属性名和其对应值的字符串。
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()的用法：继承的属性不显示。

//下面的函数说明了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) {console.log(prop) // 此处 a b c red 都会打印if (obj.hasOwnProperty(prop)) {console.log(`obj.${prop} = ${obj[prop]}`);}}// Output:// "obj.color = red"

`for...of`语句

for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

基本使用

const array1 = ['a', 'b', 'c'];for (const element of array1) {console.log(element);
}// expected output: "a"
// expected output: "b"
// expected output: "c"

语法
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 iterable2 = [10, 20, 30];for (const value of iterable2) {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`与`for...in`的区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};let iterable = [3, 5, 7];
iterable.foo = 'hello';for (let i in iterable) {console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}for (let i in iterable) {if (iterable.hasOwnProperty(i)) {console.log(i); // logs 0, 1, 2, "foo"}
}for (let i of iterable) {console.log(i); // logs 3, 5, 7
}

简单总结

遍历对象的属性我选 for...in,因为使用for...of 遍历数组是无序的，for...in 可以遍历到原型的属性.

遍历其他科迭代对象我选择 for...of 如 Array、String、Map、Set、arguments 对象等等

希望每一个知识碎都烂熟于心