拼多多学霸批面试笔记

技术面：

1.vue中父子组件传值，兄弟组件传值  

 父组件向子组件传值：

    1）子组件在props中创建一个属性，用来接收父组件传过来的值；

    2）在父组件中注册子组件；

    3）在子组件标签中添加子组件props中创建的属性；

    4）把需要传给子组件的值赋给该属性

  子组件向父组件传值：

    1）子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；

    2）将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；

    3）在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

 子组件与子组件相互传值：

    第一步：借助中央事件总线：在外部新建一个js文件，取名Bus.js，可放在assets文件夹目录下。

    第二步：两个组件作为子组件被同一个父组件所引用，在同一个页面显示。    

               第三步：两个兄弟组件之间的语法

组件1需要定义一个发送数据的方法，此处sendMsg是定义在此的方法，页面点击时候触发此函数，函数主体，通过Bus中央事件总线用$emit发送一个send事件，事件的功能就是传送一个this.a++的数据，区分sendMsg和send，前者是当前页面的点击事件，后者是发送出去，需要其他组件监听的事件。

组件2在组件2事先定义一个变量，在生命周期为created的时候，通过Bus中央事件总线用$on监听组件1中发送的send事件，用一个带参数的回调函数，接收穿过来的值，参数即为传的值 ，把值赋值给当前组件的变量。

2.vue的生命周期，并说一个你常用的生命钩子

  创建前后/挂载前后/更新前后/销毁前后八个生命钩子，  beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,

beforeDestroy,destroyed。   

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象

created ：数据已经绑定到了对象实例，但是还没有挂载对象

beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 $el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点

mounted:将$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作

beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变

updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新

beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

另外：vue中数据绑定组件的原理

vue将数据绑定到组件的原理如下： 1、当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，而是处理 Vue 组件数据，三是解析挂载组件。

3.ES6的新特性

（1）let和const

    let与var类似是用来声明变量的，const用来声明常量。因为ES5只有全局作用域和函数作用域，没有块级作用域。而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。let不存在变量提升。

    const也用来声明变量，但是声明的是常量，一旦声明，常量的值就不能改变。它和let一样只在声明的区域内有用。

 （2）模板字符串       （反引号）

 （3） 函数     函数默认参数  箭头函数：箭头函数的this指向绑定定义是所在的作用域，而普通函数this指向运行时所在的作用域（全局对象），箭头函数没有自己的this而是引用外层的this。

 （4）解构赋值

 （5）...操作符

 （6）class、 extends、 super     

ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。

class MyClass {
  constructor() {  // 构造函数
    // ...
  }
  get prop() {  // 取值
    return 'getter';
  }
  set prop(value) { // 存值
    console.log('setter: '+value);
  }
}

let inst = new MyClass();
inst.prop = 123;
// setter: 123
console.log(inst.prop);
// 'getter'

extends用法

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。父类的静态方法，也会被子类继承。

注意，super虽然代表了父类Point的构造函数，但是返回的是子类ColorPoint的实例，即super内部的this指的是ColorPoint，因此super()在这里相当于Point.prototype.constructor.call(this)。

super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

    class A {}
    class B extends A {
      m() {
         super(); // 报错
      }
    }

第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

     class A {
           p() {
            return 2;
          }
        }
     class B extends A {
            constructor() {
            super();
            console.log(super.p()); // 2
          }
        }
        let b = new B();

上面代码中，子类B当中的super.p()就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()。这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

  （7）Promise

   在promise之前代码过多的回调或者嵌套，可读性差、耦合度高、扩展性低。通过Promise机制，大大提高了代码可读性；用同步编程的方式来编写异步代码，保存线性的代码逻辑，极大的降低了代码耦合性而提高了程序的可扩展性。

  （8）set   

   实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。下面先介绍四个操作方法。

