[javascript]javascript for...in,.for each...in,for,forEach(),for...of循环遍历区别

1.for...in
以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。
语法:
for (variable in object){...}
参数：
variable在每次迭代时,将不同的属性名分配给变量。object被迭代其枚举属性的对象。
eg(one):
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"
eg(two):
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("o."+ prop +" = " + obj[prop]);
  }
}
// 输出:// "o.color = red"
 关于 for...in 循环还有一点需要注意，即for-in 是用来遍历对象的。一个常见的错误用法是使用它来循环遍历数组成员
2.for each...in
使用一个变量迭代一个对象的所有属性值,对于每一个属性值,有一个指定的语句块被执行.for each...in 是 ECMA-357 (E4X) 标准的一部分, 大部分非Mozilla浏览器都没有实现该标准, E4X并不是 ECMAScript 标准的一部分.
作为ECMA-357(E4X)标准的一部分,for each...in语句已被废弃,E4X中的大部分特性已被删除,但考虑到向后兼容,for each...in只会被禁用而不会被删除,可以使用ES6中新的  for...of 语句来代替.(下面有介绍for...of)
语法:
for each (variable in object) {
  statement
}
参数：
variable用来遍历属性值的变量,前面的var关键字是可选的.该变量是函数的局部变量而不是语句块的局部变量.object该对象的属性值会被遍历.statement遍历属性值时执行的语句. 如果想要执行多条语句, 请用({ ... }) 将多条语句括住.
eg:
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的值
3. for循环大家都很熟悉了,就不分析了
4.forEach()
forEach() 方法对数组的每个元素执行一次提供的函数。
语法:
array.forEach(callback(currentValue, index, array){ //do something }, this)
array.forEach(callback[, thisArg])
参数：
callback为数组中每个元素执行的函数，该函数接收三个参数：
currentValue(当前值)数组中正在处理的当前元素。index(索引)数组中正在处理的当前元素的索引。arrayforEach()方法正在操作的数组。thisArg可选可选参数。当执行回调 函数时用作this的值(参考对象)。
eg:
let a = ['a', 'b', 'c'];
a.forEach(function(element) {
    console.log(element);
});
//输出
// a       // b        // c
5.for...of
for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环，以替代 for...in 和 forEach() ，并支持新的迭代协议。for...of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。语法:for (variable of iterable) {  statement }参数:variable：每个迭代的属性值被分配给该变量。iterable：一个具有可枚举属性并且可以迭代的对象。
我们来探讨一些用例:
Arrays(数组):
Arrays（数组）就是类列表（list-like）对象。数组原型上有各种方法，允许对其进行操作，比如修改和遍历等操作。下面手在一个数组上进行的 for...of 操作：eg:const iterable = ['mini', 'mani', 'mo'];
 for (const value of iterable) {
console.log(value);
}
 // 输出:
// mini         // mani          // mo
Maps(映射):
Map 对象就是保存 key-value(键值) 对。对象和原始值可以用作 key(键)或 value(值)。Map 对象根据其插入方式迭代元素。换句话说， for...of 循环将为每次迭代返回一个 key-value(键值) 数组。
// map-example.js
const iterable = new Map([['one', 1], ['two', 2]]);
  for (const [key, value] of iterable) { console.log(`Key: ${key} and Value: ${value}`);
 }
  // 输出: // Key: one and Value: 1
 // Key: two and Value: 2
还有Strings（字符串）, Sets（集合）等可迭代的数据结构。可以参考https://www.cnblogs.com/m2maomao/p/7743143.html

转自:https://www.cnblogs.com/Youngly/p/6709546.html
https://www.cnblogs.com/m2maomao/p/7743143.html

那 es6 中的for...of  如何使用呢，求楼主给个示例