1. 概述
JavaScript中使用的最频繁的数据结构无非就是 Array和Object，在日常的工作当中遍历它们是非常频繁的。在ES6中新增了Set和Map数据结构，遍历方式也大同小异。
在实际的工作中，后台程序读取数据库获取列表数据，返回给前端之后，前端要进行渲染展示，比如商品列表数据：
- 多个商品列表，通过数组接收，数组每一个元素都是商品对象。
- 商品的名称、属性、上下架状态、是否打折等就是商品对象的各个属性。
2. 数组 - Array
数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。
for
遍历的次数由数组的长度决定。
let cars = ["Benz", "BMW", "Lexus"];
// 方式1：for
for (let i = 0; i < cars.length; i++) {
console.log(`for遍历下：第 ${
i} 的值： ${
cars[i]}`)
}
forEach
let cars = ["Benz", "BMW", "Lexus"];
// 方式2：forEach
cars.forEach(function (value, index) {
console.log(`forEach遍历下：第 ${
index} 的值： ${
value}`)
});
for…of…
let cars = ["Benz", "BMW", "Lexus"];
// 方式3：for...of...
for (let car of cars) {
console.log(`for...of遍历下： ${
car}`)
}
for…in
let cars = ["Benz", "BMW", "Lexus"];
// 方式4：for...in
for (let index in cars) {
console.log(`for...in遍历下： ${
cars[index]}`)
}
ES6 - keys()
let cars = ["Benz", "BMW", "Lexus"];
// 方式5：ES6 - keys()
for (let index of cars.keys()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
cars[index]}`)
}
ES6 - values()
// 方式6：ES6 - values()
for (let car of cars.values()) {
console.log(`ES6 - values 遍历下：${
car}`)
}
ES6 - entries()
let cars = ["Benz", "BMW", "Lexus"];
// 方式7：ES6 - entries()
for (let [index, car] of cars.entries()) {
console.log(`ES6 - keys 遍历下：第 ${
index} 的值： ${
car}`)
}
3. 对象 - Object
JavaScript 是一种面向对象的编程语言，在 JavaScript 中几乎所有的东西都是对象。因此，要想有效的使用 JavaScript，首先需要了解对象的工作原理以及如何创建并使用对象。
我们可以将对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）。通过《JS数据类型》一节我们知道，数组是值的集合，每个值都有一个数字索引（从零开始，依次递增）。对象类似与数组，不同的是对象中的索引是自定义的，例如 name（姓名）、age（年龄）、gender（性别）等。
for…in…
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
}
// 方式1: for...in...
for (let attr in benzCarObj) {
console.log(`for...in遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
}
Object.keys(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式2: Object.keys(obj)
Object.keys(benzCarObj).forEach(function (attr) {
console.log(`Object.keys()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
Object.getOwnPropertyNames(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式3： Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames(benzCarObj).forEach(function (attr) {
console.log(`Object.getOwnPropertyNames()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
Object.getOwnPropertySymbols(obj)
// 方式4： Object.getOwnPropertySymbols(obj)
let brand = Symbol('brand');
let name = Symbol('name');
let price = Symbol('price');
let bmwCarObj = {
[brand]: "BMW",
[name]: "BMW 530Li",
[price]: 489800
};
let bmwCarObjSymbols = Object.getOwnPropertySymbols(bmwCarObj);
console.log(bmwCarObjSymbols);
Reflect.ownKeys(obj)
const benzCarObj = {
"brand": "Benz",
"name": "Benz E300L",
"price": 550000
};
// 方式5： Reflect.ownKeys(obj)
Reflect.ownKeys(benzCarObj).forEach(function (attr) {
console.log(`Reflect.ownKeys()遍历下的汽车： ${
attr}=> ${
benzCarObj[attr]}`)
});
4. 集合 - Set
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。
Set.prototype.keys()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式1：Set.prototype.keys()
for (let car of carSet.keys()) {
console.log(`Set.prototype.keys()遍历下的集合元素： ${
car}`)
}
Set.prototype.values()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式2：Set.prototype.values()
for (let car of carSet.values()) {
console.log(`Set.prototype.values()遍历下的集合元素： ${
car}`)
}
Set.prototype.entries()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式3：Set.prototype.entries()
for (let [index, car] of carSet.entries()) {
console.log(`Set.prototype.entries()遍历下的集合元素： ${
index} => ${
car}`)
}
forEach()
let carSet = new Set(["Benz", "BMW", "Lexus"]);
// 方式4：forEach()
carSet.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
5. 映射 - Map
Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。
Map.prototype.keys()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式1：Map.prototype.keys()
for (let attr of carMap.keys()) {
console.log(`Map.prototype.keys()遍历下的集合元素： ${
attr}`)
}
Map.prototype.values()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式2：Map.prototype.values()
for (let attr of carMap.values()) {
console.log(`Map.prototype.values()遍历下的集合元素： ${
attr}`)
}
Map.prototype.entries()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式3：Map.prototype.entries()
for (let [attr, value] of carMap.entries()) {
console.log(`Map.prototype.entries()遍历下的集合元素： ${
attr} => ${
attr}`)
}
forEach()
const carMap = new Map([
['name', 'BMW 530Li'],
['price', 498520],
]);
// 方式4：forEach()
carMap.forEach((index, car) => {
console.log(`forEach()遍历下的集合元素：${
index} => ${
car}`)
});
6 总结
6.1 break 和 Continue 问题
- 在 forEach、map、filter、reduce、every、some 函数中 break 和 continue 关键词都会不生效，因为是在function中，但function解决了闭包陷阱的问题。
- 要使用 break、continue 可以使用 for、for…in、for…of、while。
6.2 使用推荐
- 遍历数组：for()，forEach()，map()，for…of 。
- 遍历对象：for…in…
参考文档：
阮一峰大佬的文档 https://es6.ruanyifeng.com/#docs/iterator