JavaScript学习笔记（6）iteration类型及for...of循环、forEach方法

本文链接：https://blog.csdn.net/mjt1723067421/article/details/98616485

iterable

遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Map、Set、Array都属于iterable类型。

iterable类型用for…of循环遍历。
for…of 用法如下：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) {  // 遍历Array
    console.log(x);
}
for (var x of s) {  // 遍历Set
    console.log(x);
}
for (var x of m) {  // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

在这里插入图片描述

这就出现一个疑问了呀，for…of循环和for…in循环有何区别？？？

for…in实际上遍历的时对象的属性名称。一个Array数组实际上它就是一个对象，举个例子：

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x in a) {
    console.log(x); 
}

在这里插入图片描述
name也被遍历出来了，说明这个name是我们给Array手动添加的属性，但a.length却没有改变。

for…of循环则解决了这个问题，它只循环集合本身元素。

var a = ['A', 'B', 'C'];
a.name = 'Hello';
for (var x of a) {
    console.log(x); 
}

运行结果：
在这里插入图片描述
这就能显示出 for…of 的必要性了。

然而，没想到，更好的方式是直接使用iterable内置的forEach方法。

Array例子

'use strict';
var a = ['A', 'B', 'C'];
a.forEach(function (element, index, array) {
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

在这里插入图片描述
想让显示什么就写什么，不一定三个属性都显示。

Set例子

var s = new Set(['A', 'B', 'C']);
s.forEach(function (element, sameElement, set) {
    console.log(element);
});

Set没有索引，所以前两个都是值。
在这里插入图片描述

Map例子

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
m.forEach(function (value, key, map) {
    console.log(value);
});

在这里插入图片描述

学单词时间到

element
要素;基本部分

index
索引