本文主要是介绍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 对象等等
希望每一个知识碎都烂熟于心
这篇关于JavaScript 知识碎片[四] for ···in 和 for ···of 的区别与基本使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
