# JavaScript、ES6 高频重点面试题

2023 最新,Web 前端重点面试题


汇总了 2023 年各互联网大厂以及中小型创业公司 JavaScript+ES6 相关的最新高频面试题

  • 有关答案解析会陆续更新,为确保每一个面试题的答案解析都是最佳实践和有竞争力的回答,需要一点点时间 !
  • 面试题是检验自己学习成果和查缺补漏的最好方式之一,同时也是了解企业对求职者技能要求的风向标 。
  • 希望正在学习或找工作的同学少走弯路 !

有兴趣的同学,可在评论区尝试着练习先给出自己的答案,我会给出建议和意见,每天进步一点点 !一起加油 ^_^

# 数据类型和变量

Interview questions


1、JS 有哪些数据类型,如何判断这些数据类型 ?(腾讯、阿里、滴滴、货拉拉、百度、招银、字节)

2、 number 类型表示整数的最大范围(字节)

3、什么是变量提升 ?(腾讯、网易、小米)

4、typeof(NaN) 返回什么 ?(滴滴)

5、 typeof(null) 为什么返回的是 'object'(滴滴)

6、nullundefined的区别 ?(同花顺、滴滴)

7、console.log([] == false)的输出结果(同花顺)

8、== 和 === 的区别?(滴滴)

9、const、let、var 区别(叠纸、字节)

10、 const 定义的值一定是不能改变的吗?(滴滴)

11、 const 声明了数组,还能 push 元素吗,为什么?(阿里)

12、JS 获取字符串的第 N 个字符(网易)

13、const 声明生成对象的时候,如何使其不可更改(字节)

14、 这两种方式的区别 ?typeof 判断(字节)

const str1 = "abc";
const str2 = new String("abc");

数据类型和变量,详细答案解析 ..... 👆

# 闭包 、作用域

Interview questions


1、说一下对闭包的理解 ?(快手、滴滴、58 篇、字节、小米、腾讯)

2、你在实际项目中遇到过哪些闭包的坑 ?(腾讯、字节)

3、闭包的好处,闭包里面的变量为什么不会被回收(网易)

4、 JS 作用域和作用域链(小米、腾讯、商汤)

5、 说一下 ES6 的块级作用域(百度)

6、有哪些类型的作用域(字节)

7、怎么理解 JS 静态作用域和动态作用域(小米)

8、 以下代码输出的结果是 ?(小米)

Object.prototype.a = 10;
var s = Symbol();
var obj = {
    [s]: 20,
    b: 30
}
Object.defineProperty(obj, 'c', {
    enumerable: truevalue: 40
})
for(let var in obj) {
    console.log(val)
}

闭包 、作用域,详细答案解析 ..... 👆

# 原型链

Interview questions


1、说说你对原型链的理解 ?(腾讯、货拉拉、字节、招银、阿里、小米)

2、原型链的终点是什么?(货拉拉)

3、es6 class 怎么设置原型、静态、实例方法 ?(阿里)

4、 []的原型链是什么 ?(腾讯)

# 继承

Interview questions


1、JS 的继承有几种方式 ?是怎么实现的?(腾讯、百度)

2、在 JS 中如何实现多重继承 ?(腾讯)

3、对象继承的方法 (网易)

4、 怎么实现类的继承 (网易)

# 数组

Interview questions


1、你知道 JS 数组有哪些方法 ?(同花顺,阿里、自如、网易)

2、数组去重的方式有哪些?时间复杂度分别是多少?(同花顺、阿里、字节、百度)

3、将数组的length设置为 0,取第一个元素会返回什么?(同花顺)

4、 代码题 :用尽可能多的方法实现数组扁平化(同花顺)

5、 什么是类数组 ?(百度)

6、类数组怎么转换为数组,说说你知道的所有方法 (阿里)

7、arguments 类数组,如何遍历类数组(滴滴)

8、 判断数组的方式(小米)

9、新创建一个数组空间(小米)

10、用过 ES6 哪些数组的方法,简述他们的特性(小米)

11、数组中的方法如何实现 break(滴滴)

12、比较常用的数组方法 map() reduce() find() findIndex() push() .... 哪些可以改变原数组,哪些不可以改变(滴滴)

13、JS 中 filter 方法如何使用 ?(小米)

# Promise 与 async await

Interview questions


1、JS 异步处理发展史(小红书、深信服)

2、同步任务和异步任务区别(百度)

3、了解异步调用栈吗(网易)

4、 使用 Promise 封装一下 ajax(叠纸、快手)

5、 JS 实现异步方法有哪些 ?(招银)

6、说一下 async 和 await 的原理,generator 用来做什么(百度、自如、字节、深信服、红书、腾讯)

7、有了 promise 为什么还需要 async/await(滴滴)

8、 promise 和 await async 有什么区别吗 ?(百度)

9、说一下你了解的 promise 的方法(百度,58 篇、广联达)

10、Promise 有哪些状态,状态之间互相转换(字节、知乎)

11、说说 Promise.race,Promise.all,如果 Promise.all 有一个异常了,其他 Promise 还会继续执行么?(字节、百度)

