2021年前端基础面试题 1-7

1 CSS

line-height 的继承机制
父元素行高20px：子元素行高直接继承20px
父元素2或者1.5：子元素行高就是font-size的2倍或者1.5倍
父元素200%：子元素行高是200%乘以父元素的font-size而不是乘子元素的font-size

flex画筛子三

box  {
    display: flex;
    justify-content: sapce-between;
}

item:nth-child(2)  {
    align-self :  center ;
}

item:nth-child(3){
    aligin-self:flex-end;
}

响应式布局

rem vw vh vmax vmin 通过媒体查询的方式动态的设置跟字体的大小

rem的计算机制

(N)rem = html的font-size *( N)

例1：

默认的html的font-size是16px，div的font-size设置为1rem就是16*1=16px
为了便于理解，我们用F表示html的font-size，用R表示rem，用P表示px。
从上面的结果就可以得到公式 P = F * R
F = 16px
R = 1
P = 16 *1
结果P就是16px

例2：

如果html的font-size设置为100px
目标像数要求为16px
那div的font-size设置0.16rem
rem就是目标像数除以根元素
得到公式 R = P / F (rem = 目标px / html的font-size)
第三个公式
F = P / R

2 JS

变量类型，事件机制

值类型，引用类型，手写深拷贝，事件冒泡，事件代理

原型、原型链 、类 、继承

画出原型链的类图，解释supper，es5继承方式

// 构造函数 
function Parent1(name) {
  this.name = name;
  this.age = 12;
}
function Child1() {
  Parent1.call(this,'son');
  this.type = 'child1';
}
console.log( new Child1().name); //son

闭包

作用域，自由变量，手写bind

Function.prototype.myBind = function (){
    const args = Array.prototype.slice.call(arguments)
    const t = args.shift() // 第一项为传入的this
    const that = this
    return function (){
        retrun that.apply(t, args)    
    }
}

实际的应用场景
隐藏数据，比如jquery的自定义事件也是这样隐藏对象数据，只暴露方法

事件流，事件循环

事件流分为3个阶段：
（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；
（2）目标阶段：真正的目标节点正在处理事件的阶段；
（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

webpack构建流程

初始化 – 配置
编译 – loader，plugin
输出 – chunk

数组求和

// Accumulator (acc) (累计器)
// Current Value (cur) (当前值)
// Current Index (idx) (当前索引)
// Source Array (src) (源数组)
var sum = [0, 1, 2, 3].reduce(function(accumulator, currentValue) {
  return accumulator + currentValue
}, 100) // 从100开始累加
console.log(sum) // 106

使用promise 封装一个图片加载的方法

function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error('img load err' + src)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

const url1 = 'xxx1'
const url2 = 'xxx2'
loadImg(usr1).then(img1 => {
    console.log(img1.width)
    return img1
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2)

}).then(img2 => {
    console.log(img2.width)
})

for of 和for in forEach的区别

for of 可以处理异步的遍历

const nums = [1, 2, 3]

// 先遍历完数组，先执行3次异步调用
nums.forEach(async (i) => {
    const res = await getList(i)
    console.log(res)
})

// 遍历移数组一次，执行一次异步调用，返回结果后再遍历数组下一项
!(async function () {
    for (let i of nums) {
        const res = await getList(i)
        console.log(res)
    }
})()