【面试题】 ES6知识点详细解析

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

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

地址：前端面试题库

 

????let const 其他知识点补充

块级作用域的补充

1. ​​const 不可以在循环体里面声明变量​​

 

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

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

地址：​​前端面试题库​​

 

1. ES6新增的遍历可迭代数组(对象)

for(var item of names)
for(let item of names)

​​for(const item of names)​​

暂时性死区

在ES6中，有一个概念叫做暂时性死区，它表达的意思是在一个代码中，使用let、const声明的变量，在声明之前，变量都是不可以访问的

我们称这种现象为 temporal dead zone (暂时性死区，TDZ)

var let const 的选择

var 的使用

1. var 的问题

我们需要明白一个事实，var表现出来的特殊性:比如作用于提升，window全局对象，没有块级作用域等都是一些历史遗留问题，是JavaScript在设计之初的一种缺陷,所以在以后的开发中不再使用var来定义变量了

1. 关于 let 和 const 声明变量的担心

​​构建工具的基础上创建项目\开发项目 webpack/vite/rallup​​

​​babel 工具会将我们的 ES6 代码转化成 ES5 代码 ES6-->ES5​​

let 和 const 如何选择

1. 优先推荐 const

因为 const 可以保证数据的安全性，如果用 let 声明的变量，后续有可能自己不小心更改了，如果不确定后续更改不更改这个变量，优先推荐使用 const 声明，只有当我们明确知道一个变量后续需要被重新赋值的话，再使用 let

????字符串模板

????字符串模板的基本使用

ES6之前拼接字符串和其他标识符

ES6之后模板字符串

标签模板字符串的使用

????ES6中的参数默认值

在 ES5 里面实现函数参数默认值

ES6 里面的函数参数默认值

对象参数和默认值以及解构

有默认值的形参最好放在最后

有默认值的函数的 length 属性(函数中的length值是形参的个数)

????函数的剩余参数

​​ES6中引用了 rest parameter，可以将不定数量的参数放入到一个数组中​​

如果最后一个参数是...为前缀的，那么它会将剩余的参数放到该参数中，并且作为一个数组

arguments 与 剩余参数有什么区别呢？

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 ​​方法连接两个独立的数组，但是为什么不再次使用展开运算符呢？

将参数作为数组进行传递

当传递参数时，展开运算符能够使我们的代码更具可读性。在 ES6 之前，我们必须将该函数应用于 ​​arguments​​。现在我们可以将参数展开到函数中，从而使代码更简洁。

数组切片

使用 ​​slice​​ 方法切片更加直接，但是如果需要的话，展开运算符也可以做到。但是必须一个个地去命名其余的元素，所以从大数组中进行切片的话，这不是个好方法。

将参数转换为数组

Javascript 中的参数是类似数组的对象。你可以用索引来访问它，但是不能调用像 ​​map​​、​​filter​​ 这样的数组方法。参数是一个可迭代的对象，那么我们做些什么呢？在它们前面放三个点，然后作为数组去访问！

复制对象

最后，我们介绍对象操作。复制的工作方式与数组相同。在以前它可以通过 ​​Object.assign()​​ 和一个空的对象常量来实现。

合并对象

合并的唯一区别是具有相同键的属性将被覆盖。最右边的属性具有最高优先级。

将字符串拆分为字符

最后是字符串。你可以用展开运算符把字符串拆分为字符。当然，如果你用空字符串调用​​ split​​ 方法也是一样的。

将 NodeList 转换为数组

参数就像从 querySelectorAll 函数返回的 ​​NodeList ​​一样。它们的行为也有点像数组，只是没有对应的方法。

知识点扩充 ​​map​​ ​​filter​​ ✨

1. ​​MDN map​​✨
2. ????【定义】：一个带键的数据项的集合
3. ????【区别】：像一个 Object 一样，它们最大的差别是 Map 允许任何类型的键（key）
4. ????【方法和属性】：

1. 示例

1. ​​MDN filter​​✨
2. 箭头函数 filter((element, index, array) => { /* … */ } )
3. 回调函数 filter(callbackFn, thisArg)
4. 内联回调函数 filter(function(element, index, array) { /* … */ }, thisArg)
5. 参数

callbackFn

用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

element 数组中当前正在处理的元素。

index 正在处理的元素在数组中的索引。

array 调用了 filter() 的数组本身。

thisArg 可选执行 callbackFn 时，用于 this 的值。

1. 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
2. filter() 不会改变原数组。

map filter应用场景

1. 第一组(包含名、姓、出生日期以及死亡日期)

1. 第二组(people数组，包含一组人名，名姓之间用逗号分隔)

1. 根据两组数据完成如下题目
2. 筛选出生于16世纪的发明家；
3. 以数组形式，列出其名与姓；
4. 根据其出生日期，并从大到小排序；
5. 计算所有的发明家加起来一共活了几岁；
6. 按照其年龄大小排序；
7. filter() 过滤操作，筛选符合条件的所有元素，若为true则返回组成新数组，以第一题为例：

1. map 映射操作，对原数组每个元素进行处理，并回传新的数组。以第二题为例:

1. sort 排序操作，默认排序顺序是根据字符串Unicode码点，如10在2之前,而数字又在大写字母之前, 大写字母在小写字母之前。也可使用比较函数，数组会按照调用该函数的返回值排序，格式如下

1. reduce() 归并操作，总共两个参数，第一个是函数，可以理解为累加器，遍历数组累加回传的返回值，第二个是初始数值。如果没有提供初始值，则将使用数组中的第一个元素。以第四题为例：

​​juejin.cn/post/684490…​​

????复盘剩余参数与展开运算符的区别

剩余参数的应用

我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数，我们可以使用展开语法...进行获取。

ES6之前，我们可以这样获取剩余参数，如下段代码所示：

ES6中，上述代码我们可以这样改下，如下段代码所示：

有个我们需要注意的事项，一旦函数中的参数第一个参数使用剩余参数，便不能添加任何参数，否则将会抛出错误。例如下段代码所示:

 

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

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

地址：前端面试题库