前端面试题： 吊打面试官！

css

css选择器：

bfc:

（猿辅导）
css 中的盒模型，怎么切换

flex布局的理解，居中的方式

[答: ]
我们传统的布局方式是基于在盒子模型下的，依赖于display属性的，position属性的或者是float属性的，但是在传统的布局上面并不好布局;
Flex 容器有如下6个属性

flex-direction :该属性决定主轴的方向(即项目的排列方向)。row从左到右，row-reverse相反，column从上到下，column-reverse相反

flex-wrap：控制伸缩容器是单行还是多行，nowrap默认单行显示不换行，wrap换行,第一行在上方，wrap-reverse伸缩容器多行显示，第一行在下方

flex-flow：该属性是flex-direction伸缩项目主轴方向属性和flex-wrap 换行属性的简写形式

justify-content：定义伸缩项目在主轴上的对齐方式 center，flex-start/end，space-between两端对齐

align-items： 伸缩项目在y轴对齐方式，主轴x轴，交叉轴就是y轴， justify-content和align-items是一对，前者分别定义主轴和侧轴的 方向，后者分别定义主轴和侧轴中项目的 对齐方式

align-content：调准伸缩行在伸缩容器里的对齐方式，flex-start交叉轴起点对齐 flex-end交叉轴终点对齐。center交叉轴中点对齐

清除浮动

方法一：使用带clear属性的空元素
在浮动元素后使用一个空元素如

.clear{clear:both;}。属性即可清理浮动
方法二：使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;
方法三：使用CSS的:after伪元素
给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动
.clearfix:after{ display: block; height: 0; clear: both; visibility: hidden; }

解释下css3 的 Flexbox ( 弹性盒布局模型） 以及适用场景？

css 中动画的相关属性 （ 红包雨的实现）

css3新属性动画 animation，和摇骰子动画类似

加css transation样式，trasation 里面加 animation 定义执行动画的轨迹和时长，

具体介绍下红包雨的实现方式

@keyframes
0% {
transform: translateY(-300px);
-ms-transform:translateY(-300px);
-webkit-transform:translateY(-300px);
}

JavaSctipt

（美团 start）

重绘 和 重排

参考https://segmentfault.com/a/1190000016990089

什么适合重绘

callback 改写成 promise

参考实例 https://blog.csdn.net/fuweilian1/article/details/78965783
https://www.jianshu.com/p/8fd80c368570
【答】

把传统的callback回调改写成es6中promise风格

1.传统的callback回调方式

let callFn = (arg1,arg2,cb)=>{//如果arg1>arg2回调正常，否则回调错误信息
    setTimeout(function(){
        if(arg1>arg2){
            cb(null,arg1+arg2);
        }else{
            cb(new Error('err'),null);
        }
    },5000);
}

//调用
callFn(1,2,function(err,data){
    if(err){
        //错误处理
    }else{
        //正确处理
    }
});

2.使用es6来写上面的功能

let promiseFn = (arg1,arg2)=>{
    return new Promise((resole,reject)=>{
        if(arg1>arg2){
            resole(arg1+arg2);
        }else{
            reject(new Error('err'));
        }
    }); 
};

//调用
promiseFn(1,2).then(data=>{
    //正确处理
}).catch(err=>{
    //错误处理
});

延伸

将 jquery 的 ajax 方法封装为 Promise 方法

function post (url, params) {
  return new Promise(
    (resolve, reject) => {
      jQuery.ajax({
        url,
        data: {...params},
        type: "post",
        success: function (res) {
          resolve(res)
        },
        error: function (res) {
          reject(res)
        }
      }) 
    }
  )
}

异步请求，使用 then 和 catch

function asyncPost () {
  console.log('==== 异步请求 start =====')
  post(
    'http://removeUrl',
    {
      foo: 'qwwerwer'
    }
  ).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
  console.log('==== 异步请求 end =====')
}

同步请求，使用 async 和 await

async function syncPost() {
  try {
    console.log('==== 同步请求 start =====')
    let res = await post(
      'http://removeUrl',
      {
        foo: 'qwwerwer'
      }
    )
    console.log(res)
    console.log('==== 同步请求 end =====')
  } catch (e) {
    console.log(e)
  }
}

promise 的三种状态，以及转换

promise有三种状态： pending未决定、reslove成功、rejected拒绝

catch（） 后面跟一个 then 会怎么执行

【参考】promise链式调用 https://www.jianshu.com/p/dc61ea153874

【答】
发生的异常被catch捕获到之后，执行完catch中的代码后，还是会继续执行.then中的代码。
如果想要阻止后续代码继续执行，可以使用 throw new Error（） 向外抛出错误，或者使用promise的reject()。

**1、正常执行的代码如果第一句出现异常,就不会执行第二句以及后面的所有正常代码
2、对于 try catch
finally而言，无论是否出现异常，异常是否被catch捕获，finally中的代码都会被执行，
即使 try 或者 catch 中有 return 语句，finally 中的代码还是会执行，finally 执行完后，如果try中的异常被catch捕获，就会继续执行try
catch外面的其他无关代码，如果没有被捕获，就会继续向外抛出异常，即中断执行后续所有代码。 **

如下所示： 	
        try{          
                正常执行的代码
	 	}catch (e){ 	
	 	     	出错后执行的代码 	
	 	}finally{
	            无论正常执行还是出错,之后都会执行的代码 	
	} 	//跟上面try catch无关的代码

给一个array 的对象增加一个 max 方法，用math.max 来写

给 array 的构造函数来增添这个 max 方法

事件冒泡

【参考】https://www.cnblogs.com/moqing/p/5590216.html
【答】

 var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
   div2.onclick = function(){alert(1);};
   div1.onclick = function(){alert(2);};//父亲
//html代码
 <div id="div1">
    <div id="div2"></div>
 </div>

就是两个父子关系的div,然后分别加了点击事件，当我们在div2里面点击的时候，会发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。
并且点击事件给页面显示出来的位置是没关系的，而是跟html代码中的位置有关系
如何解决事件冒泡 有两种方式

标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可

非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则，我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}

