2020-----面试题整理

css:

1:display:none 和 visibility:hidden 的区别:

都是隐藏,一个占位,一个不占位

2:伪类一个:和两个::的区别 :

一个冒号是伪类,两个是伪元素

3:css选择器有哪些:

1. id选择器（ # myid）

2. 类选择器（.myclassname）

3. 标签(元素)选择器（div, h1, p）

4. 相邻选择器（h1 + p）

5. 子选择器（ul > li）

6. 后代选择器（li a）

7. 通配符选择器（ * ）

8. 属性选择器（a[rel = "external"]）

9. 伪类选择器（a:hover, li:nth-child）

4:div span p 都是属于什么选择器:

标签选择器

5:如何用css实现一个三角形?

当然是用border来实现了.

6:如何用css实现垂直居中?

七种方式实现垂直居中

7:如何做到响应式布局?什么是响应式布局?

什么是响应式布局?
1、同一页面在不同大小和比例上看起来都应该是舒适的
2、同一页面在不同分辨率上看起来都应该是合理的
3、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的
4、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。
如何做到响应式布局?
1、可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页面
2、可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列数
3、适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
4、能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
5、能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
6、能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
7、放弃使用像素作为尺寸单位：用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕

js

8:什么是BFC规范:

块级格式化上下文,

overflow:hidden 清除浮动。（方方总是用 .clearfix 清除浮动，坚决不用 overflow:hidden 清除浮动）
overflow:hidden 取消父子 margin 合并。http://jsbin.com/conulod/1/edit?html,css,js,output38（方方用 padding-top: 1px;）

9:节流和防抖:

我们在平时开发的时候，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，有些时候，我们并不能或者不想频繁触发事件，咋办呢？这时候就应该用到函数防抖和函数节流了！

函数防抖（debounce）

　　短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

节流(throttle)

　　指连续触发事件但是在 n 秒中只执行一次函数。即 2n 秒内执行 2 次... 。节流如字面意思，会稀释函数的执行频率

10:同源策略:

协议相同,端口相同,域名相同

11:new一个对象的过程发生了什么?

1、创建一个新对象，如：var person = {};

2、新对象的_proto_属性指向构造函数的原型对象。

3、将构造函数的作用域赋值给新对象。（也所以this对象指向新对象）

4、执行构造函数内部的代码，将属性添加给person中的this对象。

5、返回新对象person。

12:js的事件委托和事件代理?

假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的元素是哪个儿子，这就是事件委托。
可以监听还没有出生的儿子（动态生成的元素）。省监听器。

13:js事件捕获和事件冒泡?

事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。

14:闭包是什么,哪里用到了?

闭包就是函数外部能访问到函数内部的变量

1:通过闭包可以在setTimeout中实现传参效果.
2:作为回调绑定到事件中

参考解释:闭包(匿名函数)

15:JS中substr与substring的区别?

js中substr和substring都是截取字符串中子串，非常相近，可以有一个或两个参数。

语法：substr(start [，length]) 第一个字符的索引是0，start必选 length可选

　　　substring(start [, end]) 第一个字符的索引是0，start必选 end可选

相同点：当有一个参数时，两者的功能是一样的，返回从start指定的位置直到字符串结束的子串

16:原型和原型链?

每个对象都有__proto__内置属性.而这个内置属性等于构造函数的原型对象prototype. 
原型和原型链是JS实现继承的一种模型.
__proto__ (内置属性)一层一层的指向就可以被称为原型链。

原型链的形成是靠内置属性而不是原型对象.原型链存在于实例与构造函数的原型对象直接,而不是存在于实例与构造函数之间.

17:js splice，slice，split区别

splice()方法向/从数组中添加/删除项目，然后返回被删除的项目。
slice()方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
可以作用在数组和字符串上
split()方法用于把一个字符串分割成字符串数组。
提示：如果把空字符串 (“”) 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

18:js 基础类型和复杂类型?

string number bool undefined null object symbol
object 包括了数组、函数、正则、日期等对象
一旦出现（数组、函数、正则、日期、NaN）直接0分

react

19:react 在即将销毁的时候可以做什么?

取消监听事件等

20:react16 生命周期?

初始化阶段
constructor 构造函数
getDefaultProps props默认值
getInitialState state默认值
挂载阶段
staticgetDerivedStateFromProps(props,state)
render
componentDidMount
更新阶段
staticgetDerivedStateFromProps(props,state)
shouldComponentUpdate
render
getSnapshotBeforeUpdate(prevProps,prevState)
componentDidUpdate
卸载阶段
componentWillUnmount
错误处理
componentDidCatch

21:react 虚拟dom节点?方法?

VirtualDOM，虚拟DOM对象，是 React中的DOM对象。React使用JSX编写虚拟DOM对象，经过Babel编译之后会生成真正的DOM. 然后会将真正的DOM插入(Render)到页面。

由于更新 dom 成本昂贵，所以我们通过读取 virtual dom 这个低成本的对象，
然后将vitural dom 通过 js 渲染到界面

