阿里淘宝前端vue技术部远程面试题总结一

前言：本人大三，这是我的第一次工作面试，加上我一直是那种话能不多就不多的性格，所以从昨天晚上接到预约面试电话后到今晚的电话面试开始前， 26个小时都紧张地不得了，后来发现，一切担心和紧张来自于知识的不够扎实，如果有足够的经验和技术，那就是小菜一碟。
好了，废话不多说，接下来就剖出电话面试问到的题目及解析。

1.自我介绍

分为了三部分
1.您好，我是xxx，目前就读于xxx。
2.如何接触到前端，如何学习前端，学习了点什么。
3.有哪些项目经历。项目的总体架构、用到的技术、实现的功能等。因为接触的比较晚，自己的项目经历比较少，所以就讲了一个服务外包的比赛经验。

2.外包团队技术栈的分配

这个参加过的都知道，一般是一个后台、一个移动端、一个UI设计师、有小程序的话还会有小程序

3.庞大数据的描述以及技术手段

这是面试官根据简历上的项目描述来问的，随意一写，没想到问了(+_+)?。同志们，写简历一定要极度小心啊。关于庞大数据，具体多大算大也不太清楚，但是想到了那些几百万千万用户的数据存储，一下就有种班门弄斧的感觉，吓得我感觉重写了简历。
因为那些数据是组件共享的，主要技术手段就是vuex，vuex的四个核心概念，围绕下图展开。

4.如何做到共享

介绍了一个关于实时订单接收的过程。

5.使用vuex遇到过什么问题，什么方法解决的

6. …语法

扩展运算符spread，在mapState中的作用：
首先要搞清mapState的作用，mapState的返回值是一个对象，对象里有方法，用来获取state的数据属性，computed接受这个返回值。

computed:{
  a(){
    return this.b + this.c
  },
  mapState({
    xxx(){
      return this.$store.state['xxx']
    }
  })
}
  // 如果光像上面这么写，computed变成了：
  // computed:{
  //   a(){return this.b + this.c},
  //   {
  //     xxx(){return this.$store.state['xxx']}
  //   }
  // }
  // 这样是不行的，因为xxx不是computed的直接子属性，不引入扩展运算符...的话，只能像下面这么写
computed:mapState({
  // 1.先把原来的复制进来
   a(){
    return this.b + this.c
  },
  // 2. 引入需要的state数据对象
  xxx(){
    return this.$store.state['xxx']
  }
})

每次这样写都会很麻烦， 这时候扩展运算符...万丈光芒地走来了，它的作用就是将当前对象中的属性融入到外部对象中

var asMapState = {x: 1, y: 2}
var asComputed = {q: 6, w: 7, ...asMapState}
// asComputed:{q: 6, w: 7, x: 1, y: 2}

7.箭头函数和它的this

箭头函数()=>{}是s6新增函数，用箭头简化了之前普通函数的写法，属于匿名函数且无法作为构造函数调用，它和普通函数最明显的区别就是this指向。
普通函数：
（1）this可理解为函数的调用者；
（2）如果没有调用者，this指向window或undefined（严格模式下，‘use strict’）；
（3）使用call、apply或bind调用时，this指向第一个绑定的对象。
箭头函数：
（1）没有prototype原型，所以它本身没有this；
（2）当箭头函数属于一个函数内部的时候，它的this指向与外部函数的this一致；
（3）当箭头函数运行环境是全局作用域时，this指向window或undefined（严格模式下，‘use strict’）；
（4）使用call、apply调用时，第一个对象参数失效。

8.js中== 和===的区别

==相等操作符，表示相等；===，全等操作符，表示严格相等
A==B：先检查A和B的数据类型
（1）如果相同则直接比较值；
（2）不相同就进行类型转换：
a.字符串和数值比较，把字符串转换成数值再比较
b.有一个是布尔值，先把布尔值转为数值，false是0，true是1
c.有一个 是对象，调用对象的valueOf()方法，得到对象的原始值
总而言之，A和B最终都会转化为数值型进行比较，本质上就是0、1、NaN的比较。
A===B如果数据类型不相等，则直接返回false
特殊情况：

// 1. 特殊处理，null和undefined不进行类型转换
console.log(null == 0 )// false
console.log(undefined == null )// true, 可以认为都表示一个无效值
console.log(undefined === null )//false 

// 2. NaN和任何值比较都是false，包括它自己
// 只要有字母或者undefined，就返回false
console.log(NaN == NaN )// false
console.log(NaN === NaN )// false

典型问题：

console.log("true" == true) // false，原因如下
console.log("true" == 1 )// false
console.log(Number("true")) // NaN
console.log(NaN == 1 )// false

9.const let var区别

let是es6新增语法
（1）定义类型：const定义的变量属于常量，必须在定义时初始化，无法修改；let和var定义的是变量
（2）作用域：const和let都只在声明的块级作用域内有效；var在声明的函数内部有效
（3）可重复性：用lconst和et声明的变量只允许声明一次，不可重复；var可重复声明和赋值
（4）变量提升：指变量会在所有代码执行前被声明，但不会被赋值。var有变量提升现象，不报错而是返回undefined；let和const声明的变量提前使用则会报错，这也使let和const拥有了暂时性死区；

【暂时性死区TDZ：指只要块级作用域内存在let或const命令，它所声明的变量就“绑定”这个区域，且只能在声明后使用，生命前使用的语句都属于死区，会报错。】
更多例子请进

for (var i = 0; i < 10; i++) {
  setTimeout(()=>{
    console.log(i)
  },1000)
}
// 结果：10个10

for (let i = 0; i < 10; i++) {
  setTimeout(()=>{
    console.log(i)
  },1000)
}
// 结果：1秒后输出：0，1，2，3，4，5，6，7，8，9；
// 原因：当for循环条件体的初始条件为let或const定义时，每次循环都会产生一个新的变量，这个变量的作用域是当前循环的块级作用域

10.es6新语法

11.promise特性、resolve和reject

12.position的值及解释

13.在学习过程中扩展其他知识

14.学习策略

后面还问了很多开放题，基本上是有关学习的，比如如果去了他们部门实习会怎样学习啊，有没有什么方向之类的，回答这种问题，一定要展现出自己明确的目标和热爱，最后结束的时候面试官一般都会说有什么想问他的问题吗，我当时就把之前没回答上来的一题问了，现在想想挺傻的，这种应该是面试结束后自己去找答案比较合理。后来想了很久，感觉比较好的应该是 想学习xxx，该如何去学这种表示自己热爱学习的问题。整个过程快一个小时，关键是面试小哥哥的声音好好听啊，回答不上来的问题会说没关系~~~~我…去复习了（老母亲式叹气~）