【面试题】 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” 函数，包含四个参数：
- 形式：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)：用于遍历的数组。
- 初始值参数initialValue 可选
作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。
计算过程
以t作为累计结果的初始值，不设置t则以数组第一个元素为初始值
开始遍历，使用累计器处理v，将v的映射结果累计到t上，结束此次循环，返回t
进入下一次循环，重复上述操作，直至数组最后一个元素
结束遍历，返回最终的t
异常
TypeError 数组为空且初始值 initialValue 未提供。
对空数组调用reduce()和reduceRight()是不会执行其回调函数的，可认为reduce()对空数组无效
示例
用法
求数组所有值的和
写成箭头函数的形式：
累加对象数组里的值
要累加对象数组中包含的值，必须提供 initialValue，以便各个 item 正确通过你的函数。
写成箭头函数的形式：
🍔展开语法(Spread syntax)
基础知识
- 展开语法 (Spread syntax) , 可以在函数调用/数组构造时，将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时，将对象表达式按 key-value 的方式展开。字面量一般指 [1, 2, 3] 或者 {name: "mdn"} 这种简洁的构造方式)
- 三个连续的点具有两个含义：展开运算符（spread operator）和剩余运算符（rest operator）
展开运算符和rest运算符的区别(同样是...)
- 当...出现在 形参上 或 赋值运算符 左侧，表示 rest 运算符
- 当...出现在 实参上 或 赋值运算符 右侧，表示 展开运算符
展开语法的浅拷贝
展开运算符使用的对象如果只是针对简单的一级基础数据，就是深拷贝；
展开运算符使用的对象内容包含二级或更多的复杂的数据，那就是浅拷贝；
所以日常代码中如果对象中包含的数据比较单一且不做多于处理，用展开运算符和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 一样。它们的行为也有点像数组，只是没有对应的方法。
- MDN map✨
- 🍇【定义】：一个带键的数据项的集合
- 🍈【区别】：像一个 Object 一样，它们最大的差别是 Map 允许任何类型的键（key）
- 🍉【方法和属性】：
- 示例
- MDN filter✨
- 箭头函数 filter((element, index, array) => { /* … */ } )
- 回调函数 filter(callbackFn, thisArg)
- 内联回调函数 filter(function(element, index, array) { /* … */ }, thisArg)
- 参数
callbackFn
用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
element 数组中当前正在处理的元素。
index 正在处理的元素在数组中的索引。
array 调用了 filter() 的数组本身。
thisArg 可选执行 callbackFn 时，用于 this 的值。
- 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
- filter() 不会改变原数组。
map filter应用场景
- 第一组(包含名、姓、出生日期以及死亡日期)
- 第二组(people数组，包含一组人名，名姓之间用逗号分隔)
- 根据两组数据完成如下题目
- 筛选出生于16世纪的发明家；
- 以数组形式，列出其名与姓；
- 根据其出生日期，并从大到小排序；
- 计算所有的发明家加起来一共活了几岁；
- 按照其年龄大小排序；
- filter() 过滤操作，筛选符合条件的所有元素，若为true则返回组成新数组，以第一题为例：
- map 映射操作，对原数组每个元素进行处理，并回传新的数组。以第二题为例:
- sort 排序操作，默认排序顺序是根据字符串Unicode码点，如10在2之前,而数字又在大写字母之前, 大写字母在小写字母之前。也可使用比较函数，数组会按照调用该函数的返回值排序，格式如下
- reduce() 归并操作，总共两个参数，第一个是函数，可以理解为累加器，遍历数组累加回传的返回值，第二个是初始数值。如果没有提供初始值，则将使用数组中的第一个元素。以第四题为例：
🍔复盘剩余参数与展开运算符的区别
剩余参数的应用
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数，我们可以使用展开语法...进行获取。
ES6之前，我们可以这样获取剩余参数，如下段代码所示：
ES6中，上述代码我们可以这样改下，如下段代码所示：
有个我们需要注意的事项，一旦函数中的参数第一个参数使用剩余参数，便不能添加任何参数，否则将会抛出错误。例如下段代码所示:
给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
