2024年Web前端最新【面试题】 ES6知识点详细解析_es6基本语法面试，字节跳动面试官迟到

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参
2. arguments 对象不是一个真正的数组,而rest 参数是一个真正的数组,可以进行数组的所有操作
3. arguments 是早期的 ECMAScript 中为了方便去获取所有的参数提供的一个数据结构，而 rest 参数是 ES6 中提供并且希望以此来代替 arguments 的

🥗函数箭头参数的补充

1. 箭头函数是没有显示原型的，所以不能作为构造函数，不能使用 new 来创建对象

👻

1. 一句话答案:

因为箭头函数里面没有[[Construct]]****这个内部槽，箭头函数的本质是变量，所以没有call

1. 进一步解释:

函数对象是一个支持[[Call]]、[[Construct]]内部方法的对象。每个支持[[Construct]]的对象必须支持[[Call]]，也就是说，每个构造函数必须是一个函数对象。因此，构造函数也可以被称为 构造函数函数 或 构造函数对象。
所以，想要对某个对象使用 new，就得确保该对象具有[[Construct]]这个内部方法。而箭头函数没有[[Construct]]。

1. 为什么没有 [[Construct]]

因为箭头函数设计之初，就是为了设计一种更简短的函数并且不绑定 this。所以箭头函数不为参数 super、this 或 new.target 定义本地绑定。箭头函数中的 this、super、arguments 及 new.target 这些值由外围最近一层非箭头函数决定。

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 不一定是全局对象

1. 普通函数会做一个操作，在 new 的时候会把构造函数的显示原型赋值给 new 出来新对象的隐式原型

箭头函数为什么没有显示原型

箭头函数返回一个对象

箭头函数与变量解构结合

React 与 Immutable 的技术选型中的应用

很多时候，你可能想不到要这样用，所以再来举个例子，比如在 React 与 Immutable 的技术选型中，我们处理一个事件会这样做：

箭头函数里面没有 this

箭头函数内部的this会指向外层最近的一个非箭头函数的this, 但不一定是全局对象。箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。

模拟一个实际开发中的例子：juejin.cn/post/684490…

我们的需求是点击一个按钮，改变该按钮的背景色。

为了方便开发，我们抽离一个 Button 组件，当需要使用的时候，直接：

看着好像没有问题，结果却是报错Uncaught TypeError: Cannot read property 'style' of undefined

这是因为当使用 addEventListener() 为一个元素注册事件的时候，事件函数里的 this 值是该元素的引用。所以如果我们在 setBgColor 中 console.log(this)，this 指向的是按钮元素，那 this.element 就是 undefined，报错自然就理所当然了。

也许你会问，既然 this 都指向了按钮元素，那我们直接修改 setBgColor 函数为：

确实可以这样做，但是在实际的开发中，我们可能会在 setBgColor 中还调用其他的函数，比如写成这种：

最终版本:

ES5

为避免 addEventListener 的影响，使用 bind 强制绑定 setBgColor() 的 this 为实例对象，使用 ES6，我们可以更好的解决这个问题：

由于箭头函数没有 this，所以会向外层查找 this 的值，即 bindEvent 中的 this，此时 this 指向实例对象，所以可以正确的调用 this.setBgColor 方法， 而 this.setBgColor 中的 this 也会正确指向实例对象。

在这里再额外提一点，就是注意 bindEvent 和 setBgColor 在这里使用的是普通函数的形式，而非箭头函数，如果我们改成箭头函数，会导致函数里的 this 指向 window 对象 (非严格模式下)。

最后，因为箭头函数没有 this，所以也不能用 call()、apply()、bind() 这些方法改变 this 的指向，可以看一个例子：

箭头函数中没有 arguments

箭头函数中的 arguments 会去上层作用域查找 arguments

箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：

那如果我们就是要访问箭头函数的参数呢？你可以通过命名参数或者 rest 参数的形式访问参数:

🥗Rest运算符

给大家推荐一个实用面试题库

**1、前端面试题库 （**面试必备） 推荐：★★★★★

地址：前端面试题库

函数的最后一个命名参数以…为前缀，则它将成为一个由剩余参数组成的真数组，其中从0（包括）到theArgs.length（排除）的元素由传递给函数的实际参数提供。

rest参数和arguments对象的区别

剩余参数和arguments对象之间的区别主要有三个：

• 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有实参。
• arguments对象不是一个真正的数组，而剩余参数是真正的 Array实例，也就是说你能够在它上面直接使用所有的数组方法，比如 sort，map，forEach或pop。
• arguments对象还有一些附加的属性 （如callee属性）
• 题外知识点，arguments 转化为真正的数组： var arr = Array.prototype.slice.call(arguments);

从 arguments 到数组✨

解构剩余参数✨

剩余参数可以被解构，这意味着他们的数据可以被解包到不同的变量中。请参阅解构赋值。

数组中的应用

ES6中对数组以及对象使用解构（destructing）和rest参数语法

然而当使用rest参数的时候，你必须将它放置在最后一个位置：

当解构的参数个数超过了数组中元素个数的时候，多出来的参数的值会是undefined：

但是我们可以对参数设置默认值，这样就不用担心出现undefined啦：

利用rest可以实现的效果

rest在对象中的应用

rest对象基本用法

显然，如果你想取不同的参数名，那么就无法使用简写形式。 起别名无法简写，让我们继续看一下其他例子：

在解构对象的时候，同时使用rest参数语法可能会导致失败：

接下来展示一下当使用对象解构语法，我们对代码可以做到怎样的精简：

举例

让我们看一下在实际编码中，解构以及rest参数语法的使用场景。首先我们看一下函数的可变参数实现：

