面试题-基础知识

HTML CSS JS 基础知识

js严格模式有什么特点

• 全局变量必须先声明
• 禁止使用with
• 创建eval作用域（eval把对应的字符串解析成js代码并运行）
• 禁止this指向window，this是undefine
• 函数参数不能重复

for…in 和 for…of的区别

for…in遍历的是key
for…of遍历的是value

• 遍历对象:for…in 可以，for…of 不可以
• 遍历 Map Set : for…of 可以，for…in 不可以
• 遍历 generator:for…of可以，for…in 不可以
• for…in 用于可枚举数据，如对象、数组、字符串
• for…of 用于可迭代数据、如数组、字符串、Map、Set
  ( arrSymbol.iterator => 有next )

for await … of有什么作用

用于遍历多个promise

function createPromise(val) {
   
    return new Promise((resolve) => {
   
        setTimeout(() => {
   
            resolve(val)
        }, 1000)
    })
}

(async function () {
   
    const p1 = createPromise(100)
    const p1 = createPromise(200)
    const p1 = createPromise(300) 
    const list = [p1, p2, p3]
    Promise.all(list).then(res => console.log(res))

    for await (let res of list) {
     // 遍历多个promise
        console.log(res)
    } 
})()

px % em rem vw/vh 有什么区别

• px基本单位，绝对单位(其他的都是相对单位)
• %相对于父元素的宽度比例
• em 相对于当前元素的 font-size
• rem相对于根节点的font-size （手机端不同宽度响应式匹配）
• vw 屏幕宽度的1%
• vh屏幕高度的1%
• vmin两者的最小值，vmax两者的最大值

offsetHeight scrollHeight clientHeight 区别

• offsetHeight：border + padding + content
• clientHeight：padding + content
• scrollHeight：padding + 实际内容尺寸

类数组转化成数组

const arr1 = Array.from(list)
const arr2 = Array.prototype.slice.call(list)
const arr3 = [...list]

HTMLCollection 和 NodeList的区别

HTMLCollection 和 NodeList的区别

箭头函数

• 箭头函数的缺点