知识点总结

套路

1. 举例
2. 将不会的变成会的
3. 侃侃而谈

HTML面试

1. （必考）你是如何理解HTML语义化的？
   • 举例：段落用p,边栏用aside，主要内容用main标签
   • 最开始是 PHP 后端写 HTML，不会 CSS，于是就用 table 来布局。table 使用展示表格的。严重违反了 HTML 语义化。后来有了专门的写 CSS 的前端，他们会使用 DIV + CSS 布局，主要是用 float 和绝对定位布局。稍微符合了 HTML 语义化。再后来，前端专业化，知道 HTML 的各个标签的用法，于是会使用恰当的标签来展示内容，而不是傻傻的全用 div，会尽量使用 h1、ul、p、main、header 等标签。语义化的好处是已读、有利于SEO等。
   • 对面试官请看我的博客 https://zhuanlan.zhihu.com/p/32570423
2. meta viewport 是做什么的，怎么写？
   • 代码：
   • 控制页面在移动端不要缩小显示。
   • 侃侃而谈：
     一开始，所有页面都是给PC准备的，乔布斯推出 iPhone 3GS，页面是不适应手机屏幕的，所以乔布斯的工程师想了一个办法，默认把手机模拟成 980px，页面缩小。后来，智能手机普及，这个功能在部分网站不需要了，所以我们就用 meta:vp 让手机不要缩小我的网页。
3. canvas元素是干什么的？
   • 项目：小小画板
   • 记住一些基本的API，查看MDN入门手册。

CSS面试

1. （必考）盒模型
   • 举例：
     conten-box：width == 内容区宽度
     border-box：width == 内容区宽度 + padding 宽度 + border 宽度
2. css reset和normalize.css有什么区别？
   • 考英文：
     • reset重置，之前的样式我不要，a{color:red;}，抛弃默认样式
     • normalize让所有的浏览器的标签都跟标准规定的默认样式一致，个浏览器上的标签默认样式基本统一。
3. (必考)如何居中？
   • 平时总结：
     • 水平居中：
       • 内联：父元素上写text-align:center;
       • 块级：margin-left:auto;margin-right:auto;
     • 垂直居中：七种方式实现垂直居中
4. 选择器优先级如何确定？
   1. 选择器越具体，优先级越高。#xxx大于.yyy
   2. 同样优先级，写在后面的覆盖前面的。
   3. color:red !important;优先级最高
5. BFC是什么？
   • 举例
     • overflow:hidden 清除浮动。（一般常用.clearfix清楚浮动，不用overflow:hidden;）
     • overflow:hidden 取消父子合并。http://jsbin.com/conulod/1/edit?html,css,js,output （解决：给一个padding-top:1px;）
6. 如何清除浮动？
   1. overflow:hidden;（不建议使用）
   2. .clearfix 清楚浮动写在父元素上

      .clearfix::after{
          content:'';
          display:block;
          clear:both;
      }
      .clearfix{
          zoom:1;/*兼容IE*/
      }
      

JS面试

1. JS有哪些基本数据类型？
   string、number、boolean、null、undefined、symbol、object
   object包含了数组、函数、正则、日期等对象

2. (必考)Promise怎么使用？

   1. then
      $.ajax(...).then(成功函数,失败函数)
   2. 链式then
      $.ajax(...).then(成功函数，失败函数).then(成功函数，失败函数)
   3. 如何自己生成Promise对象

      function xxx(){
          return new Promise(function(resolve,reject){
              setTimeout(()=>{
                  resolve()或者reject()
              },3000)
          })
      }
      xxx().then(...)
      

3. （必考）AJAX手写一下？

   let xhr = new XMLHttpRequest();
   
   xhr.open('POST','/xxx')
   
   xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
          if(xhr.status === 200){
              console.log(xhr.response);
          } else {
              console.log(xhr.status)
          }
      }
   };
   
   xhr.onerror = function(){
      console.error(xhr.status)
   };
   
   xhr.send(null);
   