12、如何捕获 async await 的异常,如果不写 await promise 报错了你的 try catch 能捕获到错误么 (字节)

13、给定一个 promise 数组[p1,p2,p3...] (招银)

① 返回物理上第一个成功的 promise 的结果

② 若全部为失败,则返回物理上最后一个 promise 的结果

14、 Promise 实现过程和原理(字节、滴滴、百度)

15、 Promise 的一些静态方法说说它们作用和区别(百度)

16、promise.catch 后,后面的.then 还会执行吗(知乎)

17、如何为 Promise 添加一个方法(滴滴)

18、 async defer 的区别(腾讯)

19、以下代码输出的结果是 ?(字节)

async function async1() {
  console.log("async1");
  await async2();
  console.log("async1 end");
}
async function async2() {
  console.log("async2");
}
console.log("script start");
setTimeout(() => {
  console.log("setTimeOut");
}, 0);
async1();
new Promise((resolve) => {
  console.log("promise");
  resolve();
}).then(() => {
  console.log("promise2");
});
console.log("script end");

# this 和 执行上下文

Interview questions


1、说一下 this 的指向有几种方式及使用场景 (58、小米、货拉拉)

2、说一下 JS 的执行上下文(字节)

3、函数和对象及其上下文存储在哪里(字节)

4、 this 指向问题(招银、字阿波波)

5、 箭头函数中 this 的指向(字节)

6、改变 this 指向的方法 call()、apply()、 bind()的作用和区别 ?(字节、网易)

7、箭头函数可以用 call 或者 apply 改变 this 指向吗 ?(百度)

8、 bind 如果第一次传入了 this,我再给 bind 传入一次 this,他执行的是哪个 this (字节)

9、以下代码输出什么 ?

for (let i = 0; i < 10; i++) {
  this.a = i;
  this.$nextTick(() => {
    console.log(i);
    console.log(this.a);
  });
}

# ajax 与 axios

Interview questions


1、介绍下 ajax 及其原理(招银、创业公司)

2、说一下 axios 拦截器的使用(快手)

3、说说 fetch,优缺点?怎么做 polyfill(阿里)

4、 axios 拦截器、取消功能是怎么实现的(字节)

5、 Axios 中会判断使用 fetch 还是 xhr,其中 fetch 本身是没有 abort 方法的,那么 fetch 怎么实现取消功能?(字节)

6、封装 ajax(深信服)

7、axios 和 fetch 的区别 ?(同花顺)

# 对象

Interview questions


1、说说 es6 中的 class(腾讯、滴滴)

2、JSONP 原理(字节)

3、说说对 OOP 的理解(腾讯、字节)

4、 instanceof 原理(百度、滴滴、58、同花顺)

5、 实现 instanceof 的 polyfill(小米)

6、了解哪些设计模式(猿辅导)

7、说一下 new 创建实例的时候都做了什么(滴滴、字节)

8、 浅拷贝和深拷贝的区别 ?(货拉拉、创业公司)

9、深浅拷贝,有哪些方法实现深拷贝(知乎)

10、数组和对象是如何在内存中存储的(叠纸)

11、如果让你实现一个 new 是怎么实现 (字节)

12、怎么区别 array 和 object ?(阿里)

13、说一下继承的几种方式,怎么实现的(百度)

14、 Object 和 Map 的理解 和 相互转换(小米、滴滴)

# DOM 与事件

Interview questions


1、说一说事件冒泡,事件委托以及应用场景(同花顺、网易)

2、冒泡和捕获,这个浏览器的冒泡和捕获能颠倒么 ? (字节)

3、如何阻止事件冒泡(网易、京东)

4、 setTimeout为什么会存在延迟?怎么解决这个问题 ?(广联达)

5、 DOM 怎么添加事件(阿里)

6、给一个 DOM 同时绑定两个点击事件,一个用捕获,一个用冒泡,说下会执行几次事件,然后会先执行冒泡还是捕获(知乎)

7、dom 树和 render 树有啥区别(腾讯)

8、 异步加载 css 会阻塞页面的渲染吗?(腾讯)

9、DOM 树和 css dom 树是互斥的还是同时的(字节)

10、JS 脚本阻塞 DOM 构建,JS 脚本会不会对 css dom 树影响(字节)

# 事件循环

Interview questions


1、说说 JS 的事件循环机制 ?(广联达、滴滴、商汤、百度、小米)

2、说一下浏览器的事件循环机制 和 node 事件循环机制(自如、滴滴)

3、说一下 JS 的事件循环和 node 事件循环的区别(商汤、滴滴)

4、 EventLoop JS 事件循环队列、宏任务和微任务(字节)

# ES6 相关

Interview questions


1、ES6 和 CommonJS 对循环引用的处理有什么不同(猿辅导)

2、ES6 有哪些新特性,说一下你用过的 ES6 的新特性(百度、快手、字节、知乎、小米)

3、如何用 ES5 实现 ES6 的 class 的 static 和 private(百度)

4、 map 的返回值(网易)

5、 map 记录出现次数(小米)

6、Map 和 weakMap 有啥不一样的(字节、同花顺、阿里、滴滴)

7、map 和 object 区别(滴滴)