• 操作方法：
  add(value)：添加某个值，返回Set结构本身。
  delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
  has(value)：返回一个布尔值，表示该值是否为Set的成员。
  clear()：清除所有成员，没有返回值。
• 遍历方法：
  keys()：返回键名的遍历器
  values()：返回键值的遍历器
  entries()：返回键值对的遍历器
  forEach()：使用回调函数遍历每个成员
  由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值）

  （9）import和export

4.ES6中箭头函数的意义

5.生成器函数的yeild*关键字

 （https://www.jianshu.com/p/e7cb84db8989）

6.（由3.promise引出来的题目）js实现异步的方式

  （1）async属性

async是HTML5的新属性，该属性规定一旦脚本可用，则会异步执行（一旦下载完毕就会立刻执行）。
需要注意的是：async属性仅适用于外部脚本（只有在使用src属性时）。

  （2）defer属性

defer属性规定是否对脚本执行进行延迟，直到页面加载为止

区别：   

a.如果没有async和defer属性，那么浏览器会立即执行当前的JS脚本，阻塞后面的脚本；

b.如果有async属性，加载和渲染后续文档的过程和当前JS的加载与执行并行进行（异步），它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行；

c.如果有defer属性，加载后续文档元素的过程和JS的加载是并行进行（异步）的，但是JS的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的

7.（由5 引出来的题目）async()和await()

8.简历上写有对http相关知识熟悉，请简述一下相关的知识

9.304状态码的含义

客户端有缓冲的文件并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

（https://blog.csdn.net/huwei2003/article/details/70139062）

10.http协议头部的信息都有哪些（请求头部和响应头部）？   

http的请求部分

　　基本结构

1.   请求行 GET  /test/hello.html HTTP/1.1
2.   消息头(并不是每一次请求都一样)
3.   空行
4.   内容(内容名字=内容体)

常用消息头(详解http请求消息头)   通过吧英雄！ACCDHIRU

