美团面试总结

HTML5中的一些新标签？

关于HTML5可能我用到的还是相对比较少，所以我就说了一些我常用的新标签：header，footer，audio，video，nav，关于这些，可以参考这里

块元素和内联元素的区别

块元素：独占一行，可以设置width，height属性，可以设置margin和padding

内联元素：不会独占一行，设置width和height无效，水平方向上的margin和padding有效

块元素包括：address、blockquote、center、dir、div、form、h1-h6、hr、ol、ul、table、header、footer、nav等

内联元素包括：a、img、span、em、i、input、select、sup、sub、button

当然元素我也只是说了一部分，然后我说，通过改变display属性可以进行改变，所以就有下面的问题了

display：inline-block存在间隙，如何解决

以ul中li的为例：

方法一：ul {font-size:0} ul li {font-size: 1.2rem}
方法二：将li的开始与结束标签不写在同一行

方法三：li不闭合

方法四：设置负边距 ul li+li{margin-left:-3px}

响应式的实例

关于响应式这边，单位用em或者rem，媒体查询，响应式图片picture的使用

flex布局

Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”

flex 父元素宽度为200，子元素宽度分别为30，40，50，呈现一个怎样的情况？当时我被问到的是这个题目，现在想了一下，当时的我没有将题目听清楚，当时所说到的flex1，flex2，flex3应该就是类选择器（被自己蠢到了，当时误以为是flex : 1），虽然说flex我确实用的也少，但是当时我想的是我没这样用过的呀，然后就猜着回答了，教训就是题目没听清的时候，不要瞎猜

下面的都是我自己的尝试：

只是给三个子div设置position:flex; 30是在父元素中的，40，50在父标签的下一行点此查看效果

在上面的基础上，给子标签添加display:inline-block属性，点此查看效果

JS中的数据类型？

基本类型和复杂类型：

基本类型：Undefined, Null, Boolean, String, Number

复杂类型：数组，对象，函数

事件委托是什么？事件冒泡？为什么要使用事件委托？什么情况下阻止事件冒泡？

事件委托避免了为多个元素添加同一事件监听，而是将这种事件的监听放在父元素上，这个我当时说的时候是以ul与li为例的。事件委托的好处：减少了事件的注册，节省内存；简化了dom节点更新时，相应事件的更新

事件冒泡就是，当事件触发时，会一层一层向上冒，直到顶层

阻止冒泡：父级元素和子元素都有事件的时候，需要阻止向上冒泡

给了一段代码，让我说运行结果，三种情况下的？

var a = 1;

function func () {
  var a = 2;
  return function () {
    console.log(a);  
  }
}

console.log(func());
console.log(func()());  

执行func()的时候，会返回一个函数，再执行的时候，会输出a的值，在返回的这个函数中产生了闭包，它保持着对a的引用，所以是2

function () {

​ console.log(a);

}

2

var a = 1;

function func () {
  var a = 2;
  return function () {
    console.log(this.a); 
  }
}
func()();

执行返回的这个函数的时候，this指代的是window，所以是1

1

var a = 1;

function func () {
  var a = 2;
  return function () {
    console.log(this.a); 
    console.log(a);
  }
}

var obj = {a: 3};
func().call(obj);   

利用call改变了this的指向，所以输出的是obj中的a为3， 第二个是因为闭包，所以输出的是2

3 2

将一个数组的第四个元素放在第一个和第二个元素之间，splice返回值是什么？

var ary = [12, 34, 45, 56, 67];
var n = ary.splice(3, 1);
ary.splice(1, 0, n.pop());
console.log(ary);  // [12, 56, 34, 45, 67]

splice返回值是一个数组，写代码这种事情，就是先有思路，再动手，写一步，就要确保这一步的结果是你想要的，不要一下写了一大串，错了好多

深克隆与浅克隆原理讲解，代码？

浅克隆就是对于对象，只是引用，而没有真正做到“克隆”，深克隆就需要保证原来有的东西，现在新产生的就得有

Object.prototype.clone = function() {
  var newObj = {};
  for(var item in this) {
    newObj[item] = this[item];
  }
  return newObj;
}

浅克隆做到的就是引用

Object.prototype.clone = function() {
  var newObj = {};
  for(var item in this) {
    if(typeof this[item] == 'object' || typeof this[item] == 'function') {
      newObj[item] = this[item].clone(); 
    }else {
      newObj[item] = this[item];
    }
  }
  return newObj;
}

Array.prototype.clone = function() {
  var newObj = [];
  for(var item = 0; item < this.length; item++) {
    if(typeof this[item] == 'object' || typeof this[item] == 'function') {
      newObj[item] = this[item].clone();
    }else {
      newObj[item] = this[item];
    }
  }
  return newObj;
}

