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

简介: 【面试题】 ES6知识点详细解析(二)

【面试题】 ES6知识点详细解析(一):https://developer.aliyun.com/article/1413990

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 中的参数是类似数组的对象。你可以用索引来访问它,但是不能调用像 mapfilter 这样的数组方法。参数是一个可迭代的对象,那么我们做些什么呢?在它们前面放三个点,然后作为数组去访问!

复制对象

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

合并对象

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

将字符串拆分为字符

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

将 NodeList 转换为数组

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

知识点扩充 mapfilter

  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、前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

相关文章
|
14天前
|
存储 缓存 NoSQL
Redis常见面试题全解析
Redis面试高频考点全解析:从过期删除、内存淘汰策略,到缓存雪崩、击穿、穿透及BigKey问题,深入原理与实战解决方案,助你轻松应对技术挑战,提升系统性能与稳定性。(238字)
|
2月前
|
存储 安全 测试技术
Python面试题精选及解析
本文详解Python面试中的六大道经典问题,涵盖列表与元组区别、深浅拷贝、`__new__`与`__init__`、GIL影响、协程原理及可变与不可变类型,助你提升逻辑思维与问题解决能力,全面备战Python技术面试。
100 0
|
4月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
190 4
|
4月前
|
存储 安全 Java
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
2089 48
|
4月前
|
前端开发 JavaScript 开发者
2025 最新 100 道 CSS 面试题及答案解析续篇
本文整理了100道CSS面试题及其答案,涵盖CSS基础与进阶知识。内容包括CSS引入方式、盒模型、选择器优先级等核心知识点,并通过按钮、卡片、导航栏等组件封装实例,讲解单一职责原则、样式隔离、响应式设计等最佳实践。适合前端开发者巩固基础、备战面试或提升组件化开发能力。资源地址:[点击下载](https://pan.quark.cn/s/50438c9ee7c0)。
116 5
2025 最新 100 道 CSS 面试题及答案解析续篇
|
4月前
|
缓存 NoSQL Java
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
235 6
|
4月前
|
NoSQL Java 微服务
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
289 9
|
4月前
|
缓存 算法 NoSQL
校招 Java 面试高频常见知识点深度解析与实战案例详细分享
《2025校招Java面试核心指南》总结了Java技术栈的最新考点,涵盖基础语法、并发编程和云原生技术三大维度: 现代Java特性:重点解析Java 17密封类、Record类型及响应式Stream API,通过电商案例演示函数式数据处理 并发革命:对比传统线程池与Java 21虚拟线程,详解Reactor模式在秒杀系统中的应用及背压机制 云原生实践:提供Spring Boot容器化部署方案,分析Spring WebFlux响应式编程和Redis Cluster缓存策略。
125 1
|
4月前
|
设计模式 安全 Java
Java 基础知识面试题全解析之技术方案与应用实例详解
本内容结合Java 8+新特性与实际场景,涵盖函数式编程、Stream API、模块化、并发工具等技术。通过Lambda表达式、Stream集合操作、Optional空值处理、CompletableFuture异步编程等完整示例代码,助你掌握现代Java应用开发。附面试题解析与技术方案,提升实战能力。代码示例涵盖计算器、员工信息统计、用户查询、模块化系统设计等,助你轻松应对技术挑战。
112 9
|
4月前
|
缓存 Java 索引
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
900 6

推荐镜像

更多
  • DNS