es6新特性及作用



1. let 声明变量：

ES6新增加了两个重要的 JavaScript 关键字: let 和 const。

书写格式：

注意事项：

1.变量不能重复声明：

运行结果：

2. 只在块级作用域内有效：

运行结果：

3.不存在变量提升：

运行结果：

4.不影响作用域链效果：

运行结果：

案例：点击盒子切换颜色：

无法实现：

运行结果：

因为var是全局作用域，到最后 i==3了。

可以实现：

运行结果：

因为let只在各自的块级作用域里有效，所以能使用。所以循环条件里建议用let声明。

2.const 声明常量：

格式（都一样的）：

注意事项：

1.一定要有初始值：

运行结果：

2.一般声明使用大写（潜规则）：

3.常量值不能修改：

运行结果：

4.也是块级作用域内有效：

运行结果：

5. 对于对数组和对象里元素修改，不算对常量进行修改 (因为地址没改变)：

3.变量解构赋值：

  解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

1.数组的解构：

运行结果：

2.对象的解构：

注意：变量名与对象里元素的名要一样的，且不论顺序如何也会一一对应。

运行结果：

3.模板字符串：

  模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。

格式：

注意事项：

1.内容里可以出现换行符，如：

不会报错。" "与 ’ ’ 这样写的话会。

2.可进行变量拼接：

运行结果：

4.对象简化写法：

可以简化成（注意对象里的变化）：

运行结果：

5. 箭头函数：

  箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

简写：

可以理解成去掉了function这个单词，参数后面多了个箭头表示。

注意事项：
1.this是静态的，this始终指向函数声明时所在作用域下的this值：

使用 call() 方法，您可以编写能够在不同对象上使用的方法。
运行结果：

  看出getName1的this指向已经变了，不再是全局的name，而是对象里的name，而箭头函数getName2没变，因为它始终指向函数声明时所在作用域下的this值。

2.不能作为构造实例化对象：

运行结果：
3. 不能使用arguments变量：
略…
4.箭头函数简写：
（1）当形参仅仅只有一个时可以省略括号：

相当于：

（2）当代码体只有一条语句时，可以省略花括号，且return这个单词也要省略：

案例：
点击盒子两秒后变色：

运行结果：

6.函数参数的默认值设置：

1.允许给函数参数赋初始值（潜规则是有初始值的参数要放最后一个）：

运行结果：

7. rest参数：

  新增的 rest参数 用来获取函数的实参，代替arguments

ES5方式（得到对象）：

运行结果：
ES6方式（得到数组）：

运行结果：
  注意如果有多个参数，rest参数要放最后。

8.扩展运算符：

“…” 扩展运算符能将 “数组” 转换为逗号分隔的参数序列，如：

运行结果：

应用：

合并两个数组：
ES5写法：

运行结果：
ES6写法（就问你快不快）：

数组克隆：

一个字，快！

伪数组转成真数组：

9. Symbol：

  ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。且Symbol值不能与其他数据进行运算。且Symbol定义的对象属性不能使用fr…in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名。

创建：(会返回一个symbol对象)

写入字符串，相当于描述注释这东西：

也可以这样，返回函数对象：

  你看不到它独一无二，其实暗地里它已经由自己的某些方法让自己独一无二了。都会生成唯一的symbol值。

使用（给对象添加独一无二的属性和方法）：

运行结果：

10. 迭代器：

  迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口（其实就是对象里的一个属性），就可以完成遍历操作。
1.ES6创造了一种新的遍历命令fo…of 循环，Iterator接口主要供 for…of消费。
2.原生具备 iterator 接口的数据可用 for of 遍历。比如数组等都有。

运行结果：
插一嘴，for in 循环保存的是键名。for of 保存的是键值。

案例：

11.生成器：

  其实就是一个特殊的函数。
在 javascript 中，如果想要使用生成器，则需要：
1.定义特殊的生成器函数（有个*号）。
2.调用该函数创建一个生成器对象。
3.在循环中使用该生成器对象，或直接调用其 next 方法。

yield 关键字用来暂停和恢复一个生成器函数,就是代码分隔符。

运行结果：

12.promise：

  Promise 是ES6引入的在 js 中进行异步编程的新解决方案。

promise详细使用请点击链接~

或者promise详细使用请查看此链接:https://bbs.huaweicloud.com/blogs/

13. Set(集合)：

  ES6提供了新的数据结构Set(集合) 。它类似于数组，但成员的值都是唯一的，集合实现了iterator 接口，所以可以使用【扩展运算符】和【for…of…】进行遍历，集合的属性和方法:

