美团前端二面高频面试题合集

// call
Function.prototype.call = function (context, ...args) {  context = context || window;
  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  context[fnSymbol](...args);  delete context[fnSymbol];}

// apply
Function.prototype.apply = function (context, argsArr) {  context = context || window;
  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  context[fnSymbol](...argsArr);  delete context[fnSymbol];}

// bind
Function.prototype.bind = function (context, ...args) {  context = context || window;  const fnSymbol = Symbol("fn");  context[fnSymbol] = this;
  return function (..._args) {    args = args.concat(_args);
    context[fnSymbol](...args);    delete context[fnSymbol];     }}

// 版本一：标志实现function throttle(fn, wait){    let flag = true;  // 设置一个标志    return function(...args){        if(!flag) return;        flag = false;        setTimeout(() => {            fn.call(this, ...args);            flag = true;        }, wait);    }}
// 版本二：时间戳实现function throttle(fn, wait) {    let pre = 0;    return function(...args) {        let now = new Date();        if(now - pre < wait) return;        pre = now;        fn.call(this, ...args);    }}

function fun(n, o) {  console.log(o)  return {    fun: function(m){      return fun(m, n);    }  };}var a = fun(0);  a.fun(1);  a.fun(2);  a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1);  c.fun(2);  c.fun(3);

undefined  0  0  0undefined  0  1  2undefined  0  1  1

1.如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式，而不是对象的形式2.如果obj里有RegExp(正则表达式的缩写)、Error对象，则序列化的结果将只得到空对象；3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如 如果obj中的对象是有构造函数生成的， 则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

.square {  width: 10%;  height: 10vw;  background: tomato;}

.square {  width: 20%;  height: 0;  padding-top: 20%;  background: orange;}

.square {  width: 30%;  overflow: hidden;  background: yellow;}.square::after {  content: '';  display: block;  margin-top: 100%;}

function mutiple(...args) {  let result = 1;  for (var val of args) {    result *= val;  }  return result;}mutiple(1, 2, 3, 4) // 24

function mutiple(...args) {  console.log(args)}mutiple(1, 2, 3, 4) // [1, 2, 3, 4]

构造函数是一种特殊的方法，主要用来在创建对象时初始化对象。每个构造函数都有prototype(原型)(箭头函数以及Function.prototype.bind()没有)属性，这个prototype(原型)属性是一个指针，指向一个对象，这个对象的用途是包含特定类型的所有实例共享的属性和方法，即这个原型对象是用来给实例对象共享属性和方法的。每个实例对象的__proto__都指向这个构造函数/类的prototype属性。
面向对象的三大特性：继承/多态/封装
关于new操作符：
1. new执行的函数, 函数内部默认生成了一个对象
2. 函数内部的this默认指向了这个new生成的对象
3. new执行函数生成的这个对象, 是函数的默认返回值
ES5例子：function Person(obj) {    this.name = obj.name    this.age= obj.age}// 原型方法Person.prototype.say = function() {  console.log('你好,', this.name )}// p为实例化对象，new Person()这个操作称为构造函数的实例化let p = new Person({name: '番茄', age: '27'})console.log(p.name, p.age)p.say()
ES6例子：class Person{    constructor(obj) {      this.name = obj.name        this.age= obj.age  }  say() {      console.log(this.name)  }}
let p = new Person({name: 'ES6-番茄', age: '27'})console.log(p.name, p.age)p.say()

第一种： 通过ES6新特性Set()例如： var arr = [1, 2, 3, 1, 2]; var newArr= [...new Set(arr)]

第二种：封装函数利用 {} 和【】function uniqueEasy(arr) {    if(!arr instanceof Array) {        throw Error('当前传入的不是数组')    }    let list = []    let obj = {}    arr.forEach(item => {        if(!obj[item]) {            list.push(item)            obj[item] = true        }    })    return list}

foreach()方法会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值：

当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。闭包作用：局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。