•    Accept:text/html,image/*(告诉服务器，浏览器可以接受文本，网页图片)
•    Accept-Charaset:ISO-8859-1 [接受字符编码：iso-8859-1]
•    Accept-Encoding:gzip,compress[可以接受  gzip,compress压缩后数据]
•    Accept-Language:zh-cn[浏览器支持的语言]   
•    Host:localhost:8080[浏览器要找的主机]
•    IF-MODIFIED-Since:Tue,11Jul 2000 18:23:51[告诉服务器我这缓存中有这个文件,该文件的时间
• 　　　　是...]
•    Referer:http://localhost:8080/test/abc.html[告诉服务器我来自哪里,常用于防止下载，盗链]
•    User-Agent:Nozilla/4.0(Com...)[告诉服务器我的浏览器内核]
•    Cookie：
•    Connection:close/Keep-Alive [保持链接，发完数据后，我不关闭链接]
•    Date:[浏览器发送数据的请求时间] 

请求方式：POST,GET,HEAD,DELETE,PUT,TRACE,
   get提交，传输数据大小是2K左右(仅是IE浏览器)
   post提交，最好在64k不然会影响性能

http响应信息  

   响应头信息   SSCCLLP

1.      location:http://www.baidu.org/index.jsp
2.      server:apache tomcat [告诉浏览器我是tomcat]
3.      Content-Encoding:gzip[告诉浏览器我使用了gzip]
4.      Content-Lenght:80 [告诉浏览器回送的数据大小]
5.      Content-Language:zh-cn[支持中文]
6.      Content-Type:text/html;charset=gb2312[内容格式和编码]
7.      Last-Modified:Tue,11 Juj,2000 18 18:29:20[告诉浏览器该资源上次更新
8. 　　　　　　　时间是多少]
9.      Refresh:1;url=http://www.baidu.com[过多久刷新到哪里去]
10.      Content-Disposition;attachment;filename=aaa.zip[告诉浏览器有文件下载]
11.      Transfer-Encoding:chunked［传输编码］
12.      Set-Cookie:
13.      Expires:-1[告诉浏览器如何缓存页面]
14.      cache-Control:[告诉浏览器如何缓存页面(因为浏览器的兼容性最好设置两个)]
15.      pragma:no-cache
16.      Connection:close/Keep-Alive
17.      Date:Tue,11 Jul 2000 18:23:51     

     (1)有些网站对及时性比较高，我们不缓存页面
        response.setDateHeader("Expires",-1);
        //为了保证兼容性
        response.setHeader("Cache-Control","no-cache")
        response.setHeader("Pragma","no-cache")
     (2)有些网站要求网页缓存一定时间，比如缓存一个小时
        response.setDateHeader("Expires",System.currentimeMillis()*3600*1000*24);
通用信息头
　 Cache-Control:no-cache
    Pragma:no-cache
    Connection:close/Keep-Alive

    Date:时间

11.说一下你理解的cookie

  存储用户信息。第一次登陆的时候服务器会返回一些数据（cookie）给浏览器，然后浏览器将其存储在本地，当该用户发送第二次请求的时候，就会自动的把上一次请求存储的cookie数据自动的携带给服务器，服务器根据这些数据就能判断当前用户是哪个了。

12.场景题：在一个网站登录失败的时候，前端怎么检测出来是哪里出的问题。（解释：当cookie发过去了，并且后台服务器也返回了cookie，在前端怎么查看）     

     Set-Cookie由服务器发送，它包含在响应请求的头部中。它用于在客户端创建一个Cookie

    Cookie头由客户端发送，包含在HTTP请求的头部中。注意，只有cookie的domain和path与请求的URL匹配才会发送这个cookie。

（https://www.jb51.net/article/78031.htm）

13.在响应头中server的内容是什么？

WEB 服务器表明自己是什么软件及版本等信息

14.说一下你认识的SEO

    注意 提高页面的运行速度只是SEO的一个简单应用，而并非SEO本身

15.怎么进行前端性能的优化

  (1)   减少HTTP请求

（2）使用CDN

（3）添加Expires头：页面的初次访问者会进行很多HTTP请求，但是通过使用一个长久的Expires头，可以使这些组件被缓存，下次访问的时候，就可以减少不必要的HTPP请求，从而提高加载速度。

（4）压缩组件

（5）将样式表放在头部

（6）将脚本放在底部

（7）避免CSS表达式

（8）减少DNS查找

  （http://www.cnblogs.com/MarcoHan/p/5295398.html）

16.（由14引出来的问题）使用CDN是怎么优化的；使用外部js和css是怎么回事

17.对哪个框架比较熟悉

18.用jQuery改变背景颜色

  <div class="colordiv">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
-------------------------------
$(document).ready(function(){
$(".colordiv div").css("background-color","#FF0000");
$(".colordiv div").click(function(){
$(".colordiv div").css("background-color","#FF0000");
$(this).css("background-color","#00FF00");
})
})

    出现的问题：jquery的可以简写

19.熟悉哪些Git命令?gitrebase了解过吗？

（1）常用命令

• git init 会生成.git文件
• git remote add origin https://xxxxxxx.git 将本地git关联到远程中央库
• git add 后缀文件名可以指定添加某些文件到暂存区,或者后缀--all/.可以将当前管理文件下的所有改动文件添加
• git commit 提交暂存区内更改,在这之后需要填写提交日志,也可以直接在后面追加-m "[message]"合并操作
• git push origin [branch-name] -f强制推送分支,用于已知的冲突的情况下,一般在公司不建议这样用
• git branch 查看本地仓库,后缀加-a可以查看本地和远程branch
• git branch [branch-name] 创建分支,但是并没有切换到该分支.
• git checkout [branch-name] 切换到指定分支,在checkout后追加-b会创建分支并切换
• git push 将本地推送到远程,如果本地是本地新建的分支需要建立推送关系,追加--set-upstream origin [origin-branch-name]
• git pull将远程拉取到本地
• git merge [branch-name]将指定分支合并到当前分支,如果发生冲突需要先解决相关冲突进行更改
• git merge --abort终止当前merge操作,这样就可以重新进行合并操作 
  上述是正常的操作命令,下面是关于一些关于删除和撤销的命令.  

（2）删除命令

• git branch -d [branch-name] 删除指定分支——-当前操作的branch不能进行删除操作,如果要删除的分支没有向master分支进行合并,那么强制删除是需要将-d更换成-D,这里需要多一句,本身branch就是一个引用,删除的只是引用,并不是真正的删除,Git的自动将回收机制会在一定时间内回收.所以branch是可以恢复的,但是一定要是在Git没有回收之前.
• git push origin :[branch-name] 删除远程分支——-这个并不是真正的删除远程,只是推送了一个空的分支,看着就像删除了一样.主要origin后面一定要有一个空格

（3）撤销命令

• git reset --hard HEAD^撤销最新一次的提交——当然也可以撤销之前很多的次的提交只需要更改HEAD后面的^的个数或者直接HEAD~n(n>=1),reset后面有三个后缀,--hard重置commit,并清空所有操作;
• git rebase -i HEAD~n撤销指定位置的commit——在这之后会弹出对应的操作框,你需要将你将你要撤销的commit整行删除然后保存退出就可以了
• git rebase --onto [目标commit] [起点commit] [终点commit]撤销指定位置的commit—–和上面的效果是一样的,解释下参数,第一个可以理解为你要撤销的前一个,第二个可以理解为你要撤销的那个,第三个一般写当前分支的名字(其实也就是最新的commit)
• git revert HEAD^倒置最新一个commit的所有内容——可用于已经将commit推送的远端的情况.

（4）其他命令

• git checkout XXX+git checkout -b [branch-name]这样就可以恢复指定分支,XXX是通过git reflog找到的sha-1值找你删除前的最后一次操作,一般都是moving from [del-branch-name] to master,这个就要看你找的对不对了.还有一个特殊情况就是log已经被删除了或者引用呗回收那就无力回天了(反正我是不知道怎么恢复,有大佬,请留言).
• git stash+git stash pop这个是一个小技巧吧,就是将当前工作目录的改动藏匿起来.场景就是在你正在写什么东西的时候老板来一句:给我把那个什么给我打个包.呵呵哒!!!然后我们add-commit-checkout-打包-reset-继续写代码,这尴尬了!有了这个就可以stash-checkout-打包-stash pop-继续写代码.reset是有风险的,玩不好就炸了.不要问我为什么!!!

  git rebase：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再把所有提交应用到分支上。

（https://blog.csdn.net/afei__/article/details/51476529）

20.vue中是怎么实现数据通信

21.说一下自己比较熟悉的部分：ajax 

22.研究生都学过什么课程？数据挖掘，算法设计，人工智能和高级人工智能。后来自己对前端比较感兴趣，于是选择了前端。

23.（由21引出来的问题）说说为什么对前端比较感兴趣

24.写一个选择排序吧：

function selectSort(arr){
    var len=arr.length;
    var minIndex,temp;
    console.time('选择排序耗时')；
    for(i=0;i<len-1;i++){
        minIndex=i;
        for(j=i+1;j<len;j++){
            if(arr[j]<arr[minIndex]){
                minIndex=j;
            }
        }
    temp=arr[i];
    arr[i]=arr[minIndex];
    arr[minIndex]=temp;
    }
    console.timeEnd('选择排序耗时');
    return arr;
}

     出现的问题：格式的问题，对于参数一开始的判断类型的问题----instanceof

25.WeX5是什么

非技术面：

1.拼多多的工作强度比较大，你的抗压能力怎么样？

下面的 问题忘记了·······

你有什么问题需要问的嘛？