Redux中的例子

让我们在redux中寻找一些例子。在redux源码中，存在一个util方法 - compose，它常被用来简化代码：

使用compose：

让我们看一下compose实际做了啥，这是一个精简的源码解释：

让我们继续看一个例子，来理解上述的args到底是如何被转变的：

ES6 JavaScript quiz 中关于解构和rest

reduce✨

reduce的精华所在是将累计器逐个作用于数组成员上，把上一次输出的值作为下一次输入的值。

reduce实质上是一个累计器函数，通过用户自定义的累计器对数组成员进行自定义累计，得出一个由累计器生成的值。另外reduce还有一个胞弟reduceRight，两个方法的功能其实是一样的，只不过reduce是升序执行，reduceRight是降序执行。

基础知识点

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）。

reducer 逐个遍历数组元素，每一步都将当前元素的值与上一步的计算结果相加（上一步的计算结果是当前元素之前所有元素的总和）——直到没有更多的元素被相加。

语法

callback：回调函数(必选)

initValue：初始值(可选)

一个 “reducer” 函数，包含四个参数：

1. 形式：array.reduce((t, v, i, a) => {}, initValue)

total(t)：上一次调用 callbackFn 完成计算的返回值(必选) 。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。

value(v)：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。

index(i)：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
array(a)：用于遍历的数组。

1. 初始值参数initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

计算过程

以t作为累计结果的初始值，不设置t则以数组第一个元素为初始值

开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t

进入下一次循环，重复上述操作，直至数组最后一个元素

结束遍历，返回最终的t

异常

TypeError 数组为空且初始值 initialValue 未提供。

对空数组调用reduce()和reduceRight()是不会执行其回调函数的，可认为reduce()对空数组无效

示例

用法

求数组所有值的和

写成箭头函数的形式：

累加对象数组里的值

要累加对象数组中包含的值，必须提供 initialValue，以便各个 item 正确通过你的函数。

写成箭头函数的形式：

🍔展开语法(Spread syntax)

基础知识

1. 展开语法 (Spread syntax) "), 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。字面量一般指 [1, 2, 3] 或者 {name: “mdn”} 这种简洁的构造方式)
2. 三个连续的点具有两个含义：展开运算符（spread operator）和剩余运算符（rest operator）

展开运算符和rest运算符的区别(同样是…)

1. 当…出现在 形参上 或 赋值运算符 左侧，表示 rest 运算符
2. 当…出现在 实参上 或 赋值运算符 右侧，表示 展开运算符

展开语法的浅拷贝

展开运算符使用的对象如果只是针对简单的一级基础数据，就是深拷贝；

展开运算符使用的对象内容包含二级或更多的复杂的数据，那就是浅拷贝；

所以日常代码中如果对象中包含的数据比较单一且不做多于处理，用展开运算符和JSON.parse(JSON.stringify(obj))都可，但是数据格式复杂的情况下，还是要用深拷贝处理数据，避免相互影响。

函数传参中的应用

ES6之前，如果我们希望将数组作为参数传递给函数中的参数，我们可以使用Function的apply()方法。如下段代码所示：

从上述代码，apply方法接受一个数组，将它们分拆成单个参数传递给函数进行调用。

ES6的展开语法能让我们以更简洁的方式进行调用，如下段代码所示：

代码运行期间，JavaScript解释器调用myFunction之前，将会用1,4表达式替换…运算符:

上述代码将会进行如下替换：替换后，函数中的代码将会继续执行。

数组的相关应用

展开运算在数组中的工作原理。

没有展开语法的时候，只能组合使用 push, splice, concat 等方法，来将已有数组元素变成新数组的一部分。有了展开语法，通过字面量方式，构造新数组会变得更简单、更优雅。

展开运算符或三个点，接受一个数组数组或通常是可迭代的[… arrayOrIterable]并将数组元素分解，并使用这些分解部分构造一个新数组。展开运算符可以放在数组中的任何位置多次使用：

代码运行期间，如下代码：

上述代码将会替换成如下代码：

ES5中push与ES6展开运算符

有时候，我们需要将一个数组的内容追加到另一个数组的末尾，ES6之前我们可以这么做，如下段代码所示：

ES6的展开语法能以更简洁的形式实现，如下段代码所示：

代码运行期间，如下代码：

上述代码将会替换成如下代码:

传递多个数组参数

我们可以使用展开语法传递多个数组进行参数传递，如下段代码所示：

复制数组

当我们需要修改一个数组，但又不想改变原始数组（其他人可能会使用它）时，就必须复制它。

它正在选择数组中的每个元素，并将每个元素放在新的数组结构中。我们也可以使用 map 操作符实现数组的复制并进行身份映射。

唯一数组

如果我们想从数组中筛选出重复的元素，那么最简单的解决方案是什么？

Set 对象仅存储唯一的元素，并且可以用数组填充。它也是可迭代的，因此我们可以将其展开到新的数组中，并且得到的数组中的值是唯一的。

串联数组

可以用 concat方法连接两个独立的数组，但是为什么不再次使用展开运算符呢？

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

算法题**。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

• 二叉树层序遍历
• B 树的特性，B 树和 B+树的区别
• 尾递归
• 如何写一个大数阶乘？递归的方法会出现什么问题？
• 把多维数组变成一维数组的方法
• 知道的排序算法 说一下冒泡快排的原理
• Heap 排序方法的原理？复杂度？
• 几种常见的排序算法，手写
• 数组的去重，尽可能写出多个方法
• 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
• 知道数据结构里面的常见的数据结构
• 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
• 合并两个有序数组
• 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中…(img-hg5hq2Bh-1715447784848)]