JavaScript高级循环方法

JavaScript 每日一篇，记录自学JavaScript语言的点点滴滴。

除了for循环♻️，for-of,for-each循环♻️也是一个不错的选择

先说for-of循环♻️

认识for-of循环♻️

MDN上对for-of循环的详细介绍： developer.mozilla.org/zh-CN/docs/...

for(const /* 循环对象集合中的每个元素 */ of /* 循环对象集合 */ ){
  /* 循环体 */
  /* 你可以在循环体中取出循环对象集合中的每一个元素 */
}

通过for-of循环♻️，可以对数组Array、对象Object等可迭代变量进行像键值对一样的循环遍历操作。换句话说，你不需要亲自创建索引来依次遍历并取出集合中的每一个元素；此循环会将集合中的每一个元素创建对应的索引，通过索引来遍历整个数组中的元素。

另外，如果你觉得这样不好记忆，你可以换一种方式：在英文中，The color of books 指的是图书的颜色。图书是一个整体，而每一本书的封皮颜色都是不同的，是图书整体中的个体。通过这种方式可以很快的理解for-of循环机制。

使用for-of循环遍历数组元素

restaurant对象

const restaurant = {
    name: '意大利🇮🇹经典',
    location: 'Via Angelo Tavanti 23, 佛罗伦萨, 意大利',
    categories: ['意大利', '比萨店', '素食', '有机'],
    starterMenu: ['佛卡夏', '意式烤面包', '大蒜面包', '卡普雷塞沙'],
    mainMenu: ['披萨', '意大利面', '烩饭'],
    openingHours: {
        thu: {
            open: 12,
            close: 22,
        },
        fri: {
            open: 11,
            close: 23,
        },
        sat: {
            open: 0, // Open 24 hours
            close: 24,
        },
    },
};

利用传统的方法（for循环）来逐次遍历数组中的每个元素

const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];

// Normal loop
for (let i = 0; i < menu.length; i++) {
    console.log(menu[i]);
}

通过方法（for-of循环）来逐次遍历数组中的每个元素:

for(const item of menu){
  console.log(item);
}

甚至你也可以写成这样：

for(const item of menu) console.log(item);

for-of循环的注意事项📋：

注意：在普通循环♻️和for-of循环中，你还是可以使用break或continue关键字在设定的情况下跳出循环，但是在之后的for-each循环中你将不能做这些

初识entries()

实际上，for-of循环之所以可以做到不设立和操作索引变量index就可以遍历整个数组集合。entries()方法功不可没。实际上在JavaScript中，entries()是一个数组迭代器。

// 如何在for-of循环中获取元素的索引
for (const item of menu.entries()) {
    console.log(item);
}

entries()方法会将获取到的数组或对象整合到一个对象中，并将他们编排成一个带索引序号和元素内容的一个数组，通过访问对象内数组的第一个元素即可得到索引序号，访问第二个元素即可得到数组中包含的内容。

// menu.entries()到底是什么
// 用console.log(menu.entries());  会返回一个数组迭代器
console.log([...menu.entries()]);   // 探究👀entries()方法下的数组迭代器内部是什么样子

既然这样，如果我们将刚刚得到的menu菜单数组进行遍历，如果我们不了解for-of循环的运行原理，我们只能这样写：

// 利用for-of循环打印一个菜单
// 旧式写法
for (const item of menu.entries()) {
    console.log(`${item[0] + 1}: ${item[1]}`);
}

实际上，通过entries()方法，我们可以对数组进行解构操作。将得到的item的每一项分解成i和el。通过变量i获取每一个数组中的第一个元素------即序号；通过变量el获取每个数组中的第二个元素------即内容和值。

对于这个数组来说，item中的第一个元素一定是1,2,3...等序号，第二个元素就是序号对应的菜品和食物🍜。

//新写法
//因为在for-of-loop中已经将menu数组解构成索引加内容的样式，所以直接用变量去替代
//索引序号即可
for (const [i, el] of menu.entries()) {
    console.log(`${i + 1}: ${el}`);
}

