forEach、for...in 、 for...of
forEach、for...in 、 for...of
概述
1.forEach -不能中止循环
2.for...in - 可枚举属性
3.for...of - 除对象外的各种类型
for 、 forEach
for(var index=0; index<myArray.length; index++){
console.log(myArray[index]);
}JS5内置的forEach方法：
myArray.forEach(function(value){
console.log(value)
})写法简单了许多，但是有缺点：不能中断循环(使用break语句或使用return语句)。
for...in循环
语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
for...in 循环只遍历可枚举属性（包括它的原型链上的可枚举属性）。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更接近原型链中对象的属性覆盖原型属性）。
- 遍历对象及其原型上可枚举的属性
- 如果用于遍历数组，处理遍历元素外，除了遍历开发者对数组对象自定义的枚举属性及其原型链上的可枚举属性
- 遍历对象返回的属性名和遍历数组返回的索引都是string类型
- 某些情况下可能按随机顺序遍历数组元素
var obj = {
a:1,
b:2,
c:3
}
for(var prop in obj){
console.log("obj."+ prop + "=" + obj[prop]);
}
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"循环数组
不应该是使用for...in来循环一个数组，其中索引顺序很重要。
数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。
因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时，最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for...of 循环）。
for...in是用来循环带有字符串key的对象的方法。
for...of循环
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
- 支持遍历数组、类数组对象（DOM NodeList），字符串，Map对象，set对象
- 不支持遍历普通对象
- 遍历后输出的结果为数组元素的值
- 可搭配实例方法entries(),同时输出数组的内容和索引
for...of循环比for循环简洁，同时弥补了forEach和for...in循环的短板。
for(var value of myArray){
console.log(value)
}循环一个数组：
let iterable = [10, 20, 30];
for(let value of iterable){
console.log(value)
}
// 10
// 20
// 30循环一个字符串：
let iterable = "boo";
for(let value of iterable){
console.log(value)
}
// "b"
// "o"
// "o"循环一个类型化的数组
let iterable = new Unit8Array([0*00, 0*ff]);
for(let value of iterable){
console.log(value);
}
// 0
// 255循环一个Map
let iterable = new Map([['a',1],['b',2],["c",3]])
for(let [key, value] of iterable){
console.log(value);
}
// 1
// 2
// 3
for(let entry of iterable){
console.log(entry)
}
// [a, 1]
// [b, 2]
// [c, 3]循环一个Set
let iterable = new Set([1,1,2,2,3,3])
for(let value of iterable){
console.log(value)
}
// 1
// 2
// 3循环一个DOM结合
let articleParagraphs = document. queryselectorAll("article > p");
for(let paragraph of articleParagraphs){
paragraph.classList.add("read")
}迭代qrguments对象
(function() {
for (let argument of arguments) {
console.log(argument);
}
})(1, 2, 3);
// 1
// 2
// 3循环一个拥有可枚举属性的对象
for...of循环并不能直接使用在普通对象上，但如果按对象拥有的属性进行循环，可使用内置的Object.keys()方法：
for(var key of Objec.keys(someObject)){
console.log(key + "："+ someObject[key])
}配合entries输出数组索引和值、对象的键值
var arr=['a', 'b', 'c'];
// Object.entries(arr)=>[ ["0", "a"],["1", "b"], ["2", "c"] ]
for(ler [index,value] of Object.entries(arr)){
console.log(index, ":", value)
// 0:a , 1:b , 2:c
}
var obj = {name: 'june', age: 17, city: "广州"};
for(let [key,value] of Object.entries(obj)){
console.log(key, ":", value)
// name:june, age:17, city:广州
}for...in和for...of的区别
无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。
for...in 语句以任意顺序迭代对象的可枚举属性。
for...of 语句遍历可迭代对象定义要迭代的数据。
参考：
- https://juejin.im/post/5b2617e5f265da5954425022
- https://www.html.cn/archives/9261
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in
当我们不再需要外在的认可来证明自己时
才能获得真正的自由