2020最新:100道有答案的前端面试题(下)

15,399 阅读7分钟

2020最新:100道有答案的前端面试题(上)现在已经 1.3W 阅读量了,我也被众多倔友催更了一周,我快速整理出了下篇。

如果大家喜欢这个系列的内容,欢迎点赞,我会根据大家的反馈,看是否继续进行整理更多有答案的面试真题。


51.写出执行结果,并解释原因

["1", "2", "3"].map(parseInt);

分类:JavaScript

答案&解析


52.写出执行结果,并解释原因

[typeof null, null instanceof Object]

分类:JavaScript

答案&解析


53.写出执行结果,并解释原因

function f() {}
const a = f.prototype,b = Object.getPrototypeOf(f)
console.log(a === b);

分类:JavaScript

答案&解析


54.写出执行结果,并解释原因

function showCase(value) {
    switch(value) {
    case 'A':
        console.log('Case A');
        break;
    case 'B':
        console.log('Case B');
        break;
    case undefined:
        console.log('undefined');
        break;
    default:
        console.log('Do not know!');
    }
}
showCase(new String('A'));

分类:JavaScript

答案&解析


55.选择正确的答案

console.log([2,1,0].reduce(Math.pow));
console.log([].reduce(Math.pow));

/ *
A. 2 报错
B. 2 NaN
C. 1 报错
D. 1 NaN
*/

分类:JavaScript

答案&解析


56.请问变量a会被GC吗

function test(){
    var a = 1;
    return function(){
        eval("");
    }
}
test();  

分类:JavaScript

答案&解析


57.写出执行结果,并解释原因

const value  = 'Value is' + !!Number(['0']) ? 'yideng' : 'undefined';
console.log(value);

分类:JavaScript

答案&解析


58.写出执行结果,并解释原因

var arr = [0,1];
arr[5] = 5;
newArr = arr.filter(function(x) { return x === undefined;});
console.log(newArr.length);

分类:JavaScript

答案&解析


59.写出执行结果,并解释原因(以最新谷歌浏览器为准)

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');

分类:JavaScript

答案&解析


60.下面代码中 a 在什么情况下会打印 1

var a = ?;
if(a == 1 && a== 2 && a== 3){
 	console.log(1);
}

分类:JavaScript

答案&解析


61.写出执行结果,并解释原因

const obj = {
    '2': 3,
    '3': 4,
    'length': 2,
    'splice': Array.prototype.splice,
    'push': Array.prototype.push
}
obj.push(1)
obj.push(2)
console.log(obj)

分类:JavaScript

答案&解析


62.Vue父组件可以监听到子组件的生命周期吗?如果能请写出你的实现方法。

分类:Vue

答案&解析


63.请问React调用机制一共对任务设置了几种优先级别?每种优先级都代表的具体含义是什么?在你开发过程中如果遇到影响主UI渲染卡顿的任务,你又是如何利用这些优先级的?

分类:React

答案&解析


64.以下两段代码会抛出异常吗?解释原因?

let yd = { x: 1, y: 2 };
// 以下两段代码会抛出异常吗?
let ydWithXGetter1 = {
  ...yd,
  get x() {
    throw new Error();
  },
};

let ydWithXGetter2 = {
  ...yd,
  ...{
    get x() {
      throw new Error();
    },
  },
};

分类:JavaScript

答案&解析


65.写出类数组转换结果,并解释原因

const arrLike = {
  length:4,
  0:0,
  1:1,
  '-1':2,
  3:3,
  4:4,
}
console.log(Array.from(arrLike));
console.log(Array.prototype.slice.call(arrLike));

分类:JavaScript

答案&解析


66.对于扩展运算符,下面代码的执行结果是什么?并解释原因

let ydObject = { ...null, ...undefined };
console.log(ydObject);
let ydArray = [...null, ...undefined];
console.log(ydArray);

分类:JavaScript

答案&解析


67.对于length下面代码的输出结果是什么?并解释原因

 function foo(){
   console.log(length);
 }
function bar(){
  var length = "京程一灯";
  foo();
}
bar();

分类:JavaScript

答案&解析


68.请写出如下代码的打印结果

var obj = {};
var x = +obj.yideng?.name ?? '京程一灯';
console.log(x);

分类:JavaScript

答案&解析


69.关于隐式转换,下面代码的执行结果是什么?并解释原因

let a = [];
let b = "0";
console.log(a == 0);
console.log(a == !a);
console.log(b == 0);
console.log(a == b);

分类:JavaScript

答案&解析


70.关于数组sort,下面代码的正确打印结果是什么,并解释原因

const arr1 = ['a', 'b', 'c'];
const arr2 = ['b', 'c', 'a'];
console.log(
  arr1.sort() === arr1,
  arr2.sort() == arr2,
  arr1.sort() === arr2.sort()
);

