ES6 面试题

2025年3月17日 | 阅读 10 分钟
ES6 Interview Questions

以下是常见的 ES6 面试问题和答案。

1) 什么是 ES6 或 ECMAScript 2015?

ES6 于 2015 年 6 月发布,是该语言的第六版。最初,它被命名为 ES6,后来更名为 ECMAScript 2015。此版本包含一些新功能,如模块、迭代器、类、箭头函数、for...of 循环、Promise 等。它由 Brendan Eich 开发。


2) 定义 ECMAScript。

它是 ECMA-262 标准中定义的规范,用于创建一种通用脚本语言。


3) ES6 中引入了哪些新功能?

ES6 中引入的新功能如下:

  • let 和 const 关键字。
  • 默认参数。
  • 箭头函数。
  • 模板字面量。
  • 对象字面量。
  • 剩余和扩展运算符。
  • 解构赋值。
  • 模块、类、生成器和迭代器。
  • Promise 等。

4) 定义 let 和 const 关键字。

let: 使用 let 关键字声明的变量是可变的,即变量的值可以更改。它类似于 var 关键字,只是它提供了块级作用域。

const: 使用 const 关键字声明的变量是不可变的,并且具有块级作用域。如果变量使用 const 关键字声明,则其值不能更改或重新赋值。


5) 什么是箭头函数,以及如何创建它?

箭头函数在 ES6 中引入。箭头函数是编写 ES6 函数的简写符号。箭头函数的定义包括参数,后跟一个箭头 (=>) 和函数体。

箭头函数也称为 “胖箭头” 函数。我们不能将它们用作构造函数。

语法


6) 给出 ES6 中箭头函数的示例。列出其优点。

箭头函数为我们提供了编写 JavaScript 函数的更准确的方法。它们允许我们编写更小的函数语法。

箭头函数中的上下文是词法或静态作用域的。箭头函数不包含任何原型属性,不能与 new 关键字一起使用。

您可以点击此链接 ES6 箭头函数 了解更多关于箭头函数的信息。

示例

输出

It is an Arrow Function

箭头函数的优点

箭头函数的优点如下:

  • 它减少了代码大小。
  • 对于单行函数,return 语句是可选的。
  • 词法绑定上下文。
  • 对于单行语句,函数括号是可选的。

7) 用示例讨论 ES6 中的扩展运算符。

扩展运算符由三个点 (...) 表示,用于获取参数列表。它允许在期望多个参数的地方扩展可迭代对象(如数组或字符串)。

扩展运算符的语法类似于剩余运算符,但功能完全相反。它也用于组合或执行数组之间的连接。让我们通过一个示例来理解它。

示例

输出

[
  10, 20, 30, 40,  50,
  60, 70, 80, 90, 100
]

8) 用示例讨论 ES6 中的剩余参数。

它在 ES6 中引入,提高了处理参数的能力。通过剩余参数,可以将不确定的参数表示为数组。通过使用剩余参数,我们可以用任意数量的参数调用函数。

示例

输出

Sum = 60

9) ES6 中的模板字面量是什么?

模板字面量是 ES6 中引入的一项新功能。它提供了一种创建多行字符串和执行字符串插值的简单方法。

模板字面量允许嵌入表达式,也称为字符串字面量。

在 ES6 之前,模板字面量被称为 模板字符串。模板字面量用 反引号 (``) 字符 包围。模板字面量中的占位符用美元符号和花括号 (${expression}) 表示。如果我们需要在反引号中使用表达式,那么我们可以将该表达式放在 (${expression}) 中。

要了解更多关于 ES6 中的模板字面量,请点击此链接 ES6 模板字面量。

示例

输出

Hello World

10) 讨论 ES6 中的解构赋值。

解构在 ECMAScript 2015 或 ES6 中引入,用于将数据从对象和数组中提取到单独的变量中。它允许我们从对象和数组中提取更小的片段。

要了解更多关于 ES6 中的数组解构,请点击此链接 ES6 数组解构

要了解更多关于 ES6 中的对象解构,请点击此链接 ES6 对象解构

示例

