ES6进阶：剩余参数与展开运算符详解及应用-CSDN博客

ES6语法扩展：
剩余参数：
1.认识剩余参数
在这里插入图片描述

2.剩余参数的本质=== >剩余参数永远是个数组，即使没有值也是一个空数组
在这里插入图片描述

剩余参数的默认值：
1.箭头函数的剩余参数
箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号
在这里插入图片描述

2.使用剩余参数替代arguments获取实际的参数
在这里插入图片描述

3.剩余参数的位置
剩余参数只能是最后一个参数，之后不能再有其他的参数，否则会报错
在这里插入图片描述

展开运算符：
数组的展开运算符：
数组的展开运算符的基本使用
1.认识展开运算符
在这里插入图片描述

2.数组展开运算符的基本用法
在这里插入图片描述

区分剩余参数和展开运算符：
1.下面是它们的根本区别
展开运算符:[1,3,5]->1,3,5 将数组装换为数字列表
剩余参数:2,3,5 ->[2,3,5] 将数字列表转换为数组
2.区分剩余参数和展开运算符例子
在这里插入图片描述

数组展开运算符的应用：
1.复制数组
在这里插入图片描述

2.合并数组
在这里插入图片描述

3.字符串转为数组
字符串可以按照数组的形式展开
在这里插入图片描述

4.常见的类数组转换为数组
在这里插入图片描述

对象的展开运算符：
对象展开运算符的基本用法
1.展开对象
对象不能直接的展开，必须写在{}中。
对象的展开：把属性罗列出来，用逗号分隔，放到一个{}对象，构成一个新的对象
在这里插入图片描述

2.合并对象
在这里插入图片描述

对象展开符的注意事项
1.空对象的展开如果展开一个空对象，则没有任何效果
在这里插入图片描述

2.非对象的展开
如果展开的不是对象,则会自动将其转为对象,再将其属性罗列出来
在这里插入图片描述

3.对象中的对象属性的展开，不会展开对象中的对象属性
在这里插入图片描述

Symbol 数据类型：
Symbol概述：
symbol是ES6引入了一种新的基本数据类型（原始数据类型）Symbol，表示独一无二的值。它是 JavaScript语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
每个从 Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的。
Symbol数据类型的特点：
Symbol的值是唯一的，用来解决命名冲突的问题
Symbol值不能与其他数据类型进行运算
Symbol定义得的对象的属性不能使用for…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
Symbol语法与描述：
在这里插入图片描述

description 可选
可选的，字符串类型。对symbol的描述，可用于调试但不是访问symbol本身。
直接使用 Symbol() 创建新的symbol类型，并用一个可选的字符串作为其描述
在这里插入图片描述

上面的代码创建了三个新的symbol类型。注意， Symbol(“foo”) 不会强制将字符串 “foo” 转换成symbol类型。它每次都会创建一个新的symbol类型：
在这里插入图片描述

下面带有new运算符的语法将抛出TypeError错误
在这里插入图片描述

这会阻止创建一个显式的Symbol包装器对象而不是一个Symbol值。围绕原始数据类型创建一个显式包装器对象从ECMAScript 6开始不再被支持。现有的原始包装器对象，如new Boolean 、 new String 以及 new Number ，因为遗留原因仍可被创建。
如果真的想创建一个Symbol包装器对象( Symbol wrapper object )，你可以使用Object()函数：
在这里插入图片描述

Symbol创建对象的属性：
在这里插入图片描述

Symbol.for()：
有时，我们希望重新使用同一个Symbol值，Symbol.for()方法可以做到这一点。它接受一个字符串作为参数，然后搜索有没有以该参数作为名称的Symbol值。如果有，就返回这个Symbol值，否则就新建一个以该字符串为名称的Symbol值，并将其注册到全局。
在这里插入图片描述

上面代码中，s1和s2都是Symbol值，但是它们都是由同样参数的Symbol.for方法生成的，所以实际上是同一个值。

Symbol.for()与Symbol()这两种写法，都会生成新的Symbol。它们的区别是，前者会被登记在全局环境中供搜索，后者不会。Symbol.for()不会每次调用就返回一个新的Symbol类型的值，而是会先检查给定的key是否已经存在，如果不存在才会新建一个值。比如，如果你调用Symbol.for(“cat”)30 次，每次都会返回同一个Symbol值，但是调用Symbol(“cat”)30 次，会返回30个不同的Symbol值。
在这里插入图片描述

上面代码中，由于 Symbol() 写法没有登记机制，所以每次调用都会返回一个不同的值。

Symbol.keyFor()方法返回一个已登记的Symbol类型值的key。
在这里插入图片描述

上面代码中，变量s2属于未登记的Symbol值，所以返回undefined。

注意：Symbol.for()为Symbol值登记的名字，是全局环境的，不管有没有在全局环境运行。
在这里插入图片描述

上面代码中，Symbol.for(‘bar’)是函数内部运行的，但是生成的Symbol值是登记在全局环境的。所以，第二次运行Symbol.for(‘bar’)可以取到这个Symbol值。

Symbol.for()的这个全局登记特性，可以用在不同的iframe或service worker中取到同一个值。
在这里插入图片描述

上面代码中，iframe窗口生成的Symbol值，可以在主页面得到。

内置的Symbol值：
除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
Symbol.hasInstance
Symbol.isConcatSpreadable
Symbol.species
Symbol.match
Symbol.replace
Symbol.search
Symbol.split
Symbol.iterator ==>对象的 Symbol.iterator 属性，指向该对象的默认遍历器方法
Symbol.toPrimitive
Symbol.toStringTag
Symbol.unscopables
Set数据结构：
ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
Set本身是一个构造函数，用来生成Set数据结构。
数组是一系列有序的数据集合[1,3,5,3]；Set是一系列无序、没有重复值得数据集合[1,3,5]
Set没有下标去表示每一个值，所以Set是无序的,，也不能像数组那样通过下标去访问Set的成员
在这里插入图片描述

Set实例的方法和属性：
Set 结构的实例有以下属性：
Set.prototype.constructor ：构造函数，默认就是 Set 函数。
Set.prototype.size ：返回 Set 实例的成员总数。
Set实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。
四个操作方法：
Set.prototype.add(value)：添加某个值，返回Set结构本身。
Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
Set.prototype.clear()：清除所有成员，没有返回值。
在这里插入图片描述

遍历操作：
Set结构的实例有四个遍历方法，可以用于遍历成员：
Set.prototype.keys()：返回键名的遍历器
Set.prototype.values()：返回键值的遍历器
Set.prototype.entries()：返回键值对的遍历器
Set.prototype.forEach()：使用回调函数遍历每个成员
需要特别指出的是，Set的遍历顺序就是插入顺序。这个特性有时非常有用，比如使用Set保存一个回调函数列表，调用时就能保证按照添加顺序调用。

keys()， values()， entries()
forEach()
Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。 forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。