1. size 返回集合的元素个数。
2. add 增加一个新元素，返回当前集合。
3. delete 删除元素，返回boolean 值。
4. has 检测集合中是否包含某个元素，返回boolean值。
5. clear 清空数组。

声明：

运行结果：
方法：

运行结果：
应用：

定义一个数组：

1. 数组去重：

2. 交集：

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

运行结果：

14.Map：

  ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map也实现了iterator 接口，所以可以使用[扩展运算符」和[for…of…]进行遍历。Map的属性和方法:

1. size 返回Map的元素个数。
2. set 增加一个新元素，返回当前Map。
3. get 返回键名对象的键值。
4. has 检测Map中是否包含某个元素，返回boolean值。
5. clear 清空集合，返回undefined。

例如（声明）：

运行结果：

15.class类：

  ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:

1. class 声明类。
2. constructor 定义构造函数初始化。
3. extends。继承父类。
4. super 调用父级构造方法。
5. static定义静态方法和属性。
6. 父类方法可以重写。

ES5构造实例化对象写法：

运行结果：

ES6 class类定义：

运行结果：

静态属性：

  若有 static 定义的属性和方法只属于类，不属于实例对象：

运行结果：

构造函数继承：

运行结果：

类继承：

运行结果：

16. 数值扩展

1. 二进制和八进制
2. Number. isFinite检测-一个数值是否为有限数。
3. Number .isNaN 检测一个数值是否为 NaN。
4. Number.parseInt Number.parseFloat字 符串转整数。
5. Number. isInteger判断一个 数是否为整数。
6. Math. trunc 将数字的小数部分抹掉。
7. Math.sign判断一个数到底为正数负数还是零。

这个就不细写，用到哪个百度就好~

17.对象方法扩展：

Object.is()判断两个数值是否相等：

运行结果：
Object.assign对象合并

放入两个对象就行。

18.模块：

什么是模块?
当一个js文件可以独立完成一个功能的时候，这个js文件就是一个模块。
当一个多个.js文件共同完成一个功能的时候，这个些js文件就是一个模块。
模块就是module (模块的意思)。

1. includes（）：

includes方法检测数组是否包含某个元素，返回布尔类型值。

运行结果：

2.指数操作符：

指数运算符 可以快速实现次方运算，与Math.pow方法结果一样：

运行结果：

1.async 与 await：

async与await使用请点击链接看该文章的第十一与第十二点与第十三点~

或者查看该文章的第十一与第十二点与第十三点:https://bbs.huaweicloud.com/blogs/

2. 对象方法扩展：

Object.keys（）获取对象所有的键：

运行结果：

Object.values（）获取对象所有的值：

运行结果：

Object.entries（）获取对象所有的键与值：
配合Map（）使用更佳：

运行结果：

对象属性描述对象：
Object.getOwnPropertyDescriptors();

运行结果：

1.对象展开：

  Rest参数与spread 扩展运算符在ES6 中已经引入，不过ES6 中只针对于数组，在ES9中为对象提供了像数组一样的rest参数和扩展运算符。

如下：

运行结果：

应用：

合并几个对象里的属性：

运行结果：

1.Object.fromEntries()

  Object.fromEntries() 方法接收一个键值对的列表参数，并返回一个带有这些键值对的新对象。

传入二维数组形式：

看结果：

传入Map形式：

结果：

2.trimStart()与trimEnd()：

trimStart与trimEnd方法。
trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。
trimEnd()方法从字符串末尾删除空格。trimRight()是此方法的别名。

运行：

3.flat与flatMap：

运行：

  好家伙终于到ES11了。一杯茶搞定看来还是有点玄呀。

1.私有属性：

  在类里的私有属性前加个#号。就是说在这个类外部查找不到私有属性，只能在这个类的内部，来找到这个私有属性。

结果：

2.Promise.allSettled()：

运行：

3.matchAll() ：

  matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。

4.可选链操作符

  可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

5.BigInt:

  BigInt 是一种内置对象，它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
  可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ，如：10n，或者调用函数BigInt()。
  主要运用于大数值的运算。

结果：

6.globalThis：

  全局属性 globalThis 包含全局的 this 值，类似于全局对象（global object。意思就是不管如何，它始终指向全局对象。

2333，一杯茶到这也该喝完了~

其它文章：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~

版权声明：

本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。

本文网址：https://www.mushiming.com/mjsbk/1220.html