高级前端面试题目大全(一)

第 1 题:(滴滴、饿了么)写 React / Vue 项目时为什么要在列表组件中写 key,其作用是什么?

1. 更准确
因为带key就不是就地复用了,在sameNode函数 a.key === b.key对比中可以避免就地复用的情况。所以会更加准确。

2. 更快
利用key的唯一性生成map对象来获取对应节点,比遍历方式更快。主要是为了提升diff【同级比较】的效率。自己想一下自己要实现前后列表的diff,如果对列表的每一项增加一个key,即唯一索引,那就可以很清楚的知道两个列表谁少了谁没变。而如果不加key的话,就只能一个个对比了。
vue和react都是采用diff算法来对比新旧虚拟节点,从而更新节点。在vue的diff函数中(建议先了解一下diff算法过程)。 在交叉对比中,当新节点跟旧节点头尾交叉对比没有结果时,会根据新节点的key去对比旧节点数组中的key,从而找到相应旧节点(这里对应的是一个key => index 的map映射)。如果没找到就认为是一个新增节点。而如果没有key,那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射,另一种是遍历查找。相比而言。map映射的速度更快。 vue部分源码如下:

解析:第 1 题

第 2 题:['1', '2', '3'].map(parseInt) what & why ?

首先让我们回顾一下,map函数的第一个参数callback:
var new_array = arr.map(function callback(currentValue[, index[, array]]) { // Return element for new_array }[, thisArg])
这个callback一共可以接收三个参数,其中第一个参数代表当前被处理的元素,而第二个参数代表该元素的索引。

而parseInt则是用来解析字符串的,使字符串成为指定基数的整数。
parseInt(string, radix)
接收两个参数,第一个表示被处理的值(字符串),第二个表示为解析时的基数。

了解这两个函数后,我们可以模拟一下运行情况

parseInt('1', 0) //radix为0时,且string参数不以“0x”和“0”开头时,按照10为基数处理。这个时候返回1
parseInt('2', 1) //基数为1(1进制)表示的数中,最大值小于2,所以无法解析,返回NaN
parseInt('3', 2) //基数为2(2进制)表示的数中,最大值小于3,所以无法解析,返回NaN
map函数返回的是一个数组,所以最后结果为[1, NaN, NaN]

解析:第 2 题

第 3 题:(挖财)什么是防抖和节流?有什么区别?如何实现?

JavaScript专题之跟着underscore学防抖
JavaScript专题之跟着 underscore 学节流

防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间

思路
每次触发事件时都取消之前的延时调用方法

    /* 防抖 */
    function dou(fn, wait) {
        var time = null;
        return function () {
            clearTimeout(time)
            // time = setTimeout(function () {
            //  console.log(this)//window 
            //  fn.apply(this, arguments)//这样的话 this为window和直接 fn()调用是一样的效果,因为他们的this都是window
            // }, wait);
            time = setTimeout(() => {
                // console.log(this)//div
                fn.apply(this, arguments)//确保dou函数的this(上下文还是div)
            }, wait);
        }
    }
    function demo() {
        console.log('防抖啦')
    }
    // 用句柄事件绑定调用dou事件,所以this为div节点对象
    document.querySelector('div').addEventListener('scroll', dou(demo, 1000))

节流
高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率

思路
每次触发事件时都判断当前是否有等待执行的延时函数

    /* 节流 */
    function throttle(func, wait) {
        var previous = 0;
        return function () {
            var now = +new Date();
            if (now - previous > wait) {
                func.apply(this, arguments);
                previous = now;
            }
        }
    }
    function getUserAction() {
        console.log(`每秒1秒内打印一次`)
    }
    document.querySelector('div').addEventListener('click', throttle(getUserAction, 1000))

解析:第 3 题

第 4 题:介绍下 Set、Map、WeakSet 和 WeakMap 的区别?

Set
成员唯一、无序且不重复
[value, value],键值与键名是一致的(或者说只有键值,没有键名)
可以遍历,方法有:add、delete、has

WeakSet
成员都是对象
成员都是弱引用,可以被垃圾回收机制回收,可以用来保存DOM节点,不容易造成内存泄漏
不能遍历,方法有add、delete、has

Map
本质上是键值对的集合,类似集合
可以遍历,方法很多可以跟各种数据格式转换

WeakMap
只接受对象作为键名(null除外),不接受其他类型的值作为键名
键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收,此时键名是无效的
不能遍历,方法有get、set、has、delete

解析:第 4 题

第 5 题:介绍下深度优先遍历和广度优先遍历,如何实现?

解析:第 5 题

第 6 题:请分别用深度优先思想和广度优先思想实现一个拷贝函数?

解析:第 6 题

第 7 题:ES5/ES6 的继承除了写法以外还有什么区别?

先看ES5的继承(原型链继承)

function a() {
  this.name = 'a';
}
a.prototype.getName = function getName() {
  return this.name
}
function b() {}
b.prototype = new a();
console.log(b.prototype.__proto__ === a.prototype); // true
console.log(b.__proto__ === a); // false
console.log(b.__proto__); // [Function]

ES6继承

class A {
  constructor(a) {
    this.name = a;
  }
  getName() {
    return this.name;
  }
}

class B extends A{
  constructor() {
    super();
  }
}

console.log(B.prototype.__proto__ === A.prototype); // true
console.log(B.__proto__ === A); // true
console.log(B.__proto__); // [Function: A]

对比代码可以知道,子类的继承都是成功的,但是问题出在,子类的 __proto__ 指向不一样。

ES5 的子类和父类一样,都是先创建好,再实现继承的,所以它们的指向都是 [Function]

ES6 则得到不一样的结果,它指向父类,那么我们应该能推算出来,它的子类是通过 super 来改造的。

根据 es6--阮一峰 在class继承里面的说法,是这样子的:

引用阮一峰的 ECMAScript6入门 的class继承篇

子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。

ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this

1、class 声明会提升,但不会初始化赋值。Foo 进入暂时性死区,类似于 let、const 声明变量。

2、class 声明内部会启用严格模式。

3、class 的所有方法(包括静态方法和实例方法)都是不可枚举的。

4、class 的所有方法(包括静态方法和实例方法)都没有原型对象 prototype,所以也没有[[construct]],不能使用 new 来调用。

5、必须使用 new 调用 class。

6、class 内部无法重写类名

解析:第 7 题

第 8 题:setTimeout、Promise、Async/Await 的区别

其中settimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行; promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行;async函数表示函数里面可能会有异步方法,await后面跟一个表达式,async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码先执行。

解析:第 8 题

第 9 题:(头条、微医)Async/Await 如何通过同步的方式实现异步

async await 用于把异步请求变为同步请求的方式,第一个请求的返回值作为后面一个请求的参数,其中每一个参数都是一个promise对象

例如:这种情况工作中会经常遇到

(async () => {
    var a = await A();
    var b = await B(a);
    var c = await C(b);
    var d = await D(c);
})();

解析:第 9 题

第 10 题:(头条)异步笔试题

请写出下面代码的运行结果

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}
console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});
console.log('script end');
复制代码

