for-forin-forof-forEach-的区别

我们经常会用到循环，截止到 ES6，我们总共有 4 种语法用于循环，但是它们各自的功能和使用场景却有很大区别。接下来我们讲对这 4 种语法一一讲解。首先我们来看一下有哪 4 种：

1: for(let i = 0; i < number; i ++){...}
2: for(let key in object){...}
3: for(let){...}
4: forEach(){...}

接下来我们一个一个地看：
1: for()

2: for…in
语法：

for(let key in object){...}

for…in 以任意顺序来遍历一个对象除了 Symbole 类型外的可枚举属性。
这简单的一句话传达了太多信息，有如下几点：

1: 它的遍历是无序的
2: 它遍历的是对象的属性名，而不是属性对应的值
3: 它只遍历可枚举属性
4: 在可枚举属性里面，不遍历 Symbol 类型

还有一点需要注意的是，

5: for...in 不仅会遍历自己的属性，也会遍历继承的属性。

关于以上几个小点我们先来做一下知识的延伸，以便能更好地理解：

什么是无序遍历?

无序遍历是不能保证输出的数据顺序和放入的数据顺序是一样的，所以有可能一样，也有可能不一样。

什么样的属性是可枚举的?

首先 可枚举属性 是指那些内部“可枚举（enumerable）”标志设置为 true 的属性。

数据的枚举性遵循一下 2 条规律：

1: 直接通过赋值和属性初始化的属性，默认 enumerable == true，是可枚举的
2: 通过 Object.defineProperty 定义的属性，默认 enumerable == false，则不可枚举; 如果想要可枚举，需要手动改 enumerable:true

for…in 代码例子：

let obj = {name: 'nana', age: 20};
for(let key in obj){console.log(`${key}`); // name, age
}

在 for…in 中对对象属性进行修改会怎样？

在 MDN 的页面上明确指出，我们在 for…in 的循环中，最好不要对属性进行添加，删除（通过 delete），修改（通过 Object.defineProperty）操作，因为在循环中进行这些操作都没有一个确定的结果。

3: for…of
4: forEach()