测试结果，两次输出的结果是一样的。

使用for-of循环遍历对象内属性

使用for-of循环同样可以遍历对象内部的属性。实际上对象内部的属性也可以被称为键，而属性对应的内容称为值。通过for-of循环可以通过键值对的方式逐次遍历对象内部的属性。

对象 restaurant :

const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const openingHours = {
    [weekdays[3]]: {
        open: 12,
        close: 22,
    },
    [weekdays[4]]: {
        open: 11,
        close: 23,
    },
    [weekdays[5]]: {
        open: 0, // Open 24 hours
        close: 24,
    },
};
const restaurant = {
    name: '意大利🇮🇹经典',
    location: 'Via Angelo Tavanti 23, 佛罗伦萨, 意大利',
    categories: ['意大利', '比萨店', '素食', '有机'],
    starterMenu: ['佛卡夏', '意式烤面包', '大蒜面包', '卡普雷塞沙'],
    mainMenu: ['披萨', '意大利面', '烩饭'],
    // ES6 enhanced object literals
    openingHours,
    // 新的对象属性名写法
    order(starterIndex, mainIndex) {
        return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
    },
};

目前在restaurant对象中具有openingHours这个属性，通过for-of循环可以将openingHours属性内的对象和元素依次解构。

通过for-of循环 ♻️ 遍历 restaurant对象中的 openingHours属性

for (const day of Object.keys(openingHours)) {
    console.log(day);
}

利用Object.keys()获取到对象中的属性（键）

而且，通过Object.keys()方法获取到的键值会将他们集成到一个数组中，因此对数组可以进行的操作，同样适用于此。

const properties = Object.keys(openingHours);
console.log(properties);

console.log(`We are open on ${properties.length} days我们店铺开${properties.length}天。`);

另外，获取到的键值对依然可以附加到字符串中，这并不影响字符串的连接。for-of循环会将遍历得到的键值附加到字符串的末尾。

for (const day of properties) {
    openStr += `${day},`;
}
console.log(openStr);

利用Object.values()获取对象属性中的值

// Property VALUES
const values = Object.values(openingHours);
console.log(values);

这些值正好是restaurant对象下的openingHours属性中的键和值：

const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
const openingHours = {
    [weekdays[3]]: {
        open: 12,
        close: 22,
    },
    [weekdays[4]]: {
        open: 11,
        close: 23,
    },
    [weekdays[5]]: {
        open: 0, // Open 24 hours
        close: 24,
    },
};

Object.values()方法会将每个获取到的属性对象封装📦到一个数组中，通过数组访问索引的方式可以依次将属性对应的值和内容取出。

const values = Object.values(openingHours);
console.log(values[0]);

进一步分析entries()方法

// Entries object
const entries = Object.entries(openingHours);
console.log(entries);

for (const x of entries) {
    console.log(x); // 遍历entries获取到其中的每个值
}

对于遍历对象中的属性值和方法，通过entries()会返回一个对象，在数组中依次装载着对象的属性值（键）和对应的值。就类似于这样：

[  index(0): ["key", {object}],
  index(1): ["key", {object}],
  index(2): ["key", {object}],
]

因此，现在你可以对通过entries()方法返回对象中的每一个属性元素进行控制，这种方法类似于使用for-of循环♻️来控制数组。

最初使用for-of循环来控制对象和对象内部的属性与值。

for (const x of entries) {
    console.log(x); // 遍历entries获取到其中的每个值
}

现在可以对属性和值进行更详细的操作。

// 甚至在遍历对象属性中，你也可以使用数组
for (const [key, value] of entries) {
    console.log(`On ${key} we open at ${open} and close at ${close}`);
}

但是目前通过这种解析方式我们仍无法获取到属性中的每个值------即openingHours对象中Thu键下的属性值。

这是因为：你还需要对value进行解构。value也是键值下的一个对象。

//[key, value]
for (const [key, { open, close }] of entries) {
    console.log(`On ${key} we open at ${open} and close at ${close}`);
}