当需要阻止浏览器默认行为时，可以使用

function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

call apply bind 的区别

v8 中的垃圾回收？

js的基本数据类型，有哪些判断类型的方法？

原型链？ 如何继承？ 有哪些方式？ （常考）

作用链域 ？ （常考）

什么是闭包 （closure），为什么要用它 ？

promise 的工作原理是怎么样的？

【参考】https://blog.csdn.net/weixin_45073548/article/details/102867617
什么是Promise
　　Promise是ES6新增的解决异步（非阻塞）中存在的问题而产生的构造函数
Promise中的三种状态
　　pending（进行中）　　resoved（成功后）　　rejected（失败后）
Promise.prototype.then ： 当promise的状态返回resove时，则调用then（） 方法
　Promise.prototype.catch ：当promise的状态返回reject时，则调用catch（）方法

构建promise的格式

new Promise（function（resolve，reject）{
　　　　处理语句；

　　　　if（成功）{
　　　　　　resolve（）；

　　　　}else{
　　　　　　reject（）；

　　　　}

　　}）.then（function（）{
　　　　执行语句；

　　}）.catch（function（）{
　　　　执行语句；

　　}）

（美团 end）

（拼多多二面基础）

ES6 的新增特性:

[答]
字符串扩展
ES6为字符串扩展了几个新的API：
includes()：返回布尔值，表示是否找到了参数字符串。
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

数组新增了map reduce 方法

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1','20','-5','3'];
console.log(arr)
arr = arr.map(s => parseInt(s));
console.log(arr)

打印： {"1","20","-5","3"}
      [1,20,-5,3]

promise 我们可以通过Promise的构造函数来创建Promise 对象，并在内部封装一个异步执行的结果。

语法：
const promise = new Promise(function(resolve, reject) {
  /执行异步操作/

  if ( /异步操作成功/){
    resolve(value); /调用resolve，代表Promise将返回成功的结果/
  } else {
    reject(error); /调用reject，代表Promise会返回失败结果/
  }
});

如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现,语法：

promise.then(function(value){
    // 异步执行成功后的回调
});

如果想要处理promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value){
    // 异步执行成功后的回调
}).catch(function(error){
    // 异步执行失败后的回调
})

示例：

const p = new Promise(function (resolve, reject) {
    /这里我们用定时任务模拟异步/
    setTimeout(() => {
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功！num:" + num)
        } else {
            reject("出错了！num:" + num)
        }
    }, 300)
})

