ES6新特性简介

淩亂°似流年 2021-07-25 23:43 498阅读 0赞

# ES6介绍 #

ES6(全称ECMAScript 6)是于2015年6月正式发布的javascript语言的标准，也叫ECMAScript 2015(ES2015)。它的目标是使得Javascript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。注意：ES6不兼容IE浏览器。

VUE/React/node现在都是用ES6语法来写，所以在学习前端框架之前要先学习一下ES6。

## let 与 var 的区别 ##

#### 1.作用域不一样 ####

var来声明变量，只有函数作用域和全局作用域，没有块级作用域，也就是说可以在代码块\{\}外部使用。  
而let可以实现块级作用域，只能在代码块\{\}内有效，在\{\}之外不能访问。

#### 2.let没有变量提升 ####

ES6明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，成为“暂时性死区”temporal dead zone,简称TDZ。

#### 3.let变量不能重复声明 ####

之前用var定义变量，在多人开发一个项目时，比如都定义了一个变量a，但各自用途不同，后面定义的a会把前面定义的覆盖掉，而用let就能解决这个问题。

#### 4.循环作用域 ####

在for循环中，不仅\{\}会生成块级作用域，（）也会生成块级作用域，（）块级作用域是\{\}块级作用域的父级作用域，var声明的变量是全局的，包括循环体内和循环体外，let声明的变量作用域只在循环体内，循环体外的变量不受影响。

## const常量的声明 ##

const声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错，常量的命名规范：全部大写。对于引用类型保证的不是变量的值不变，二三十保证变量指向的内存地址所报错的数据不允许改变。

## 模板字面量之多行字符串 ##

模板字面量是增强版的字符串，它用反引号\`（按键1左边的按键）标识。  
在ES6出现之前，咱们在做开发，字符串里面是不支持换行的，这样咱们在做程序的时候可读性很差。ES5字符串换行的方式为：

1.  使用反斜杠\\
2.  使用拼接字符串

## 模板字面量之变量占位符 ##

变量占位符可以看做是javascript字符串的升级版，可以将JS表达式嵌入到模板字面量中。

## 默认参数 ##

在ES5中声明函数参数是不能有默认值的，但是在ES6中是可以写默认值的。

## 扩展运算符三个点的使用 ##

扩展运算符理解起来并不难，其作用就是用于取出对象中的所有可遍历的属性，拷贝合并到当前对象之中。可以实现拷贝对象/合并对象/拷贝数组/合并数组。

## Object.assign对象的拷贝与合并 ##

Object.assign()方法用于将所有可枚举属性的值从一个或者多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性会将被源对象中的属性覆盖。后面的源对象的属性将类似的覆盖前面的源对象的属性。和扩展运算符一样可以实现对象的浅拷贝。Object.assign()第一个参数是目标对象，后面的参数是源对象。  
常见用途：

1.  为对象添加属性
2.  为对象添加方法

## 对象字面量语法扩展 ##

对象字面量语法扩展包括：属性初始值的简写/对象方法的简写/计算属性名等。

## 解构赋值 ##

解构赋值语法是一种javascript表达式，通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

## 模块化 ##

#### 模块化概念 ####

在ES6之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库，如requireJS与seaJS,requireJS是AMD规范，seaJS是CMD规范。  
ES6现已支持模块化开发规范ES Module,让javascript支持原生模块化开发。ES Module把一个文件当作一个模块，每个模块有自己独立作用域，核心点就是模块的导入(import)与导出（export）。

#### 模块化的好处 ####

1.  避免变量污染，命名冲突
2.  提高代码复用率
3.  提高维护性
4.  可以提升执行效率
5.  避免引入时的层层依赖

## 箭头函数 ##

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

## promise ##

#### promise是为了解决回调地狱 ####

promise就是一个对象，用来传递异步操作的消息，可以解决回调函数的嵌套问题，也就是所谓的“回调地狱”。咱先看一下“回调地狱”的案例。

ajax("https://www.lucklnk.com","get",function(){ 
    	ajax("http://www.lucklnk.com","get",function(){ 
    		ajax("http://www.lucklnk.com","get",function(){ 
    		})
    	})
    })

#### promise的三种状态 ####

一个promise有以下的几种状态：

1.  pending:初始化状态，既不是成功，也不是失败的状态。
2.  fulfilled:意味着操作成功完成。
3.  rejected:意味着操作失败。  
    如果异步操作成功，resolve方法将promise的状态，从“未完成”变为“成功”（即从pending变为fulfilled）。  
    如果异步操作失败，reject方法将Promise对象的状态，从“未完成”变为“失败”（即从pending变为rejected）。  
    如果执行resolve方法，对应的会调用then方法，then方法传入一个函数作为参数，该函数的参数的值就是resolve方法的实参。  
    如果执行reject方法，对应的会调用catch方法，catch方法传入一个函数作为参数，该函数的参数的值就是reject方法的实参。

## async/await/promise让异步变成同步 ##

promise可以解决“回调地狱”，但是并不完美，如果接口是链式关联的，那么promise的then()方法里卖弄其实也是一个小的回调，维护起来还不是很方便。  
这时候ES7的async和await出现了，async表示异步，而await表示等待。所以应该很好理解，async用于声明一个是异步函数，而await用于等待一个额异步方法执行完成。

## class类的使用 ##

javascript语言的传统方法是通过构造函数，定义并生成新对象，function既是对象，对象既是fucntion,没有class的概念。ES6提供了更接近传统语言的写法，比如JAVA/PHP等后端语言，引入了Class(类)这个概念，作为对象的模板，通过class关键字，可以定义类。可以实现：单例模式/访问器属性/静态方法/extends继承