前端常问面试题总结

面试总结

1、介绍一下你项目中的重难点

2、父子组件传递参数

3、state和props区别

4、props能否被改变，虚拟dom diff算法

5、redux、react生命周期

6、原型原型链，继承的几种方式，前后端联调

7、null和undifined 的区别 ，unll和undifined有没有toString（）方法

undifined：变量被声明了，但是没有赋值，为undifined。对象没有赋值的属性，为undifined。函数没有返回值的时候默认返回undifined
null：表示为原型链的终点

8、antd design api form 添加回显

9、flex布局 口述三栏布局

10、position的几个定位区别

position：realitive 不脱离文档流
position：absolute 脱离文档流
position：fixed 脱离文档流
position：static 默认
position：sticky 粘性定位，不脱离文档流

11、盒模型

标准盒模型：margin border contain ，padding
怪异盒模型：ie盒模型的content包含border和padding

2021 01.26

1、自我介绍

2、说一下你做的这几个项目中你认为比较好的项目吧

我介绍的是我做的后台管理系统（增删改查，权限，二级菜单）

3、react-router-dom优点

我主要说的是switch，Route，exact ，BrowserRouter，hashRouter

4、虚拟dom diff算法 （重点）

5、react合成事件

6、深浅拷贝

深拷贝实现的方法：递归，json对象，json.string,或者json.stringfy
如果是引用数据类型，栈中一般都是来放名字，堆中一般都是来放值的，栈中会提供一个地址指向堆中的值，浅拷贝拷贝的就是这个地址，所以他们还是公用一块内存的，而深拷贝是重新申请了一个堆内存来存放新的值，所以深拷贝和原来不共享一块内存

7、闭包

在一个函数的外部可以访问到该函数内部的局部变量
优点：可以减少全局变量的声明，能够读取函数内部的变量 ，不会在调用结束后，被垃圾回收机制回收
缺点：会造成内存泄漏，极大的占用内存。解决方法：在函数退出前，给引用的变量赋值为null或者清除掉，将不使用的局部变量删除掉

8、垃圾回收机制

标记清楚（在进入函数前进行标记，出函数的时候进行清楚），或者引用计数清楚

9、es6生命变量 const let var 区别

const 是声明一个常量的，var 可以重复定义一个变量，如果不初始化会输出undefined，不会报错，而const不行, let是块级作用域，函数内部使用let定义后，对函数外部无影响

10、symbol（声明一个值，这个值是唯一的不会被改变）

2021 01.27 早上

1、父元素宽高固定、子元素实现居中

position:absolute
left：50%，
top：50%。
margin：-left，-top

或者可以换成transform：translatex，translateY

用flex布局的话，可以用display:flex
flex-direction：column
justify-content：center
Alain-item：center
用gird也可以实现居中：
　display: grid; // 设置grid布局方式
　　justify-items: center; // 主轴居中
　　align-items: center; // 交叉轴居中

2、选择器权重

！import 最高权重
内联样式选择器为1000
id ：100、class：10、标签选择器、

3、transform各个属性

包括旋转：rotate（ ）、扭曲：skew、translatex、translateY移动、缩放：scale、transform-orign(x,y)旋转基点

4、js基本数据类型

object，string，number，undifined，布尔，null，新增了一个symbol

5、es6新增特性

1、class 继承
2、let 不能够重复声明，独立的块状级作用域，没有声明提升
3、const 声明一个常量，可以修改引用类型（对象）里面的属性，不能修改基本类型
4、模板字符串，里面可以写动态的数据

6、const 基本类型不能修改，对象可以通过修改属性进行修改，

基本类型：布尔，number，string，null，undefined，obj，symbol（声明一个无法改变的值，独一无二的值）

7、= =和===区别

===就是对比值和类型，而 ==只对比值，不对比类型

8、隐式转换和显示转换

undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

隐式转换将boolean转换为number，0或1

隐式转换将Object转换成number或string，取决于另外一个对比量的类型

对于0、空字符串的判断，建议使用 “===” 。

“”会对不同类型值进行类型转换再判断，“=”则不会。它会先判断两边的值类型，类型不匹配时直接为false。
1.undefined与null相等，但不恒等（===）

一个是number一个是string时，会尝试将string转换为number

“”会对不同类型值进行类型转换再判断，“=”则不会。它会先判断两边的值类型，类型不匹配时直接为false。

9、项目介绍

11 、平常项目做过拖拽吗，怎么实现的

12、路由跳转的时候有没有遇见过闪烁问题，是怎么解决的

可以在数据初始化的时候，进行判断，如果数据为空，就可以让其显示一段文字“数据为空”。

13、高度塌陷解决方式

给父元素添加一个高度
给父元素添加 overflow：hidden
或者给子元素添加一个空盒子：clear：both，overflow：hidden

14、优雅降级和渐进增强

渐进增强：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
优雅降级：
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

15、bfc的几种触发方式

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、tabble-caption和inline-block之一
4、position的值不为static或则releative中的任何一个

16、css3实现一个三角形、css3动画（很多人问）

首先，需要把元素的宽度、高度设为0。然后设置边框样式。

width: 0;

height: 0;

border-top: 40px solid transparent;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

border-bottom: 40px solid #ff0000;

17、手写、promise

Promise是ES6新增的内置对象，用于解决异步相关的问题。Promise有三种状态，分别是（1）等待中（pending）（2）完成了（resolved）(3)拒绝了（rejected）它还有两个重要的方法，如果请求成功那么执行then方法，如果失败那么执行catch方法。

function promiseAsync(){
        let promise = new Promise((resolve, reject) => {   
            if(success){
                // 成功时执行
                resolve(fn1)
            }else{
                // 失败时执行
                reject(fn2)
            }
        })

        return promise
    }

    promiseAsync().then(fn1).catch(fn2)