【金秋打卡】第16天 前端面试技能拼图2

课程名称：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有什么区别。今天学习就先到这里吧。

坚持打卡，坚持学习，未来可期，加油😀~

​​​​​​​
​​​

​