互联网WEB前端必备：ES6（ECMAScript 6）学习

大家好，欢迎来到IT知识分享网。

ES 6简介

由ECMA（欧洲计算机制造联合会 ）制定的标准

 标准被称为ECMAScript或ECMA 262

 http://www.ecma-international.org/publications/standards/Ecma-262.htm

 ES 6在2015年发布，又称为ES 2015

新特性

 var / let / const

 Arrow functions

 Template Strings

 Destructuring

 Iterables & Looping

 arguments（ Default / Spread / Rest）

ES 简介

 Classes

 Generators

 Collections （ Set / Map /

WeakSet / WeakMap）

 Proxy

 Promises

let

 用法类似于var

 声明的变量，只在let命令所在的代码块内有效

const

 用来声明常量

 一旦声明，常量的值就不能改变

 不可随意修改，否则会导致SyntaxError（语法错误）

 const声明变量后必须要赋值

 只在声明所在的块级作用域内有效

Arrow functions

 箭头函数

 ES6允许使用”箭头”（=>）定义函数。

 不支持 arguments

 函数体内的this对象，绑定定义时所在的对象，而不是使用时所在的对象。

 this对象的指向是可变的，但是在箭头函数中，它是固定的

 箭头函数可以让this指向固定化，这种特性很有利于封装回调函数

