CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
动态交互：JavaScript基础的学习
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
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()`会返回一个对象，在数组中依次装载着对象的属性值（键）和对应的值。就类似于这样：
#### 结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】]()**
![]()
中依次装载着对象的属性值（键）和对应的值。就类似于这样：
#### 结束
一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】]()**
![]()