// slice(start,[end])// slice(start,[end])方法：该方法是对数组进行部分截取，该方法返回一个新数组// 参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）。// 包含了源函数从start到 end 所指定的元素，但是不包括end元素，比如a.slice(0,3)；// 如果出现负数就把负数与长度相加后再划分。// slice中的负数的绝对值若大于数组长度就会显示所有数组// 若参数只有一个，并且参数大于length，则为空。// 如果结束位置小于起始位置，则返回空数组// 返回的个数是end-start的个数// 不会改变原数组var arr = [1,2,3,4,5,6]/*console.log(arr.slice(3))//[4,5,6] 从下标为0的到3，截取3之后的数console.log(arr.slice(0,3))//[1,2,3] 从下标为0的地方截取到下标为3之前的数console.log(arr.slice(0,-2))//[1,2,3,4]console.log(arr.slice(-4,4))//[3,4]console.log(arr.slice(-7))//[1,2,3,4,5,6]console.log(arr.slice(-3,-3))// []console.log(arr.slice(8))//[]*/// 个人总结：slice的参数如果是正数就从左往右数，如果是负数的话就从右往左边数，// 截取的数组与数的方向一致，如果是2个参数则截取的是数的交集，没有交集则返回空数组 // ps：slice也可以切割字符串，用法和数组一样，但要注意空格也算字符
// splice(start,deletecount,item)// start：起始位置// deletecount：删除位数// item：替换的item// 返回值为被删除的字符串// 如果有额外的参数，那么item会插入到被移除元素的位置上。// splice:移除，splice方法从array中移除一个或多个数组，并用新的item替换它们。//举一个简单的例子 var a=['a','b','c']; var b=a.splice(1,1,'e','f');  console.log(a) //['a', 'e', 'f', 'c'] console.log(b) //['b']
 var a = [1, 2, 3, 4, 5, 6];//console.log("被删除的为：",a.splice(1, 1, 8, 9)); //被删除的为：2// console.log("a数组元素：",a); //1,8,9,3,4,5,6
// console.log("被删除的为：", a.splice(0, 2)); //被删除的为：1,2// console.log("a数组元素：", a) //3,4,5,6console.log("被删除的为：", a.splice(1, 0, 2, 2)) //插入 第二个数为0，表示删除0个  console.log("a数组元素：", a) //1,2,2,2,3,4,5,6
// split(字符串)// string.split(separator,limit)：split方法把这个string分割成片段来创建一个字符串数组。// 可选参数limit可以限制被分割的片段数量。// separator参数可以是一个字符串或一个正则表达式。// 如果separator是一个空字符，会返回一个单字符的数组，不会改变原数组。var a="0123456";  var b=a.split("",3);  console.log(b);//b=["0","1","2"]// 注意：String.split() 执行的操作与 Array.join 执行的操作是相反的。

有五种，分别是 State、 Getter、Mutation 、Action、 Module1、state => 基本数据(数据源存放地)2、getters => 从基本数据派生出来的数据3、mutations => 提交更改数据的方法，同步4、actions => 像一个装饰器，包裹mutations，使之可以异步。5、modules => 模块化Vuex
1、Vuex中所有的状态更新的唯一途径都是mutation，异步操作通过 Action 来提交 mutation实现，这样可以方便地跟踪每一个状态的变化，从而能够实现一些工具帮助更好地了解我们的应用。2、每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难。

三个方面来说明前端性能优化一： webapck优化与开启gzip压缩    1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译，不转译node_moudules中的js文件    其次在缓存当前转译的js文件，设置loader: 'babel-loader?cacheDirectory=true'    2.文件采用按需加载等等    3.具体的做法非常简单，只需要你在你的 request headers 中加上这么一句：    accept-encoding:gzip    4.图片优化，采用svg图片或者字体图标    5.浏览器缓存机制，它又分为强缓存和协商缓存二：本地存储——从 Cookie 到 Web Storage、IndexedDB    说明一下SessionStorage和localStorage还有cookie的区别和优缺点三：代码优化    1.事件代理    2.事件的节流和防抖    3.页面的回流和重绘    4.EventLoop事件循环机制    5.代码优化等等