如果操作 dom 或更新了 dom ，我们可以通过 diff 方法，来对比新旧 virtual dom 后，找出不同地方，然后只更新发生变化的部分。这样来更新 dom 就大大地节省了成本，并且提供良好的用户体验。

22:react setState是同步还是异步?为什么?

既可能是同步的，也可能是异步的。准确地说，在React内部机制能检测到的地方， setState就是异步的；在React检测不到的地方，例如setInterval,setTimeout里，setState就是同步更新的。

23:react父子兄弟传值?

父子通信 props , 子父通信回调.
兄弟通信子组件1---》父组件---》子组件2【其中子组件1和2是兄弟组件】

这样兄弟组件就达到了通信的目的。

24:react 如何对列表进行渲染及key的作用?

react会将你数组里面的元素一个个罗列并且渲染出来.
用表达式套数组罗列到页面上的元素，都要为每个元素加上 key 属性，这个 key 必须是每个元素唯一的标识。key可以在DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。所以需要给数组每一个元素增加一个唯一的标识。

25:w3c标准?

W3C标准不是一个标准，而是一系列标准的集合，包含三部分的标准：
1.结构标准，代表语言是xHTML

2.表现标准，代表语言是CSS

3.动作标准，代表语言是JavaScrip
具体规范

26:从输入 URL 到页面展现中间发生了什么？

DNS 查询 DNS 缓存
建立 TCP 连接（三次握手）连接复用
发送 HTTP 请求（请求的四部分）
后台处理请求
1. 监听 80 端口
2. 路由
3. 渲染 HTML 模板
4. 生成响应
发送 HTTP 响应
关闭 TCP 连接（四次挥手）
解析 HTML
下载 CSS（缓存
解析 CSS
下载 JS（缓存
解析 JS
下载图片
解析图片
渲染 DOM 树
渲染样式树
执行 JS

27:es6 的特性?

es6新特性这里写的很棒棒,直接戳

28:CSS3新特性?

CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image

28:promise async await ?

第一种解释
 第二种解释,感觉这个更好一些

29:常用的设计模式?

单例模式,代理模式, 策略模式,装饰模式, 观察者模式,命令模式,组合模式,简单工厂, 模板方法模式.

30:你怎么理解高内聚,低耦合?

耦合：是对模块间关联程度的度量。耦合的强弱取决与模块间接口的复杂性、调用模块的方式以及通过界面传送数据的多少。模块间的耦合度是指模块之间的依赖关系，包括控制关系、调用关系、数据传递关系。模块间联系越多，其耦合性越强，同时表明其独立性越差。降低模块间的耦合度能减少模块间的影响，防止对某一模块修改所引起的“牵一发动全身”的水波效应，保证系统设计顺利进行。耦合度就是某模块（类）与其它模块（类）之间的关联、感知和依赖的程度，是衡量代码独立性的一个指标。
内聚：故名思议，表示内部间聚集、关联的长度，那么高内聚就是指要高度的聚集和关联。高内聚是指类与类之间的关系而定，高，意思是他们之间的关系要简单，明了，不要有很强的关系，不然，运行起来就会出问题。一个类的运行影响到其他的类。由于高内聚具备可靠性，可重用性，可读性等优点，模块设计推荐采用高内聚。

高内聚，低耦合的系统具有更好的重用性，维护性，扩展性，可以更高效的完成系统的维护开发，持续的支持业务的发展，而不会成为业务发展的障碍。

31:你知道六大设计原则吗?

单一职责原则：一个类值负责一个功能的职责
开闭原则：扩展开放，修改关闭。
里氏代换原则：使用父类的地方都能使用子类对象
依赖倒转原则：针对接口编程，
接口隔离原则：针对不同部分用专门接口，不用总接口，需要哪些接口就用哪些接口
迪米特法则：软件实体类，尽量不与其他实体类发生关系相互作用，对外都统一的暴露接口就行了

32:同步队列,宏观队列,微观队列?

执行顺序: 先走同步队列，再走异步队列（包含微观任务队列和宏观任务队列）。同步任务结束后，先处理微观任务后处理宏观任务

33: margin:auto与margin: 0 auto;有什么区别

1、意思不同。margin:auto=margin:auto auto auto auto，表示上下左右都为auto；margin:0 auto=margin:0 auto 0 auto，表示上下为0，左右为auto；
2、居中方式不同。margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中；

margin后面一般会跟4个参数，如margin:1px、1px、1px、1px，分别表示上外边距为1px、右外边距为1px、下外边距为1px、左外边距为1px。

如果后面只写2个参数的话，如margin：1px、2px，则表示上下外边距为都为1px，左右外边距都为2px。

34:react高阶组件怎么理解?如何使用和使用场景.

简单的理解是：高阶组件是参数为组件，返回值为新组件的函数。
高阶组件的两种形式：

属性代理（Props Proxy）
可以说是对组件的包裹，在包裹的过程中对被包裹的组件做了点什么（props的处理，把基础组件和其他元素组合），然后返回，这就成了一个高阶组件；
反向继承 (Inheritance Inversion)
可以理解成是组装，和属性代理不同的是，反向继承是继承自基础组件，所有很自然，它可以直接获取基础组件的props，操作基础组件的state。可以通过反向继承的形式，配合compose(通过一系列的骚操作，实现任意的、多种的、不同的功能模块的组合，用来加强组件。)将携带不同功能模块的高阶组件组装到基础组件上，加强基础组件。