解析:第 10 题

第 11 - 20 题

第 11 题:(携程)算法手写题

已知如下数组:

var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

编写一个程序将数组扁平化去并除其中重复部分数据,最终得到一个升序且不重复的数组

    var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]]]], 10];
    // 方法一
    console.log(Array.from(new Set(arr.flat(Infinity))).sort((a, b) => a - b))
    // 方法二
    console.log(Array.from(new Set(arr.toString().split(','))).map(Number).sort((a, b) => a - b))

    // 方法三
    // 第一步:扁平化
    let newArr = [];
    function flat(originArr) {
        if ({}.toString.call(originArr) === '[object Array]') {
            for (let i of originArr) {
                if ({}.toString.call(i) === '[object Array]') {
                    arguments.callee(i)
                } else {
                    newArr.push(i)
                }
            }
        }
        return newArr;
    }
    console.log(flat(arr))
    // 第二步:去重
    var newArr1 = [];
    for (let i of newArr) {
        if (!newArr1.includes(i)) newArr1.push(i);
    }
    // 第三步:排序 可以采用相关算法处理
    console.log(newArr1.sort((a, b) => a - b))

解析:第 11 题

第 12 题:(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点。

1. 回调函数(callback)

    setTimeout(() => {
        // callback 函数体
    }, 1000)

缺点:回调地狱,不能用 try catch 捕获错误,不能 return`
回调地狱的根本问题在于

缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符
嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,即(控制反转,嵌套函数过多的多话,很难处理错误

    ajax('XXX1', () => {
        // callback 函数体
        ajax('XXX2', () => {
            // callback 函数体
            ajax('XXX3', () => {
                // callback 函数体
            })
        })
    })

优点:解决了同步的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。)

2. Promise
Promise就是为了解决callback的问题而产生的。

Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise,如果我们在 then 中 return ,return 的结果会被Promise.resolve() 包装

优点:解决了回调地狱的问题

    ajax('XXX1')
        .then(res => {
            // 操作逻辑
            return ajax('XXX2')
        }).then(res => {
            // 操作逻辑
            return ajax('XXX3')
        }).then(res => {
            // 操作逻辑
        })

缺点:无法取消 Promise ,错误需要通过回调函数来捕获

3. Generator
特点:可以控制函数的执行,可以配合 co 函数库使用

    function* fetch() {
        yield ajax('XXX1', () => { })
        yield ajax('XXX2', () => { })
        yield ajax('XXX3', () => { })
    }
    let it = fetch()
    let result1 = it.next()
    let result2 = it.next()
    let result3 = it.next()

4. Async / await
async、await 是异步的终极解决方案

优点是:代码清晰,不用像 Promise 写一大堆 then 链,处理了回调地狱的问题

缺点:await 将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function test() {
        // 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
        // 如果有依赖性的话,其实就是解决回调地狱的例子了
        await fetch('XXX1')
        await fetch('XXX2')
        await fetch('XXX3')
    }

解析:第 12 题

第 13 题:(微医)Promise 构造函数是同步执行还是异步执行,那么 then 方法呢?

    const promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
    })

    promise.then(() => {
        console.log(3)
    })

    console.log(4)

执行结果是:1243
promise构造函数是同步执行的,then方法是异步执行的

解析:第 13 题

第 14 题:(兑吧)情人节福利题,如何实现一个 new

先理清楚 new 关键字调用函数都的具体过程,那么写出来就很清楚了

首先创建一个空的对象,空对象的 ___proto____属性指向构造函数的原型对象
把上面创建的空对象赋值构造函数内部的this,用构造函数内部的方法修改空对象
如果构造函数返回一个非基本类型的值,则返回这个值,否则上面创建的对象

function _new(fn, ...arg) {
    var obj = Object.create(fn.prototype);
    const result = fn.apply(obj, ...arg);
    return Object.prototype.toString.call(result) == '[object Object]' ? result : obj;
}

解析:第 14 题

第 15 题:(网易)简单讲解一下http2的多路复用

解析:第 15 题

第 16 题:谈谈你对TCP三次握手和四次挥手的理解

解析:第 16 题

第 17 题:A、B 机器正常连接后,B 机器突然重启,问 A 此时处于 TCP 什么状态

如果A 与 B 建立了正常连接后,从未相互发过数据,这个时候 B 突然机器重启,问 A 此时处于 TCP 什么状态?如何消除服务器程序中的这个状态?(超纲题,了解即可)

解析:第 17 题

第 18 题:(微医)React 中 setState 什么时候是同步的,什么时候是异步的?

解析:第 18 题

第 19 题:React setState 笔试题,下面的代码输出什么?

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }

  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};
复制代码

解析:第 19 题

第 20 题:介绍下 npm 模块安装机制,为什么输入 npm install 就可以自动安装对应的模块?

解析:第 20 题

推荐阅读更多精彩内容

  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 8,762评论 1 27
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 1,530评论 0 4
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 650评论 0 3
  • 一言不发,只是看花。 看到暮迟,起身回家。 ——离离诗画 2017/07/15
    离离诗画阅读 205评论 1 2
  • 有时,即使双方有意相谈,到最后却都是不欢而散。似「资治通鉴」中,当天下荒馑,百姓叫苦连天时,帝仍问「何不食...
    曰七濑阅读 247评论 0 3