课程名称：2周刷完100道前端优质面试真题
课程章节：第4章 前端面试技能拼图2 ：前端基础知识 ， 必知必会
主讲老师：双越
课程内容：
今天学习的内容包括：
4-11 -【连环问】for-await-of有什么作用——用于遍历多个Promise。
4-12 -offsetHeight-scrollHeight-clientHeight有什么区别——offsetHeight是border + padding + content,clientHeight是padding + content，scrollHeight是padding + 实际内容尺寸。
课程收获：
答案
- for await…of 用于遍历多个 Promise
- async和await常配合使用
return new Promise((resolve) => {
setTimeout(() => {
resolve(val)
}, 1000)
})
const list = [p1, p2, p3]
// Promise.all(list).then(res => console.log(res))
for await (let res of list) {
console.log(res)
}
盒子模型
- width
- height
- padding
- border
- margin
- box-sizing
计算规则
- offsetHeight offsetWidth : border + padding + content
- clientHeight clientWidth : padding + content
- scrollHeight scrollWidth : padding +实际内容尺寸
const container = document.getElementById('container')
console.log('offsetHeight', container.offsetHeight)
console.log('offsetWidth', container.offsetWidth)
console.log('clientWidth', container.clientWidth)
console.log('clientHeight', container.clientHeight)
console.log('scrollWidth', container.scrollWidth)
console.log('scrollHeight', container.scrollHeight)
- scrollTop scrollLeft 需滚动之后获取
今天的 学习了 【连环问】for-await-of有什么作用和offsetHeight-scrollHeight-clientHeight有什么区别。for-await-of等同于Promise.All()，offsetHeight-scrollHeight-clientHeight的区别为计算包含不同。怪异盒子模式比较常用。
下一步就是 学习 HTMLCollection和NodeList有什么区别。今天学习就先到这里吧。
坚持打卡，坚持学习，未来可期，加油😀~