输出

Alan Rickman

11) 如何在 ES6 中创建类?

使用 this 关键字创建类。我们可以通过类表达式或类声明将类包含在代码中。类定义只能包含 函数构造函数。这些组件统称为类的成员。

类中的构造函数为类的对象分配内存。类中的函数负责对对象执行操作。

要了解更多关于 ES6 中的类,请点击此链接 ES6 类

让我们看看创建类的语法。

语法:在 ES5 中

语法:在 ES6 中(使用 class 关键字)


12) 你对生成器函数有什么了解?

生成器为我们提供了一种处理迭代器和函数的新方法。生成器是一种特殊的函数,可以暂停一次或多次,然后稍后恢复。声明 function* (function 关键字后跟星号) 用于定义生成器函数。

当生成器被调用时,它不会运行其代码。相反,它返回一个特殊对象,称为 生成器对象 来管理执行。让我们看一个 ES6 中生成器的示例。

要了解更多关于 ES6 中的生成器,请点击此链接 ES6 生成器

示例

输出

100
undefined
200

13) 什么是默认参数?

通过使用默认参数,如果未传递任何值或传递了 undefined,我们可以用默认值初始化命名参数。

示例

输出

100 200

14) IIFE (立即调用函数表达式) 是什么意思?

IIFE 是 JavaScript 中一经定义就立即运行的函数。它也称为 自执行匿名函数。它包括两个主要部分,如下:

  • 第一部分是一个匿名函数,它具有词法作用域(静态作用域),并包含在 分组运算符 () 中。
  • 第二部分创建 IIFE,通过它 JavaScript 引擎将直接解释该函数。

您可以点击此链接 ES6 IIFE 了解更多关于箭头函数的信息。

示例

输出

Hello World

15) 讨论 for...in 循环。

它类似于 for 循环,它迭代对象的属性。当我们需要访问对象的属性或键时,它很有用。

示例

输出

Model: Galaxy
Color:  White
RAM: 4GB

16) 讨论 for...of 循环。

此循环用于迭代可迭代对象(数组、字符串等)。

示例

输出

Apple
Banana
Mango
Orange

17) 定义 Set。

Set 是一种数据结构,允许我们创建唯一值的集合。它是一个值集合,类似于数组,但不包含任何重复项。它支持对象引用和原始值。

要了解更多关于 ES6 中的 Set,请点击此链接 ES6 Set

示例

输出

Set { 'Green', 'Red', 'Orange', 'Yellow' }

18) 定义 Map。

在 ES6 之前,当我们要求键和值之间进行映射时,我们通常使用对象。Map 对象 是 ES6 中引入的一种新的集合类型。它保存键值对,其中任何类型的值都可以用作键或值。

Map 对象始终记住键的实际插入顺序。Map 是有序的,因此它们按插入顺序遍历元素。

要了解更多关于 ES6 中的 Map,请点击此链接 ES6 Map


19) 你对 WeakSet 有什么了解?

使用 WeakSet,可以将弱引用的对象存储在集合中。与 Set 类似,WeakSet 不能存储重复值。WeakSet 不能迭代。

WeakSet 只包含 Set 对象的 add(value)、delete(value)has(value) 方法。


20) 你对 WeakMap 有什么了解?

WeakMap 与 Map 几乎相似,但 WeakMap 中的键必须是对象。它将每个元素存储为键值对,其中键是弱引用的。在这里,键是对象,值是任意的。

WeakMap 对象按插入顺序迭代元素。它只包括 delete(key)、get(key)、has(key)set(key, value) 方法。


21) 解释 ES6 中的 Promise。

ES6 Promise 是在 JavaScript 中处理异步编程的最简单方法。异步编程包括在主线程之外单独运行进程,并在完成后通知主线程。

在 ES6 之前,使用 回调函数 来执行异步编程。Promise 用于克服 回调地狱 的问题。

要了解更多关于 Promise,请点击此链接:ES6 Promise


22) ES6 中 Promise 的状态有哪些?