35:如何改变js的this指向.

先简单理解下this的指向:函数中的this是在运行时候决定的，而不是函数定义时，有下列几种情况

普通函数调用，此时 this 指向 window
构造函数调用，此时 this 指向实例对象
对象方法调用，此时 this 指向该方法所属的对象
通过事件绑定的方法，此时 this 指向绑定事件的对象
定时器函数，此时 this 指向 window

改变this指向的方法:

call() 方法

第一个参数表示要把this指向的新目标，第二个之后的参数其实相当于传参，参数以，隔开（性能较apply略好）
用法：a.call(b,1,2); 表示要把a函数的this指向修改为b的this指向，并且运行a函数，传进去的参数是（1，2）

apply() 方法

第一个参数同上，第二个参数接受一个数组，里面也是传参，只是以数组的方式，相当于arguments
用法：a.apply(b,[1,2]); 表示要把a函数的this指向修改为b的this指向，并且运行a函数，传进去的参数是（1，2）注意：即使只有一个参数的话，也要是数组的形式

bind()方法

bind()创建的是一个新的函数（称为绑定函数），与被调用函数有相同的函数体，当目标函数被调用时this的值绑定到 bind()的第一个参数上

36:react的状态管理.怎么处理多个状态.

最基础的就是使用 redux 来处理.dva

37:redux的使用.

redux就是创建一个store来管理所有状态，触发action来改变store。关于redux的使用场景是非常灵活的，可以结合各种库去用，我用惯了react，用的时候还要配合react-redux。

38:版本兼容.

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

4、图片默认有间距
解决方案：使用float 为img 布局

5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；

7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

39:如何用promise同时发送多个请求. 异步变同步

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Promise.prototype.then()方法返回的是一个新的Promise对象，因此可以采用链式写法，即一个then后面再调用另一个then。如果前一个回调函数返回的是一个Promise对象，此时后一个回调函数会等待第一个Promise对象有了结果，才会进一步调用。

40:如何用js创建一个类.

方式1 : var obj = new Object();
方式2 : var obj = {};

41:实现onclick事件有几种方法?

通过点击事件
通过方法响应点击事件
监听点击事件

42:说出下列代码的执行顺序?

console.log(1);
setTimeout(function(){
    console.log(2);
},0)
new Promise(resolve => {
    console.log(3);
}).then(function(){
    console.log(4);
});
console.log(5)

考的点:

Promise.resolve方法返回一个promise的实例,是直接执行的
队列执行顺序,先同步,再微观,再宏观
setTimeout属于宏观队列
pomise的then是微任务

运行结果为:13542

43:说出下列代码的运行结果?

function O (age) {
    this.age = age;
  }
  var o = new O(1);
  var age = 3;
  O.prototype.age = 2;
  setTimeout(function () {
    age = 4;
    O(5);
    console.log(o.age, age)
  }, 1000)

运行结果为1,5

44:js的深拷贝和浅拷贝的区别

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。

深拷贝的实现:

采用递归去拷贝所有层级属性
通过JSON对象来实现深拷贝
如果对象的value是基本类型的话，也可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象

浅拷贝的实现:

Object.assign方法
直接用=赋值

45:有状态组件和无状态组件

有状态组件:

它属于一个class类
有继承
可以通过this来接收状态和属性
如果你想用react的生命周期,想对一些数据进行增删改查的话就要用到有状态组件

无状态组件:

是一个函数
没有继承功能
也没有生命周期
他的动态数据都是通过父组件传值子组件通过props接收渲染
针对一些简单的逻辑判断等等,选用无状态组件

46.JS的typeof返回哪些数据类型?

string、number、object、boolean、function、undefined

47:并发和并行的区别

解释一：并行是指两个或者多个事件在同一时刻发生；而并发是指两个或多个事件在同一时间间隔发生。
解释二：并行是在不同实体上的多个事件，并发是在同一实体上的多个事件。
解释三：并发是在多台处理器上同时处理多个任务。如 hadoop 分布式集群，并行是在一台处理器上"同时"处理多个任务。

48:let var const定义变量的区别?

let

所声明的变量只在let命令所在的代码块内有效。（块级作用域）
不存在变量提升
存在暂时性死区

const

声明一个只读的常量
一旦声明，常量的值就不能改变
const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const的作用域与let命令相同：只在声明所在的块级作用域内有效。

var

在函数作用域或全局作用域中通过var声明的变量，都会被当成在当前作用域顶部声明的变量，这就是变量提升机制

48:JS原生3种绑定事件?

// 1. 在标签中直接绑定
<button onclick="handleClick()" >自定义函数</button>

// 2. 在js事件中获取dom事件绑定

<button id="btn" onclick="handleClick()" >dom事件绑定</button>
document.getElementById('btn').onclick=handleClick();

// 3. 事件监听addEventListener
elementDOM.addEventListener(eventName,handle,useCapture);