ECMAScript 6
ES6 全称ECMAScript 6 也叫ECMAScript2015
ES6的主要技术
1、变量、常量
2、取值赋值、解构
3、运算符的扩展、展开运算符、指数运算符
4、字符串的扩展
5、数组的扩展
6、函数的扩展
7、Set单值集合
8、Map键值对集合
9、对象的扩展
10、生成器和迭代器与迭代器接口
11、反射Reflect
12、代理Proxy
13、Promise异步处理、async与await（ES7）
14、ES6的模块化开发ESModule
15、CommonJS模块化
let定义变量
之前我们在ES5里面，我们定义变量使用的是var关键字，这个关键字有几个特点
1、var 没有数据类型
2、var 是有一个建立阶段
3、var 是没有作用域的，它要通过函数才能形成作用域
var a = 1; //没有数据类型的，所以任何类型的数据都可以赋值
//var没有作用域
{
var a = "哈哈"
}
console.log(a);
//var有一个建立阶段
console.log(c);
var c = 123;
var定义的变量是不够严谨的
ES6推出了let用于定义变量
1、let定义的变量也没有数据类型
2、let没有建立阶段，必须先定义再使用
3、let定义的变量是有作用域的，以大括号作为作用域
暂时性死区
let定义变量是有作用域的，并且不能再定义之前调用
let a = "hello";
{
console.log(a); //这里是没有问题的，因为内部的可以调用外部的变量
}
let b = "world";
{
console.log(b); //这里就形成了一个暂时性死区，b变量调不出来
let b = "hello";
}
const常量
常量里面的数据是不能改变的，比如，Math.PI
const关键字声明常量，它具备上面的let的所有特点，同时不能改变值
const a = "hahaha";
a = "hehehehe"; //报错
const声明的常量锁栈不锁堆
首先，我们先要知道内存中的数据结构分为 栈、堆、表、链
如果const声明的常量里面保存的是一个引用数据，那么根据锁栈不锁堆的原则，我们是可以改变数据中的属性值的，但是无法覆盖之前的整个数据
const常量定义的时候一定记得初始化，不然没有任何意义
let与const的闭包特性
var btn = document.querySelectorAll("button");
for(var i = 0; i < btn.length;i++){
btn[i].addEventListener("click",function(){
console.log(i);
})
}
ES5闭包解决
for(var i = 0; i < btn.length;i++){
btn[i].addEventListener("click",(function(j){
var j = i;
return function(){
console.log(j)
}
})(i))
}
ES6闭包解决
var btn = document.querySelectorAll("button");
for(let i = 0; i < btn.length;i++){
btn[i].addEventListener("click",function(){
console.log(i);
})
}
解构
一种特殊的取值赋值的方式
解构取值：
1、数组解构取值
var arr = ["张三","李四"];
// arr[0];
// arr[1];
let [a,b] = arr;
console.log(a);
console.log(b);
对于复杂的数组可以实现深度解构
var arr = ["张三","李四",["王五","赵六"]];
// arr[0];
// arr[1];
let [a,b,[c,d]] = arr;
console.log(a);
console.log(b);
console.log(c);
console.log(d);
解构实现变量置换
let a = 10;
let b = 20;
[a,b] = [b,a];
console.log(a,b);
对象的解构取值
var userInfo = {
userName:"张三",
age:19,
sex:"男"
}
let {userName,age,sex} = userInfo;
解构赋值
let userName = "张三";
let age = 18;
let userInfo = {
userName,
age
}
展开运算符
在ES6里面，新增了展开运算符，所有实现了Iterable接口的都可以使用展开运算符，目前来讲在系统中ES里面实现了这个接口的数据如下
1、数组
2、NodeList
3、HTMLCollection
4、Set
5、Map
6、arguments
7、字符串
展开运算符使用 … 来完成运算
var arr = [1,2,3,4,5,6,7];
console.log(...arr);
//展开运算获取最多的数字
var max1 = Math.max(...arr);
console.log(max1);
//数组的深拷贝
var a = 1;
var b;
b = a;
var newArr = [...arr];
//实现数组的合并
var arr1 = ["A","b","c","d"];
var arr2 = [...arr,...arr1];
let obj = {
userName:"张三",
age:18
}
let obj1 = {
hobby:"sleep"
}
//Object.assgin()
//实现对象的合并
let obj2 = {
...obj,
...obj1
}
字符串扩展
模板字符串，模板字符串自带格式，你格式什么样子打印出来就是什么样子
var str = `亲爱的张三：
你好！
恭喜你，已中本公司大奖，价值9999元的大礼包直接抗回家！
你只需要缴纳1999元的保证金就可以领取大奖
电话：1234566789
联系人：李四
XXX公司
XXXX年XX月XX日`
console.log(str);
模板字符串另外一个特点可以快速实现字符串拼接
let nickName = "张三";
let tel = 110;
let connectPerson = "李四"
let company = "画大饼公司"
var str = `亲爱的${nickName}：
你好！
恭喜你，已中本公司大奖，价值9999元的大礼包直接抗回家！
你只需要缴纳1999元的保证金就可以领取大奖
电话：${tel}
联系人：${connectPerson}
${company}公司
XXXX年XX月XX日`
console.log(str);
模板字符串内部可以使用 ${ } 在大括号里面可以写任意的JS代码
function abc(){
console.log("haha")
}
abc`` //可以替代函数调用时使用的()
字符串扩展方法
1、include（） 判断当前字符串中是否包含某一个字符串，以前可以使用indexOf方法
2、repeat() 生成一个重复字符串
3、trimStart() / trimEnd（） 去除开始与结束的空格
数组的扩展方法
1、Array.of()
声明数组的方法，它可以解决一个问题 new Array（） 所存在的问题
var arr = new Array(2); //代表这个数组的长度是2
var arr1 = Array.of(2);
2、Array.from() 把类数组转成数组
var lis = document.querySelectorAll("li");
let arr = Array.from(lis);
3、fill() 填充数组的方法
参数1：需要填充的数据
参数2：需要从索引几开始填充
参数3：填充到索引几
4、flat（steps）拍平一个多维数组
以前我们需要通过递归+遍历，现在有这个方法就简单多了
参数steps：表示拍平到第几个维度，也可以传入Infinity，不管几维都给拍平
5、find() 在数组中查找一个元素，如果找到返回找到的第一个元素，如果找不到返回undefined
let list = [
{
age:18
userName:"张三",
},
{
userName:"李四",
age:20
},
{
userName:"王五",
age:21
}
]
let obj = list.find(function(item,index,_arr){
//返回后面可以写一个匹配条件
return item.userName == "张三"
})
6、findIndex() 查找某一个元素的索引，这个方法的用法和上面find一样
for…of遍历
of的遍历与in的遍历是相同的，但是for…in是一个有序遍历(有索引的时候依靠索引遍历)，而for…of是一个无序遍历（遍历的时候不需要索引）
for(var i of list){
console.log(i);
}
注意：
for…of是基于属性值来遍历，所以并不是所有的对象都可以用它来遍历，如果要使用for…of来遍历，则这个对象必须要实现Iterable接口
Set单值集合
Set是ES6中新增的一种数据结构，它是一个单值集合，没有属性名（没有索引，没有key），并且是一个不重合的集合
Set创建
let s1 = new Set();
let s2 = new Set(["a","b","c","d"]);
let s3 = new Set(["a","b","a","c","d"])
Set集合方法
1、add() 给集合添加元素
s3.add("haha").add("hehe")
2、delete() 向Set集合中删除一个元素，返回布尔值
3、has() 判断set集合中有没有这个元素，返回布尔值
4、size属性，表示当前set集合的元素个数
5、clear() 清空set集合
6、values() 它是一个生成器方法，返回当前set集合中的迭代器
7、keys（）和values方法一样，但是set没有键，所以返回的依然是values的结果
let arr1 = [1,2,3,4,5,5,6]
let s1 = new Set();
let s2 = new Set(["a","b","c","d"]);
let s3 = new Set(["a","b","a","c","d"])
let s4 = new Set(arr1)
for(let i of s3){
console.log(i);
}
//将set集合的数据转换成数组的数据，来进行调用，同时还可以达到去重的操作
let arr = [...s1];
Map键值对集合
map是键值对形式的一个储存，它结合set的特点（储存速度快），也解决了set集合取值慢的特性
map集合当中的键不允许重复的，但是值可以
let m1 = new Map([
["a","张三"],
["b","李四"],
["c","王五"],
[3,{
userName:"哈哈"
}],
[4,function(){
console.log("hello")
}]
])
1、键不能重复，值可以
2、键与值可以是任意数据类型
Map方法
1、size属性
2、set（key,value）向当前map集合新增元素
3、get（key）通过一个键获取map集合当中的一个值
4、delete() 向Map集合中删除一个元素，返回布尔值
5、clear() 清空Map集合
6、values() 它是一个生成器方法，返回当前Map集合中的迭代器
7、keys（）生成器方法，返回当前map集合的key-value的集合
Map遍历
for(let i [k,v] of m1){
console.log(k,v)
}
函数扩展
之前在ES5中我们学习了哪些函数
- 递归函数
- 回调函数
- 闭包函数
- 匿名函数
- 构造函数
- 普通函数
- 立即执行函数
以上是我们在ES5中接触和学习到函数形式，但是它们本质上来讲没有区别，之所以有那么多种叫法完全出于调用方式的不同
无构造函数的函数
官方叫法成员函数，属性函数
在之前的ES5当中，所有通过function定义的东西都叫函数，而所以通过function声明的函数都具备构造函数的特点，也就是可以被new调用
let obj = {
name:"haha",
sayHello:function(){
console.log("hello")
}
}
obj.sayHello(); //普通调用
new obj.sayHello(); //构造函数调用
在上面的代码中，我们可以看到sayHello方法本是obj对象的，它就应该通过obj.sayHello() 来调用，而不应该用new来调用
上面这种情况就会产生一些不必要的歧义，ES6就改变了这种函数的定义方式，直接抛弃了关键字function
let obj = {
name:"haha",
sayHello(){
console.log("hello")
}
}
obj.sayHello(); //普通调用
new obj.sayHello(); //报错
箭头函数
抛弃了function关键字来声明的一个函数声明方式
//无参箭头函数
const sayHello1 = () => {
console.log("hello");
}
//有一个参数的箭头函数
const sayHello2 = userName => {
console.log(userName);
}
//有多个参数的箭头函数
const sayHello2 = (userName,age) => {
console.log(userName,age);
}
//箭头函数的返回值
const a = () => {
return "hello"
}
//如果只有一句话要执行，可以省略大括号
const sayHello2 = (userName,age) => console.log(userName,age);
//省略return关键字返回数据
const b = (x,y) => x + y
省略return，举例：
let newArr = arr.filter(item => item % 2 == 0)
箭头函数的注意事项：
1、箭头函数不具备构造函数的特点，不能用new调用
2、箭头函数是没有arguments
3、箭头函数内部没有this，如果写了this它绑定的是外边的this
ES6的函数参数
函数参数的默认值
之前我们声明函数可以放置参数
function sayHello(userName,age){
age = age || 18;
console.log(age);
}
在上面的代码种，我们可以看到，如果要设置一个参数的默认值，我们需要使用逻辑运算在函数内部进行一个计算才行，但是ES6可以直接设置参数的默认值
function sayHello(userName,age=18){
console.log(age);
}
多个参数也行
const sayHello = (userName="张三",age=18) => {
console.log(age);
}
函数的剩余参数
在ES6里面，我们的箭头函数没有arguments，但是我们向实现类似于实参列表的功能怎么办？
const sayHello = (userName,hobby) => {
console.log(`大家好，我叫${userName}`);
console.log(`我的爱好是${hobby}`)
}
sayHello("张三","看书","睡觉")
代码分析：
上面的代码我们实现了打印用户爱好的功能，但是如果有多个爱好怎么办？
这里使用剩余参数
const sayHello = (userName,...hobby) => {
console.log(`大家好，我叫${userName}`);
console.log(`我的爱好是${hobby.join("-")}`)
}
sayHello("张三","看书","睡觉","打游戏","吃饭")
简单来说，剩余参数就是利用展开运算符在参数中声明了一个没有长度的数组
class关键字
在上面的函数扩展当中，无论是新增的成员函数还是箭头函数，都不能使用构造函数的new去调用了，那么如果我们要在ES6的新语法中定义一个构造函数怎么办？ES6推出了class关键字
class Student{
//constructor是在new调用的一瞬间，自动执行
constructor(userName,age,sex){
this.userName = userName;
this.age = age;
this.sex = sex;
}
sayHello(){
console.log(this.userName)
}
}
let stu1 = new Student("张三",20,"男");
let stu2 = new Student("李四",18,"女")
class里面的访问器属性
在ES6中访问器属性的功能得到的了扩展
class Person {
constructor(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
}
userName(){
return this.firstName + this.lastName;
}
}
let p1 = new Person("张","三");
console.log(p1.userName())
上面的代码，有个问题，我们的userName表现出来的还是一个方法，不是一个属性
class Person {
constructor(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
}
get userName(){
return this.firstName + this.lastName;
}
set userName(v){
this.firstName = v[0];
this.lastName = v.slice(1)
}
}
let p1 = new Person("张","三");
分析：
get / set 共同修改了访问器属性，get在取值的时候自动调用，set在赋值的时候自动调用，set的参数就赋的值
let obj = {
firstName:"张",
lastName:"三",
get userName(){
return this.firstName + this.lastName;
}
set userName(v){
this.firstName = v[0];
this.lastName = v.slice(1)
}
}
class里面的关键static
class Student{
//constructor是在new调用的一瞬间，自动执行
constructor(userName,age,sex){
this.userName = userName;
this.age = age;
this.sex = sex;
}
static sayHello(){
console.log(this.userName)
}
}
代码分析：
对于class里面的普通方法，我们需要先new一个对象出来，然后通过这个对象来调用里面的方法
对于class里面的静态方法，我们可以直接使用构造函数名来调用
静态的方法不能使用非静态的属性和方法
extends关键字
这个是通过extends关键字来直接实现class的继承
class Person{
sayHello(){
console.log("我是一个人")
}
}
class Student extends Person {
study(){
console.log("我在学习")
}
}
let s1 = new Student();
分析：
上面的代码中，我们让Student继承自Person，同时两个构造函数内部都没有参数，所以可以把构造器省略掉
class Person{
constructor(userName,age){
this.userName = userName;
this.age = age;
}
sayHello(){
console.log("我是一个人")
}
}
class Student extends Person {
constructor(userName,age,sex){
super(userName,age);
this.sex = sex;
}
study(){
console.log("我在学习")
}
}
let s1 = new Student("张三",20,"男");
代码分析：
如果要构造函数接收参数，则构造器一定要手写，写的时候注意，super一定要先写出来，this要在super后面
静态继承
之前我们说过，class里面除了普通属性和方法之外，还有static静态属性和方法，静态的是否可以被继承？
class Person{
constructor(userName,age){
this.userName = userName;
this.age = age;
}
static hobby = "睡觉";
static sayHello(){
console.log("我是一个人")
}
}
class Student extends Person {
constructor(userName,age,sex){
super(userName,age);
this.sex = sex;
}
study(){
console.log("我在学习")
}
}
let s1 = new Student("张三",20,"男");
代码分析：
1、静态方法和属性是可以被继承的
2、静态与非静态之间还是隔离的，就算被继承了也是隔离的
3、静态方法可以调用静态属性
方法的重载override
class Person{
constructor(userName,age){
this.userName = userName;
this.age = age;
}
static hobby = "睡觉";
static sayHello(){
console.log("我是一个人")
}
abc(){
console.log("Person")
}
}
class Student extends Person {
constructor(userName,age,sex){
super(userName,age);
this.sex = sex;
}
study(){
console.log("我在学习")
}
abc(){
console.log("Student");
}
parentAbc(){
super.abc();
}
}
let s1 = new Student("张三",20,"男");
代码分析：
1、当父级类的方法满足不了子类的要求的时候，我们可以考虑重写方法
2、重写只需要在子类当中建立一个同名的方法即可文章来源：https://www.toymoban.com/news/detail-792710.html
3、在重写子方法的时候，如果要调用父级的同名方法可以使用super指向父级调用文章来源地址https://www.toymoban.com/news/detail-792710.html
到了这里，关于ECMAScript 6的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