4. （必考）闭包是什么？

   function(){
      var n = 0;
      return function(){
          n += 1
      }
   }
   
   let adder = ()
   adder()// n === 1
   adder()// n === 2
   console.log(n)// n is not defined
   

   参考：https://zhuanlan.zhihu.com/p/22486908

5. （必考）这段代码里的this是什么？

   1. fn()里面的this就是window
   2. fn()是stric mode，this就是undefined
   3. a.b.c.fn()里面的this就是a.b.c
   4. new F()里面的this就是新生成的实例
   5. ()=>console.log(this)里面的this跟外面的this的值一模一样

   参考：https://zhuanlan.zhihu.com/p/23804247

6. （必考）什么是立即执行函数？使用立即执行函数的目的是什么？

   ;(function(){
       var name
   }())
   
   ;(function(){
       var name
   })()
   
   ~function(){
       var name
   }()
   

   造出一个作用域，防止污染全局变量
   ES6：

   {
       let name
   }
   

7. async/await 语法了解吗？目的是什么？

   function reutrnPromise(){
       reutrn new Promise( function(resolve,reject){
           setTimeout(()=>{
               resolve('fuck')
           },3000)
       })
   }
   returnPromise().then((result)=>{
       result === 'fuck'
   })
   
   var result = await reuturnPromise()
   result === 'fuck'
   

   主要目的：将异步代码写成同步代码。

8. 如何实现深拷贝？

   1. JSON来深拷贝

      var a = {...}
      var b = JSON.parse(JSON.stringify(a))
      

      缺点：JSON不支持函数、引用、undefined、RegExp、Date......
   2. 递归拷贝

      function clone(object){
          var object2
          if(! (object instanceof Object) ){
              return object
          }else if(object instanceof Array){
              object2 = []
          }else if(object instanceof Function){
              object2 = eval(object.toString())
          }else if(object instanceof Object){
              object2 = {}
          }
          你也可以把 Array Function Object 都当做 Object 来看待，参考 https://juejin.im/post/587dab348d6d810058d87a0a
          for(let key in object){
          object2[key] = clone(object[key])
          }
          return object2
      }
      

   3. 环

