携程 地面业务 前端面试经历

先说下背景吧，本人工作经验两年，在一家携程注资的OTA公司工作，所以用的空号，防止被同事认出来。。。看了电视上的凌空SOHO大厦，确实很壮观，就萌生了去上海看看的想法

所以我就投了简历，很快，中午投递出去，下午就接到了HR的电话，约了今天面试，上海下着大雨，真的是大都市，走在路上，感觉自己真的很渺小。

到了携程大楼，先是HR给了张表，填了一堆，画了个树，我无耻的画了一张前端图谱，不过后来发现也没人看这东西。

笔试

首先上来，是40分钟的笔试。

题目一

说真的，是出于紧张呢还是咋地，我真就愣生生没看出来，我还在想，返回都是数组， 是不是哪个打出来的是个标签，然后不能继续使用它下面的方法了呢。。。卒。
实际上真的就是b多加了一个[]，造成了一个二维数组，tagName本来就返回一个数组啊

题目二 - 数组去重

请手打一个数组去重的方法，题目是[1,2,3,2].distinct() = [1,2,3]。
这里我用了hash的方法去的重

    Array.prototype.distinct = Array.prototype.distinct || function(){
                var len = this.length,
                      i = 0,
                      hash = {},
                      myArr = [];
            for(; i < len; i ++){
                      if(!hash[this[i]]){
                          hash[this[i]] = true;
                          myArr.push(this[i])
                      }
            }
        return myArr;
    }

后来面试的时候，面试官说我这 方法不好，用不着hash，我不知道他是不是想说indexOf,但是他也没告诉我具体的方案- -

题目三，考察闭包

        function mo(){
            var x = 0;
            return function(){
                console.log(++x)
            }
        }
        var a = mo();
        var b = mo();
        a();
        a();
        b();

答案是1，2，1。这个没啥a再次执行的时候没有走mo()函数，直接走的内部函数，保存了外层的x变量给自己用。

题目四

        var p = [];
        var A = new Function();
        A.prototype = p;
        var a = new A;
        a.push(1);
        console.log(a.length);
        console.log(p.length);

这题我写的undefined,0。回家输出发现是1，0。不理解的是a在new 完后真的就给了一个Array 对象。具体还要去研究一下
更新此题，当我看明白了之后，我只能佩服出题人啊，先来逐句解析。

• 本题考查了一个重要的知识点，那就是new操作符具体干了什么
  其实我是知道的，但是仅仅是知道，真的看到了，却又没仔细去想，一个简单的new的过程就是var obj = {};obj._proto_ = A.prototype;A.apply(obj);，明白的瞬间就明白了，a new 出来后就不是一个对象了，是数组对象了，所以拥有了push方法，没有报错，顺便一提的是new 如果在继承对象是没有参数的情况下，是可以不加后面的括号的，编译器会自动替你加上的

题目五，数组降维

想到这题，我写了一个自以为不错的解法，结果基本功不熟练，没反应过来join()会自动添加逗号，其实不是没反应过来，还是平时依赖控制台次数多了。。。控制台看到了问题会立马改，纸上就不是这样了。

  ```
      function fn(arr){
            return  Array.from(arr.join());
      }
  ```