Function.prototype.clone = function() {
  var that = this;
  var newFunction = function() {
    return that.call(this, arguments);
  }
  for(var item in this) {
    newFunction[item] = this[item];
  }
  return newFunction;
}

上面的是我之前写过的，面试官让我实现的是一个函数，完成深克隆，而且要求我不给原型上加，并且也可以对简单类型进行处理，代码如下：

function clone(obj) {
  if(Array.isArray(obj)) {
    var ary = [];
    for(var i = 0; i < obj.length; i++) {
      if(typeof obj[i] == 'object' || typeof obj[i] == 'function') {
        ary.push(clone(obj[i]));
      }else {
        ary.push(obj[i]);
      }
    }

    return ary;

  }else if(typeof obj == 'object') {
    var o = {};

    for(var item in obj) {
      if(typeof obj[item] == 'object' || typeof obj[item] == 'function') {
        o[item] = clone(obj[item]);
      }else {
        o[item] = obj[item];
      }
    }

    return o;
  }else if(typeof obj == 'function') {
    var fun = new Function();

    for(var item in obj) {
      if(typeof obj[item] == 'object') {
        fun[item] = clone(obj[item]);
      }else {
        fun[item] = obj[item];
      }
    }

    return fun;
  }else {
    return obj;
  }
}

测试代码：

console.log(clone(12));

var obj = {
name : 'obj',
likes : ['js'],
display : function() {
console.log(this.name); 
}
};

var newObj = clone(obj);
newObj.likes.push('css');
console.log(newObj.likes);
console.log(newObj.display == obj.display); 

面试官问了我关于function的处理，这样处理我是考虑到了原型对象

ES6我都了解什么？

箭头函数，promise，这两个应该算我比较熟悉的吧，一个是学Vue常用的，一个是我专门看过的Promise，其他的不敢说自己知道多少，只能说是听说

箭头函数和普通函数的区别

区别就关键在于this指的是什么，普通函数而言，谁调用的，this就指向谁，this可以看作是一个动态作用域的东西，而箭头函数中的this跟定义它的有关系，也就是词法作用域层次的

promise，多层then形成一个链，为什么可以多次调用then，then函数里的两个函数是什么，包含return语句的resolve函数返回的是什么，如果return的是Promise对象呢？

因为每次调用then之后，都会返回一个新的Promise对象，then函数里面的两个函数是resolve和reject，包含return语句的resolve函数返回的是一个把返回的东西包装成的一个Promise对象，这个对象中的[[promiseValue]]指的就是返回的东西，return的是promise对象的话，我想，返回的依旧是一个promise对象，这个对象的[[promiseValue]]就是return的promise对象

跨域问题的解决办法？jsonp服务器端返回的是什么？

首先跨域，协议不同，域名不同，端口不同，满足其一就是跨域，解决跨域的方法有，jsonp，jsonp服务器端返回的是什么？当时我答成了数据，面试官告诉我，返回的是其实是一个函数，后来想来一下是的，返回的就是js代码，调用你回调函数的js代码。之后面试官又问了我还有哪些，我就说了一下domain这个东西，其他的了解的不多，点击这里查看更多

http请求头有哪几种？

这个问题我当时只是回答了一下，请求头里面的字段，Cookie，Host等，之后查了一下，与content-type有关系，参考这里

使用过cookie吗？在前端操作的还是在后台操作的？

使用cookie之前存储过用户账号，在前端操作的，后台也是可以操作cookie的，cookie每次都会随着请求发送给后台

模块化了解吗？优点和弊端？

require进行引用其他模块，模块化是一种将系统分离成独立功能部分的方法，可将系统分割成独立的功能部分，严格定义模块接口、模块间具有透明性

优点：可维护性和可测试性

1）可维护性

• 灵活架构，焦点分离
• 方便模块间组合、分解
• 方便单个模块功能调试、升级
• 多人协作互不干扰

2）可测试性 可进行单元测试

缺点：性能损耗

• 系统分层，调用链会很长
• 模块间通信,模块间发送消息会很耗性能

当时忘记说，在使用vue-cli的时候，已经使用了import和export

前端怎样优化？

减少DOM操作，减少HTTP请求（雪碧图），对代码进行压缩，CDN服务，算法的优化，语义化（高效使用HTML标签和CSS样式）

使用过哪些编辑器？sublime我都装过哪些插件？

sublime，HBuilder，webStorm，sublime安装的插件名字还真是有些忘记，Emmet、JSFormat、jQuery、Nodejs

这场面试持续了一个多小时，感觉问的还是很全面的，面试官还说了我代码写的不错，嘻嘻，开心，继续努力吧，后面因为时间的原因，没有办法…，但是还是很谢谢面试官，努力啦…