•    html5 新特性有哪些了解？
  •      CSS3新特性
  • 　ES6 新增属性 ？ 
  •    ES6新特性的    const     定义对象能否改变 
  •    let 和var全局定义时候的区别     
  •    js三大事件

 

 

  •    webpack 原理   nodejs

 

  •   css3 中的 canvas 
  •  ajax请求数据拦截器 
  • git常用操作

 

  •     了解闭包吗？

 

 

  •     type 和 interface 的区别是什么？

 

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

 

  • CSS 篇
    link 与 @import 的区别
    link 是 HTML 方式， @import 是CSS方式
    link 最大限度支持并行下载， @import 过多嵌套导致串行下载，出现 FOUC (文档样式短暂失效)
    link 可以通过 rel="alternate stylesheet" 指定候选样式
    浏览器对 link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式
    @import 必须在样式规则之前，可以在css文件中引用其他文件
    总体来说： link 优于 @import ，link优先级也更高
    BFC 有什么用
    创建规则：
    根元素
    浮动元素（ float 不取值为 none ）
    绝对定位元素（ position 取值为 absolute 或 fixed ）
    display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之一的元素
    overflow 不取值为 visible 的元素
    作用
    可以包含浮动元素
    不被浮动元素覆盖
    阻止父子元素的 margin 折叠
    清除浮动的几种方式
    父级 div 定义 height
    结尾处加空 div 标签 clear:both
    父级 div 定义伪类 :after 和 zoom
    父级 div 定义 overflow:hidden
    父级 div 也浮动，需要定义宽度
    结尾处加 br 标签 clear:both
    Css3 新增伪类 - 伪元素
    p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。

    p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。

    p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。

    p:only-child 选择属于其父元素的唯一子元素的每个

    元素。

    p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。

    :enabled 已启用的表单元素。

    :disabled 已禁用的表单元素。

    :checked 单选框或复选框被选中。

    ::before 在元素之前添加内容。

    ::after 在元素之后添加内容,也可以用来做清除浮动。

    ::first-line 添加一行特殊样式到首行。

    ::first-letter 添加一个特殊的样式到文本的首字母。

    伪类语法一个：，它是为了弥补css常规类选择器的不足

    伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

    IE盒子模型 、W3C盒子模型
    W3C盒模型： 内容(content)、填充( padding )、边界( margin )、 边框( border )；
    box-sizing: content-box
    width = content width;
    IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
    box-sizing: border-box
    width = border + padding + content width
    display:inline-block 什么时候不会显示间隙？
    移除空格
    使用 margin 负值
    使用 font-size:0
    letter-spacing
    word-spacing
    行内元素float:left后是否变为块级元素？
    行内元素设置成浮动之后变得更加像是 inline-block （行内块级元素，设置 成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给行内元素设置 padding-top 和 padding-bottom或者 width 、 height 都是有效果的

    如果需要手动写动画，你认为最小时间间隔是多久，为什么？
    多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最小间隔为 1/60*1000ms ＝ 16.7ms

    stylus/sass/less区别
    均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
    Sass 和 LESS 语法较为严谨， LESS 要求一定要使用大括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
    Sass 无全局变量的概念， LESS 和 Stylus 有类似于其它语言的作用域概念
    Sass 是基于 Ruby 语言的，而 LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进行编译；这也是为什么安装Sass的时候有时候会报错，需要安装python脚本
    优点：就不用我多说了，谁用谁知道，真香。

    rgba()和opacity的透明效果有什么不同？
    rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
    而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
    水平居中的方法
    元素为行内元素，设置父元素 text-align:center
    如果元素宽度固定，可以设置左右 margin 为 auto ;
    如果元素为绝对定位，设置父元素 position 为 relative ，元素设left:0;right:0;margin:auto;
    使用 flex-box 布局，指定 justify-content 属性为center
    display 设置为 tabel-ceil
    垂直居中的方法
    将显示方式设置为表格， display:table-cell ,同时设置 vertial-align：middle
    使用 flex 布局，设置为 align-item：center
    绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
    绝对定位中固定高度时设置 top:50%，margin-top 值为高度一半的负值
    文本垂直居中设置 line-height 为 height 值

  •  


                                                          

 

 

 

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交叉轴中点对齐

 

 

清除浮动

  • 父级 div 定义 height
  • 结尾处加空 div 标签 clear:both
  • 父级 div 定义伪类 :after 和 zoom
  • 父级 div 定义 overflow:hidden
  • 父级 div 也浮动，需要定义宽度
  • 结尾处加 br 标签 clear:both

 方法一：使用带clear属性的空元素
 **在浮动元素后使用一个空元素如<div class="clear"></div>
 .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);
  }

 

（美团  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外面的其他无关代码，如果没有被捕获，就会继续向外抛出异常，即中断执行后续所有代码。      **    

```js
如下所示：     
        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），为什么要用它 ？

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);
})

### 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方法来实现,语法：
```javascript

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

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

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


```

## 示例：

 

 

## 模块化

## 模块化就是把代码进行拆分，方便重复利用。类似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 动画有了解吗？  序列帧 怎么定义 ？

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

浏览器缓存有哪几种  ？

 

 

 ### 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除非主动删除数据，否则数据永远不会消失。

 

 ### 了解单点登陆吗？

 ### 块作用域 你了解吗？

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


  

 

 

框架面试题： 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实现反转字符串  （拼多多）

 

更多文章请关注《万象专栏》