p.then(function (msg) {         /调用promise/
    console.log(msg);
}).catch(function (msg) {
    console.log(msg);
})

模块化

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。

而JS中没有包的概念，换来的是 模块。
模块功能主要由两个命令构成：export 和 import。
export命令用于规定模块的对外接口，
import命令用于导入其他模块提供的功能。

export
我可以使用 export 将对象导出：

const util = {
    sum(a,b){
        return a + b;
    }
}
export util;

  /简写方式/
export const util = {
    sum(a,b){
        return a + b;
    }
}
/export不仅可以导出对象，一切JS变量都可以导出。/  

/比如：基本类型变量、函数、数组、对象。/

/export输出/
var name = "jack". var age = 21
export {name,age}

/导入前面导出的name和age /
import {name, age} from 'user.js'
console.log(name + " , 今年"+ age +"岁了")

import

/无需声明对象的名字/
export default {
    sum(a,b){
        return a + b;
    }
}

/导入util/
import util from 'hello.js'
/调用util中的属性/
util.sum(1,2)

set和map

ES6 还有哪些对象？ （proxy 和 reflect ）

【参考】https://www.jianshu.com/p/9e07f182859b

symbol 类型有什么特点 ？ 与 Number, String 有什么不同？

symbol 类型的唯一性怎么理解 ？

set， map怎么理解？

从 set 转成 一个数组怎么做 ？

set 元素的特点 ？

两个 NaN 恒等的吗？为什么？

两个 symbol 类型的值是一样的，这两个 symbol 相等吗？

promise 的 then 为什么是 异步的 ？（从 微任务 和 宏任务 解释 ）

DOM 的 api 分为几级？

常用的 dom 的 操作方法？

事件捕获和事件冒泡 怎么理解 ？

怎么阻止 事件的冒泡 ？

项目中用到了什么样式？ 使用的 css 还是 less ？

对 css 动画有了解吗？ 序列帧 怎么定义 ？

样式里的 清除浮动 怎么设置 ？ 为什么这样设置？

浏览器缓存有哪几种 ？

html5 新特性有哪些了解

localstorage 和 cookie 的区别

1 localStorage拓展了cookie的4K限制 5M
2 localStorage会可以将第一次请求的数据直接存储到本地，
这个相当于一个5M大小的针对于前端页面的数据库，
相比于cookie可以节约带宽，
但是这个却是只有在高版本的浏览器中才支持的
3 localStorage有setItem、getItem、removeItem、clear等方法，
cookie需要我们自己来封装setCookie、getCookie、removeCookie
4 每次访问都要传送cookie给服务器，浪费带宽。
生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

了解单点登陆吗？

块作用域 你了解吗？

块作用域 和函数作用域的 区别是什么 ？

了解闭包吗？

type 和 interface 的区别是什么？

interface 可以 merge 可以 extends 但是 type 不行

框架面试题： vue & react

vue和react 区别（美团）

mvc 和 mvvm 区别

如何实现双向数据绑定

假设 a 组件（ b 组件，c组件），如何实现 b ，c 组件的通信

生命周期：
vue ：
react：

react 里面的高阶组件怎么理解？

有过高阶组件的使用场景马？

redux 使用connect 包裹出来的不是高阶组件吗？

reactHooks 了解哪些？

讲讲 redux 是用来做什么的？

用户发出action， 然后 store 自动电用 reducer，并且传入两个参数： 当前 state 和 收到的 action， reducer 会返回新的 state， state 一旦有变化， store 就会 调用监听函数， listener 可以通过 sotre.setstate（） 得到当前状态，如果 使用的是 react ，这是可以 触发重新渲染 view

网络 （美团）

计算机网络七层 是 哪七层 ，七层分别的作用是啥

应用层、表示层、会话层、传输层、网络层、数据链路层、物理层

应用层 :

表示层:

会话层:

传输层:

网络层:

数据链路层:

物理层:

http，tcp 的作用是啥

tcp 和 udp 的区别，什么适合用udp

浏览器访问页面的过程

什么是跨域，如何解决， jsonp ，cors， jsonp 原理

算法 & 编程 （美团）

**数据结构学了哪些 ？

**了解哪些排序悬法？ 时间空间复杂度， 以及稳定性？

**写一个队列

**二叉树的最大深度？

实现一个 bind

笔试： js实现反转字符串 （拼多多）