Promise 主要有三种状态,如下:

  • Pending (待定): 它是每个 Promise 的初始状态。它表示结果尚未计算。
  • Fulfilled (已完成): 它表示操作完成。
  • Rejected (已拒绝): 它表示计算过程中发生的失败。

一旦 Promise fulfilled 或 rejected,它将是不可变的。Promise() 构造函数接受两个参数:rejected 函数和 resolve 函数。根据异步操作,它返回第一个参数或第二个参数。


23) 你对 JavaScript 中的回调和回调地狱有什么了解?

回调: 它用于在另一个函数执行完成后处理函数的执行。回调函数有助于处理事件。在回调中,一个函数可以作为参数传递给另一个函数。当我们处理基本情况(例如最小异步操作)时,它是一种很好的方法。

回调地狱: 当我们开发一个包含大量代码的 Web 应用程序时,使用回调函数会变得混乱。这种过度的回调嵌套通常被称为 回调地狱


24) 列出 ES5 和 ES6 之间的比较。

ES5 和 ES6 在性质上相似,但它们之间存在一些差异。ES5 和 ES6 之间的比较如下表所示:

基于ES5ES6
定义ES5 是 ECMAScript(由 ECMA 国际定义的商标脚本语言规范)的第五版。ES6 是 ECMAScript(由 ECMA 国际定义的商标脚本语言规范)的第六版。
Release它于 2009 年推出。它于 2015 年推出。
数据类型ES5 支持原始数据类型,即 string、boolean、number、nullundefined在 ES6 中,JavaScript 数据类型有一些新增。它引入了一种新的原始数据类型 'symbol',用于支持唯一值。
定义变量在 ES5 中,我们只能使用 var 关键字定义变量。在 ES6 中,有两种新的定义变量的方法,即 letconst
性能由于 ES5 早于 ES6,缺少一些功能,因此其性能低于 ES6。由于新功能和简写存储实现,ES6 的性能高于 ES5。
支持它得到了广泛社区的支持。它也有很多社区支持,但比 ES5 少。
对象操作ES5 比 ES6 更耗时。由于解构和扩展运算符,ES6 中的对象操作可以更顺畅地处理。
箭头函数在 ES5 中,functionreturn 关键字都用于定义函数。箭头函数是 ES6 中引入的一项新功能,通过它我们不需要 function 关键字来定义函数。
循环在 ES5 中,使用 for 循环迭代元素。ES6 引入了 for...of 循环的概念,用于迭代可迭代对象的值。

要了解更多关于 ES5 和 ES6 之间的区别,请点击此链接:ES5 与 ES6


25) 定义 JavaScript 中的模块。

模块是文件中编写的 JavaScript 代码片段。通过使用模块,可以轻松维护代码、调试代码和重用代码。每个模块都是一旦加载就会执行的代码片段。


26) 你对 JavaScript 中的 Hoisting(提升)有什么了解?

它是 JavaScript 的默认行为,用于在代码执行之前将所有声明移动到作用域的顶部。它可以应用于函数和变量。它允许 JavaScript 在声明组件之前使用它。它不适用于在严格模式下运行的脚本。


27) 列出 ES6 中引入的新数组方法?

ES6 中有许多可用的数组方法,如下所示:

  • Array.of()
  • Array.from()
  • Array.prototype.copyWithin()
  • Array.prototype.find()
  • Array.prototype.findIndex()
  • Array.prototype.entries()
  • Array.prototype.keys()
  • Array.prototype.values()
  • Array.prototype.fill()

要了解更多关于上述数组方法,请点击此链接:ES6 数组方法


28) ES6 中引入了哪些新的字符串方法?

ES6 中引入了四种字符串方法,如下所示:

  • string.startsWith()
  • string.endsWith()
  • string.includes()
  • string.repeat()

要了解更多关于字符串,请点击此链接:ES6 字符串。


29) 定义 Babel。

Babel 是 JavaScript 流行转译器之一。它主要用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本,以便由以前的 JavaScript 引擎运行。


30) 定义 Webpack。

它是一个开源的 JavaScript 模块打包器,它处理带依赖项的模块。它允许我们运行一个托管 Babel 的环境。