9. 如何实现数组去重？

   1. 计数排序的逻辑（只能正整数）

      var a = [4,2,5,6,3,4,5]
      var hashTab = {}
      for(let i=0; i

   2. Set去重
      Array.from(new Set(a))
   3. WeakMap 任意类型去重

10. 如何用正则实现string.trim()?

    function trim(string){
        return string.replace(/^\s+|\s+$/g, '')
    }
    

11. JS原型是什么？

    • 举例
      a. var a = [1,2,3]
      b. 只有0、1、2、length 4个key
      c. 为什么可以a.push(4),push是哪里来的？
      d. a.proto === Array.prototype
      e. push 就是沿着 a.prototype找到的，也就是Array.prototype.push
      f. Array.prototype还有很多方法，如join、pop、slice、splice
      g. Array.prototype 就是a的原型(proto)
      参考：https://zhuanlan.zhihu.com/p/23090041

12. ES6中的class了解吗？

    • 把MND class章节看完
    • 记住一个例子

13. JS如何实现继承

    • 原型链

      function Animal(){
          this.body = '肉体'
      }
      Animal.prototype.move = function(){
      
      }
      
      function Human(name){
          Animal.apply(this, arguments)
          this.name = name
      }
      // Human.prototype.__proto__ = Animal.prototype // 非法
      
      var f = function(){}
      f.prototype = Animal.prototype
      Human.prototype = new f()
      
      Human.prototype.useTools = function(){}
      
      var frank = new Human()
      

    • extends关键字

      class Animal{
          constructor(){
              this.body = '肉体'
      },
          move(){}
      }
      class Human extends Animal{
          constructor(name){
              super()
              this.name = name
          },
          useTools(){}
      }
      var frank = new Human()
      

DOM面试

1. DOM事件模型是什么？
   1. 冒泡
   2. 捕获
   3. 如果这个元素是被点击的元素，那么捕获不一定在冒泡之前，顺序室友监听顺序决定的。
2. 移动段的触摸事件了解吗？
   1. touchstart、touchmove、touchend、touchcancel
   2. 模拟swipe事件：记录两次touchmove的位置差，如果最后一次在前一次的右边，说明右滑了。
3. 事件委托是什么？有什么好处？
   1. 假设父元素有4个儿子，我不监听4个儿子，而是监听父元素，看触发事件的元素是哪个儿子，这就是事件委托。
   2. 可以监听还没有出生的儿子（动态生成的元素）。省监听器。

      function listen(element, eventType, selector, fn){
      element.addEventListener(eventType, e=>{
          if(e.target.matches(selector)){
              fn.call(el, e, el)
          }
      })
      }// 有 bug 但是可以应付面试官的事件委托
      function listen(element, eventType, selector, fn) {
      element.addEventListener(eventType, e => {
          let el = e.target
          while (!el.matches(selector)) {
              if (element === el) {
                  el = null
                  break
              }
              el = el.parentNode
          }
          el && fn.call(el, e, el)
      })
      return element
      } // 工资 12k+ 的前端写的事件委托
      listen(ul, 'click', 'li', ()=>{})
      
      ul>li*5>span
      

HTTP面试

1. HTTP 状态码知道哪些？
2. 301 和 302 的区别是什么？
   1. 301 永久重定向，浏览器会记住
   2. 302 临时重定向
3. HTTP 缓存怎么做？
   1. Cache-Control: max-age=300
   2. http://cdn.com/1.js?v=1 避开缓存
4. Cache-Control 和 Etag 的区别是什么？
5. Cookie 是什么？Session 是什么？
   • Cookie
     • HTTP响应通过 Set-Cookie 设置 Cookie
     • 浏览器访问指定域名是必须带上 Cookie 作为 Request Header
     • Cookie 一般用来记录用户信息
   • Session
     • Session 是服务器端的内存（数据）
     • Session 一般通过在 Cookie 里记录 SessionID 实现
     • SessionID 一般是随机数
6. LocalStorage 和 Cookie 的区别是什么？
   • Cookie 会随请求被发到服务器上，而 LocalStorage 不会
   • Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右
7. （必考）GET 和 POST 的区别是什么？
   1. 参数。GET 的参数放在 url 的查询参数里，POST 的参数（数据）放在请求消息体里。
   2. 安全（扯淡）。GET 没有 POST 安全（都不安全）
   3. GET 的参数（url查询参数）有长度限制，一般是 1024 个字符。POST 的参数（数据）没有长度限制（扯淡，4~10Mb 限制）
   4. 包。GET 请求只需要发一个包，POST 请求需要发两个以上包（因为 POST 有消息体）（扯淡，GET 也可以用消息体）
      5.GET 用来读数据，POST 用来写数据，POST 不幂等（幂等的意思就是不管发多少次请求，结果都一样。）
8. （必考）怎么跨域？JSONP 是什么？CORS 是什么？postMessage 是什么？
   1. JSONP
      2.CORS
      3.postMessage 看一下 MDN

vue面试

1. （必考）Vue 有哪些生命周期钩子函数？
   • 看文档：生命周期
2. （必考）Vue 如何实现组件通信？
   1. 父子通信（使用 Prop 传递数据、使用 v-on 绑定自定义事件）
   2. 爷孙通信（通过两对父子通信，爷爸之间父子通信，爸儿之间父子通信）
   3. 兄弟通信（new Vue() 作为 eventBus）
3. Vuex 的作用是什么？
   • 看文档、博客 https://vuex.vuejs.org/zh-cn/intro.html
4. VueRouter 路由是什么？
   • 看文档、博客
5. Vue 的双向绑定是如何实现的？有什么缺点？
   • 看文档，深入响应式原理
6. Computed 计算属性的用法？跟 Methods 的区别。
   • https://zhuanlan.zhihu.com/p/33778594

算法面试

1. 排序算法（背诵冒泡排序、选择排序、计数排序、快速排序、插入排序、归并排序）
2. 二分查找法
3. 翻转二叉树