给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：web前端面试题库
除了for循环♻️，for-of,for-each循环♻️也是一个不错的选择
先说for-of循环♻️
认识for-of循环♻️
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}`);
}
给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：web前端面试题库