分类:JavaScript

答案&解析


71.写出下面代码null和0进行比较的代码执行结果,并解释原因

console.log(null == 0);
console.log(null <= 0);
console.log(null < 0);

分类:JavaScript

答案&解析


72.谈一下微信小程序的架构以及为什么要用到双线程

公司:快手

分类:小程序

答案&解析


73.随便打开一个网页,用 JavaScript 打印所有以 s 和 h 开头的标签,并计算出标签的种类

公司:快手

分类:JavaScript

答案&解析


74.给定一个数组,按找到每个元素右侧第一个比它大的数字,没有的话返回-1 规则返回一个数组

/*
 *示例:
 *给定数组:[2,6,3,8,10,9]
 *返回数组:[6,8,8,10,-1,-1]
 */

公司:快手

分类:JavaScript

答案&解析


75.tcp 和 udp 有什么区别?tcp 怎样确保数据正确性?tcp 头包含什么?tcp 属于那一层?

公司:头条、边锋

分类:网络&安全

答案&解析


76.介绍下 Https,和 http 的区别是什么?https 为什么比 http 安全?如何进行配置?

公司:边锋、老虎、脉脉、掌门一对一、喜马拉雅、寺库、腾讯应用宝、快手

分类:网络&安全

答案&解析


77.说一下对 React-redux 的理解以及它的原理,主要解决什么问题

公司:阿里、脉脉

分类:React

答案&解析


78.TCP 三次握手

公司:菜鸟网络、头条

分类:网络&安全

答案&解析


79.讲一下 webpack 原理, loader 和 plugin,你知道哪些模块化标准,说下 cjs 和 esmodule 的区别

公司:头条

分类:工程化

答案&解析


80.React 数据持久化有什么实践吗?

公司:洋葱学院

分类:React

答案&解析


81.请用算法实现,从给定的无序、不重复的数组data中,取出n个数,使其相加和为sum。并给出算法的时间/空间复杂度。(不需要找到所有的解,找到一个解即可)

function getResult(data,n,sum){
  // your code
}

公司:头条

分类:算法

答案&解析


82.Redux 中异步的请求怎么处理

公司:滴滴

分类:React

答案&解析


83.什么是深拷贝,和浅拷贝有什么区别,动手实现一个深拷贝

公司:顺丰、新东方、高德、虎扑、微医、百分点、酷狗

分类:JavaScript

答案&解析


84.介绍下 webpack,并说下 Webpack 的构建流程

公司:头条、挖财

分类:工程化

答案&解析


85.对闭包的看法,为什么要用闭包?说一下闭包原理以及应用场景

公司:滴滴、携程、喜马拉雅、微医、蘑菇街、酷家乐、腾讯应用宝、安居客

分类:JavaScript

答案&解析


86.大数计算如何实现

公司:洋葱学院

分类:JavaScript

答案&解析


87.说下 tree-shaking 的原理

公司:头条

分类:工程化

答案&解析


88.说一下 React diff 算法

公司:脉脉

分类:React

答案&解析


89.手写实现 Array.flat()

公司:滴滴、快手、携程

分类:JavaScript

答案&解析


90.PWA 是什么?对 PWA 有什么了解

公司:头条、喜马拉雅

分类:网络&安全

答案&解析


91.Css 如何画出一个扇形,动手实现下

公司:头条

分类:Css、编程题

答案&解析


92.说一下盒子模型,以及标准情况和 IE 下的区别

公司:兑吧

分类:Css

答案&解析


93.Umi 和 dva 分别是干嘛用的?为什么会有 umi dva 的出现?使用起来有什么不方便的地方吗?

公司:洋葱学院

分类:其它

答案&解析


94.CDN 是什么?描述下 CDN 原理?为什么要用 CDN?

公司:头条、滴滴、网易

分类:网络&安全

答案&解析


95.es5 实现 isInteger

公司:头条

分类:JavaScript

答案&解析


96.单向链表实现队列

公司:头条

分类:算法

答案&解析


97.手写 dom 操作,翻转 li 标签,如何处理更优

/*
 *有下边这样的dom结构,现在可以获取到ul,要求翻转里边li标签,如何处理更优
 */
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

公司:快手

分类:

答案&解析


98.怎样判断一个对象是否是数组,如何处理类数组对象

公司:快手

分类:JavaScript

答案&解析


99.是否了解 glob,glob 是如何处理文件的,业界是否还有其它解决方案

公司:快手

分类:JavaScript

答案&解析


100.说一下 Vue 的 keep-alive 是如何实现的,具体缓存的是什么?

公司:快手

分类:Vue

答案&解析


前端刷题神器

这些题还不过瘾?扫码进入前端面试星球🌍,解锁刷题神器,还可以获取800+道前端面试题一线常见面试高频考点