JavaScript高级-ES6

一、ECMAScript简介

·ECMA（European Computer Manufactures Association）中文名称为欧洲计算机制造商协会
·ECMAScript是由ECMA国际通过ECMA-262标准化的脚本程序设计语言
·Ecma国际制定了许多标准，而ECMA-262只是其中一个，所有标准列表查看
http://www.ecma-international.org/publications/standards/Standard.htm  

二、ECMA-262历史

第一版	1997年	制定了语言的基本语法
第二版	1998年	较小改动
第三版	1999年	引入正则、异常处理、格式化输出、IE开始支持
第四版	2007年	过于激进，未发布
第五版	2009年	引入严格模式。JSON，扩展对象、数组、原型、字符串、日期方法
第六版	2015年	模块化、面向对象法。Promise、箭头函数、let、const、数组解构赋值等
第七版	2016年	幂运算符、数组扩展、Async/await关键字
第八版	2017年	Async/await 、字符串扩展
第九版	2018年	对象解构赋值、正则扩展
第十版	2019年	扩展对象、数组方法
ES.next	动态指向下一个 版本

注：从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1

三、为什么要学习ES6

 ·ES6的版本变动内容最多，具有里程碑意义
·ES6加入许多新的语法特性，编程实现更简单、高效
·ES6是前段发展趋势，就业必备技能

 四、let关键字

let关键字用来声明变量，使用let声明的变量有几个特点：
·不允许重复声明
·块级作用域
·不存在变量提升
·不影响作用域链
应用场景：以后声明变量使用 let 就对了
例如：

五、const关键字

 const关键字用来声明变量，const声明有以下特点
·声明必须赋初始值
`标识符一般大写
·不允许重复声明
·块级作用域
注意: 对象属性修改和数组元素变化不会触发 const 错误 应用场景：声明对象、数组类型、以及常量时使用 const，非对象类型声明选择 let
例如：

var关键字
 var关键字用来声明变量，var声明有以下特点
1.var变量会挂载在Window上
2.var变量声明存在变量提升
3.var变量可以声明同名变量
例如：

六 、变量的解构赋值

ES6允许按照一定模式，从数组和对象中提取值，这被称为解构赋值
例如：

注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式
 

七、 模板字符串

模板字符串（template string）是增强版的字符串，用反引导（`）标识，特点：
·字符串中可以出现换行符
·可以使用$(xxx)形式输出变量
例如：

注意：当遇到字符串与变量拼接的情况使用模板字符串
 

 八、简化对象写法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

注意：对象简写形式简化了代码，所以以后用简写就对了
 

九、箭头函数

 ES6允许使用[箭头]（=>）定义函数
箭头函数的注意点：
·如果形参只有一个，则括号可以省略
·函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
·箭头函数this指向声明时所载作用域下this的值
·箭头函数不能作为构造函数实例化
·不能使用arguments
箭头函数的基本使用：

箭头函数的参数变化

箭头函数的方法体变化
 

箭头函数的this

注意：箭头函数不会更改 this 指向，用来指定回调函数会非常合适
 

十、rest参数 

ES6引入rest参数，用于获取函数的实参，用来代替arguments

注意： rest 参数非常适合不定个数参数函数的场景
 

十一、spread扩展运算符

 扩展运算符（spread）也是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包
例如：数组

对象

十二、Promise

·promise是ES6引入的异步编程的新解决方案
·语法上promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
·promise构造函数：promise（excutor）{ }
·promise.prototype.then方法
·promise.prototype.catch方法
·promise.prototype.all
例如：为什么有promise（使用函数封装的方法得到上一步请求的数据）

例如：为什么有promise（ajax套嵌—回调地狱）

例如：promise的基本使用

例如:promise的连续使用

例如：promise改造函数封装的ajax请求

例如：promise封装jQueryAjax

 例如:promise封装原生Ajax

十三、 迭代器

什么是迭代器
  迭代器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。
ES6创造了一种新的遍历命令for....of循环，Iterator接口主要供for...of消费
原生具备iterator接口的数据(可用for of遍历)
        Array
        Arguments
        Set
        Map
        String
        NodeList
工作原理
        创建一个指针对象，指向当前数据结构的起始位置
        第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
        接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
        每调用 next 方法返回一个包含 value 和done 属性的对象
        注: 需要自定义遍历数据的时候，要想到迭代器
例如：

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    
    

set
 ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：
        size 返回集合的元素个数
        add 增加一个新元素，返回当前集合
        delete 删除元素，返回 boolean 值
        has 检测集合中是否包含某个元素，返回 boolean 值
        clear 清空集合，返回 undefined
 例如：

 Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和 『for…of…』进行遍历。Map 的属性和方法：
        size 返回 Map 的元素个数
        set 增加一个新元素，返回当前 Map
        get 返回键名对象的键值
        has 检测 Map 中是否包含某个元素，返回 boolean 值
        clear 清空集合，返回 undefined
例如：

十四、class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键 字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做 到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。知识点：
        class 声明类
        constructor 定义构造函数初始化
        extends 继承父类
        super 调用父级构造方法
        static 定义静态方法和属性
        父类方法可以重写
例如：

static修饰符

十五、模块化