23333333,一堆逗号啊掉数组里了。
function fn(arr){ var tempArr = Array.from(arr.join('-')); for(var i = 0;i
这样就可以了，真是后悔莫及，不过我又写了第二种方法,再一次暴露了依赖控制台的毛病，不是不会，不是没思路，就是写错。。。

   function fn(arr){
         var myArr = [];
         var fn2 = function(arr2){
               for(var i = 0;i

上面的'sort' in xx我在浏览器上测试

image.png

image.png

面试

一面面了大概1个小时40分钟的样子，后来有别人预定了会议室，要开会，不然可能还要再面下去。。。
终于有时间更新了，这几天还要驾校重车，还要加班，好累。

没有顺序

• 函数声明和函数表达式有什么区别
  答：如果是使用的函数表达式，那么函数调用就不能在表达式之前，如果是函数声明，由于在全局执行上下文的执行创建阶段时，函数声明会提升到上面，所以是可以在函数声明之前调用函数的。

• 函数声明既然会提升，优先级是什么，和var比呢
  答:函数声明比var高，如果这个时候console.log(a);function a(){};var a=1;，不管var a = 1写在函数前面还是后面，都只会输出函数。因为var a初始化为undefined，遇到同名的会被忽略。

• 函数声明的提升为什么会比var高，编译器干了什么事情
  答：不知道，猜测编译器里定义的时候就是这么定义的吧。 - -

• es6 装饰器用过没，是干什么用的(应该是es7的，反正我也没答出来，答出来肯定还继续深的问)
  答：没用过，不会

• es6中的扩展运算符...的实现原理
  答：我不会，但是我知道扩展运算符的用法，反正都讲出来了。

• es6中的解构中的...和上面的区别
  答：说真的，我也不知道啥区别，不是一样用吗？

• [...org,name] = [1,2,3,4] 这样的话，org里是个啥
  答：开始问的放后面是啥，我想了半天，没敢说，我说难道后面的就没抓到，全被org抓走了？其实不是，直接报错了，...是rest的意思，既然是rest，那就只能放在最后啊

更新说明我还不会用，区别应该是问的es7中的解构。原理就是es6直接采用for of，也就是说，所有总有迭代器的对象都能使用扩展运算符，在es6里说不能放前面的，但是在es7里如果用于对象是可以放前面的。懂了这个，上面几题就都该会了

• for of 和for in区别
  答：for in 是键值对形式，for of 是输出value形式，然后for of只要是配置了迭代器，都能遍历。
• this的指向问题
  答：这个正常的都说了
• 箭头函数中的this
  答：这里说的不好，我只说了用了箭头函数的话，this就被传进来了。就不需要绑定进来了。

箭头函数中的this默认指向在定义它时,它所处的对象,而不是执行时的对象, 定义它的时候,可能环境是window

• 什么是闭包(这里答的不太好，虽然都会用啊处理的,我用类似如下代码举例，貌似面试官并不满意...）

          function aa(){
            var a = 1;
            return function bb(){
                console.log(a);
            }
        }
        aa()()

• 什么是作用域
  答：在进入脚本标签编译阶段的时候就定义了各类作用域，外面的变量就在全局作用域，函数内部的就在函数的作用域里,作用域外的函数不能访问某个作用域里面的东西
• 什么是作用域链
  答：在各级执行上下文创建阶段的时候，就确定了各级作用域，串起来就是作用域链了。比如闭包的时候外部函数出栈之后，内部函数还保留了对外部函数某个变量的引用，就是通过作用域链找过去的
• 什么是原型
  答：prototype，好像我也说不出啥，就举个函数的写原型的例子。
• js有哪些设计模式(我说有工厂模式，构造函数模式，原型模式，面试官说这是面向对象，不过我觉得有啥区别，面向对象编程不久是要用这些设计模式吗)
• 这些模式都是咋写的，我手写给他看
• 为什么要用原型
  答：共享原型里的东西给下属继承的对象，这样在new的时候不用重新创建，节省内存空间
• eval的缺点
  答：我说了用法，就是可执行string，然后缺点没说，没怎么研究，只是看了一眼用法类型的
• with的缺点
  答：没用过，在网上看到过，说不要用，然后我就不用，应该会导致性能问题吧
• 在严格模式下能不能用eval
  答：不能
• es5和es6严格模式的区别
  答：不知道
• 什么是柯里化，举React和Redux的例子
  答：解释了柯里化是啥，举不出来例子，没看过源码啊或者是对react了解的不够多
• 什么是纯函数
  答：不产生任何交互的函数？答的不好，我说reducer应该就是个纯函数，猜对了而已。

纯函数是指 不依赖于且不改变它作用域之外的变量状态 的函数纯函数的概念链接

• 页面和服务器之间的交互有哪几种（ajax,websocket，不满意）
• ajax的Type有几种(我只知道post和get)
  这题我可能没有理解...
• get和post的区别(我说的表象区别，url参数，安全性，大小限制，面试官不是很满意)

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

• HTTP请求头上都有什么信息
  答：UA,HOST,其他的我也没说，就说还有几个没注意..
• 如何统计页面上的按钮被点击了多少次
  答：和服务器交互？反正也只能存服务器啊...
• 单页面应用和多页面应用的区别
  答：一个跳页面是内部的，一个跳页面是href整页刷新的。
• 哪种更容易被SEO到，优化SEO
  答：猜测是多页面，页面多呗...优化的不知道

上两题补充链接

• cookie和localstorage区别(我说大小，安全，有效期，貌似又不是很满意)
• JSON.stringify(大OBJ)的时候会有什么问题
  答：性能损失。
• script标签顺序怎么控制，涉及到依赖必须要有先后
  答：在HTML层就控制顺序呗，显然不是他要的答案
• 除了直接引用script标签，如果不用import require这样的东西，怎么调用其它页面的js
  答：真不知道，a.js里除了用script标签引用b.js
• import和require的区别
  答：import是静态加载，一旦你import，内容就进来了，require是动态加载，用的时候才加载，后面又问了一些，后面就不会了
• 函数节流怎么实现
  答：简单是settimeout,时间超出就执行，没超出再进来的话就直接clear掉。面试官觉得太简单了。
• canvas 绘制原理
  答：不知道
• 如何使用canvas拖动一个小球撞击另外一个小球，然后另外一个小球被撞击出去
  答：canvas一年半没用铁定不记得了(总共也就2年经验)，但是说了一下实现思路
• canvas 里有很多小球时如何优化性能
  答：不知道
• 微信小程序跳转页面最多能跳转多少层 不会
• RN中listview 的key值的实现原理 不会

然后还问了一些关于项目上的问题，以及如何设计一个搜索组件，需要考虑到哪些问题。
应该就这些，没想起来的想起来再补充，感觉答的不好，很多都不记得了。

三分之一的题目 比如实现原理啊，缺点啊，为什么啊，会有什么问题啊，此类问题要么不会，要么答的不好

总共就这么多，我要继续巩固基础了~!!!!!!!