Template Strings

 模板字符串

 增强版的字符串，用反引号（`）标识

 大括号内部可以进行运算，以及引用对象属性。

参数Arguments

Default arguments

 函数参数的默认值

 定义了默认值的参数，必须是函数的尾部参数

 传入undefined，将触发该参数等于默认值，null 则没有这个效果

Rest参数

 ES6引入rest参数（…变量名）

 用于获取函数的多余参数，

 rest参数搭配的变量是一个数组

 rest参数之后不能再有其他参数

Spread

 扩展运算符

 近似rest参数的逆运算

 将一个数组，变为参数序列

解构Destructuring

数组的解构赋值

 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值

 不可对undefined或null进行解构

 解构赋值允许指定默认值。

 可用于具有Iterator接口数据结构

对象的解构赋值

 对象的属性没有次序，变量必须与属性同名，才能取到正确的值

 变量名与属性名不一致，需用冒号做匹配处理

Iterables & Looping

Iterator（遍历器）

 遍历器（Iterator）是一种接口规格，任何对象只要部署这个接口，就可以完成遍历操作。它的作用有两个，一是为各种数据结构，提供一个统一的、简便的接口，二是使得对象的属性能够按某种次序排列。在ES6中，遍历操作特指for…of循环，即Iterator接口主要供for…of循环使用。

 接口名 [Symbol.iterator]

for…of循环

 ES6中，一个对象只要部署了@@iterator方法，就被视为具有iterator接口，就可以用for…of循环遍历它的值。也就是说，for…of循环内部调用是原对象的 Symbol.iterator方法。

 for…of循环可以代替数组实例的

forEach方法

 普通的对象，for…of结构不能直接使用，会报错，必须部署了iterator接口后才能使用

Generator

 交出函数的执行权，暂停执行

 在function和函数名之间有一个*

 位置可以随意

 执行过程中遇到yield就停止

 调用函数不会立即执行，返回一个迭代器对象

 next方法，分阶段执行函数，返回当前阶段的信息（value表示yield后边的值，done表示是否执行完毕）

 可以接受参数

Classes

 class关键字

 在内部定义constructor和方法

 一个class只能有一个constructor，默认为constructor(){}

 实际上是通过prototype继承机制

 class的定义

 块作用域、不存在变量提升、使用严格模式

 如果有生成器方法，需要加*

 有get和set方法

 通过static创建静态方法

 通过extends实现继承

 在子类的构造器中必须在使用this之前调用super

 由父类创建对象

 如果没有super，需要返回对象

Collection

Set、Map、WeakSet、WeakMap

Set

 类似数组，但里边的值是唯一的

 对象比较的是引用，注意NaN是同一值

 Set中的值可以是任意的类型，包括数组、对象

 创建Set：let set = new Set()

 可以接受一个iterable对象（数组）

 添加值：set.add(value)，可链式调用

 查看某个值是否存在：set.has(value)，返回true和false

 删除某个值：set.delete(value)，返回true和false

 清空Set：set.clear()，无返回值

 size属性,查看当前包含多少个元素：set.size

 keys方法返回值得迭代器

 valuses方法返回值得迭代器：默认的迭代方法

 entries方法返回[value,value]迭代器：迭代器每次输出一个数组，包含相等的两个值

 forEach方法遍历

Map

 保存键值对，键是唯一的。

键的比较，NaN与NaN相同，其余使用===计算

 键可以是任何类型，包括对象和数组

和JavaScript Object不一样，不会将键转为字符串

 通过let map = new Map()创建

可以传递一个数组或者其他 iterable 对象，其元素或为键值对，或为两个元素的数组。

 size属性返回键值对的数量：map.size

 keys方法返回键名的迭代器

 values方法返回键值的迭代器

 entries方法返回所有成员的迭代器：默认遍历器接口

 forEach方法遍历所有的成员

WeakSet

和Set有着相似的API，但有些区别

 键名必须是对象（null除外）

 键名对象为弱引用，不影响垃圾回收机制

 没有size属性

 不能遍历

 没有clear方法清除所有值

WeakMap

和Map的API相似，但有些不同

 键名必须为对象（null除外）

 WeakMap键名所指对象不计入垃圾回收机制

 没有size属性

 不能遍历

 没有clear方法

Proxy和Reflect

Proxy

 功能：修改某些操作的默认行为

 let proxy = new Proxy(target, handler);

Promise

 异步编程

 有三种状态

pending、fulfilled、rejected

 Promise.prototype.then()

 Promise.prototype.catch()

 静态方法

Promise.all()、Promise.race()、Promise.resolve()、Promise.reject()

Math

ES 6中新增了一些Math的静态函数。

Math.sign – 方法用来判断一个数到底是正数、负数、还是零。

它会返回五种值。

· 参数为正数，返回+1；

· 参数为负数，返回-1；

· 参数为0，返回0；

· 参数为-0，返回-0

· 其他值，返回NaN。

Math.trunc – 方法用于去除一个数的小数部分，返回整数部分。

Math.cbrt – 方法用于计算一个数的立方根。∛‾value

Math.expm1 – 返回ex – 1，即Math.exp(x) – 1。

Math.log1p – 方法返回1 + x的自然对数，即Math.log(1 + x)。如果x小于-1，返回NaN。

Math.log10 返回以10为底的x的对数。如果x小于0，则返回NaN。

Math.log2 – 返回以2为底的x的对数。如果x小于0，则返回NaN。

Math.sinh – 返回x的双曲正弦

Math.cosh – 返回x的双曲余弦

Math.tanh – 返回x的双曲正切

Math.asinh –返回x的反双曲正弦

Math.acosh – 返回x的反双曲余弦

Math.atanh 返回x的反双曲正切

Math.hypot – 方法返回所有参数的平方和的平方根。

Math.clz32 – 方法返回一个数的32位无符号整数形式有多少个前导0。

Math.imul – 方法返回两个数以32位带符号整数形式相乘的结果，返回的也是一个32位的带符号整数。

Math.fround – 方法返回一个数的单精度浮点数形式。

Number

Number.isNaN：用来检查一个值是否为NaN，只有对于NaN才返回true，非NaN一律返回false。

Number.isFinite：用来检查一个数值是否为有限的，对于非数值一律返回false

Number.parseInt：等于全局方法parseInt()

Number.parseFloat：等于全局方法parseFloat()

Number.isInteger：用来判断一个值是否为整数。需要注意的是，在JavaScript内部，整数和浮点数是同样的储存方法，所以3和3.0被视为同一个值。

Number.EPSILON：新增一个极小的常量，用于浮点运算的精确处理

Number.MAX_SAFE_INTEGER：安全整数最大值

Number.MIN_SAFE_INTEGER：安全整数最小值

Number.isSafeInteger：是不是安全整数

Array

Array.from：方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）

Array.of ：方法用于将一组值，转换为数组。

Array.prototype.copyWithin：在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。

Array.prototype.fill：使用给定值，填充一个数组。

Array.prototype.find：用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。

Array.prototype.findIndex：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

Object

Object.assign ：方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。

Object.is ：判断两个对象是否一样，和===相似。但是NaN和NaN、+0和-0都返回true

String

String.prototype.startsWith：返回是否以某个字符串开始

String.prototype.endsWith：返回是否以某个字符串结尾

String.prototype.includes：返回字符串是否包含某个值

String.prototype.repeat：返回字符串重复N遍的值：’q’.repeat(2) //’’