8、 Set、Map、WeakMap、WeakSet 区别(小米)

9、Array.map some forEach 区别(百度)

# 函数

Interview questions


1、说一下你知道的纯函数(滴滴)

2、箭头函数和普通函数的区别(招银、百度、知乎、字节)

3、箭头函数有 super 吗 ?(百度)

4、 实现一个柯里化函数(字节、商汤)

5、 箭头函数如何表示不定长的参数(字节)

# 综合题

Interview questions


1、取两个整数之间随机一个整数(叠纸)

2、从数组中取 m 个数和为 n(叠纸)

3、写一道题:给两个矩形,有每个矩形点坐标以及长宽高,判断是否相交(字节)

4、 查找字符串中最长不重复子串(字节)

5、 实现函数的链式调用(商汤)

6、写一个返回数字类型的函数,要求自定义的类实例化的对象返回定义的类名(商汤)

7、前端如何导出列表全部页面数据(快手)

8、 监听时间的三个参数 ?(网易)

9、JS 随机生成颜色(阿里)

10、如何判断元素出现在可视区域(小米)

11、判断元素距离文档顶部的距离和视图窗口高度和滚动过距离和的大小关系(小米)

12、正则你知道多少,实现一个简单用户名的匹配(字节)

# 相关概念

Interview questions


1、说说进程、线程是什么,了解协程么 ?(字节)

2、说说读写锁(字节)

3、说一下 JS 的微任务和宏任务有哪些(商汤)

4、 前端部分做了哪些数据存储 ?(小公司)

5、 渐进增强和优雅降级(深信服)

6、代理和反向代理(百度)

# 防抖与节流,垃圾回收

Interview questions


1、实现防抖和节流,原理介绍+应用场景(商汤、同花顺、广联达、百度、小红书、知乎、小米、字节)

2、说说 JS 垃圾回收(百度)

3、说一下 v8 的垃圾回收机制(58、字节)

4、 JS 的堆、栈,以及垃圾回收方式(字节)

# 手写代码面试题

Interview questions


1、手写获取数组的重复元素,要求尽可能用多种方法实现(小米)

2、手写 Array.prototype.reduce()(百度)

3、用 promise 封装实现 readfile 和 writefile 的同步请求(百度)

4、 手写 Promise(字节、百度、深信服、小红书)

5、 手写 apply(深信服)

6、手写 call 函数(滴滴、网易)

7、手写 new(阿里、深信服)

8、 手写深拷贝(招银、滴滴、货拉拉)

9、手写虚拟 dom 转换成真实 dom(字节)

10、手写 assign,要考虑全面,包括 symbol 也要考虑在内(猿辅导)

11、手写 ES6 的模板字符串(百度)

12、手写发布订阅模式,订阅,触发,移除(小米)

13、手写斐波那锲数列(知乎)

14、 手写防抖和节流(商汤、同花顺、广联达、百度、小红书、知乎、小米、字节)

# 其它

Interview questions


1、object 的 tostring 和构造器的 tostring 的区别(招银)

2、esbuild 的主要功能(招银)

3、cjs 和 esm 的区别(招银)

4、 对于没有标注 es module 的如何引入,转化 cjs 模块(招银)

5、 如何使用 Reflect,它提供了什么?(百度)

6、raf setTimeout setInterval 区别(百度)

7、getBoundingClientRect 方法的使用场景(小米)

8、 IntersectionObserver 方法的应用场景(小米)

9、useMemo() 和 useCallback() 有什么区别 ?(字节)

10、平时使用 JS 还是 TS,为什么越来越多的企业使用 TS 了(字节)

11、说说 JS 中 with 的使用 ?(字节)

12、页面有一个 iframe,将主页面的一个数组传到 iframe 中再用 instanceof 判断数组是否可行(字节)

13、回答以下代码输出结果(小米)

var a = 1;
function f() {
  console.log(a);
  var a = 2;
}
f();

14、说出代码输出并改正错误(小米)

function A(a) {
  this.x = a;
  var get = function () {
    return this.x;
  };
  this.print = function () {
    console.log(get());
  };
}
a = new A(1);
a.print();

15、以下输出的结果

var a = 10;
(function () {
  console.log(a);
  a = 5;
  console.log(window.a);
  var a = 20;
  console.log(a);
})();

# TypeScript

Interview questions


1、为什么越来越多的企业选择使用 TypeScript ?

2、TypeScript 中的原始类型有哪些 ?

3、说说数组在 TypeScript 中是如何工作的 ?

4、什么是 any 类型,何时使用 ?

5、什么是 void,什么时候使用 void 类型 ?

6、TypeScript 中声明变量有哪些不同的关键字 ?

7、如何书写带有类型注释的函数 ?

8、如何在 TypeScript 中创建对象 ?

9、如何在 TypeScript 中指定可选属性 ?

10、说说枚举在 TypeScript 中是如何工作的 ?

11、什么是参数解构 ?

12、说说 TypeScript 中 for 循环的不同变体

13、TypeScript 中控制成员可见性有几种方法 ?

14、TypeScript 支持静态类吗 ?为什么 ?

详细答案解析 ......

上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X