ES6那些可能没留意的特性

1.Module

Module 是 ES6 的新特性,是语言层面对模块化的支持。


注:与之前模块加载机制不同,Module 是动态的加载,导入的是变量的 只读引用 ,而不是拷贝

2.Symbol

特点:
symbol 是一个 “新” 的 基础数据类型 ;从 ES6 起,JavaScript 的 基础数据类型 变为: string, number, boolean, null, undefined, symbol
symbol 可以用作 Object 的 key
symbol 存在全局作用域,利用 Symbol.for(key) 方法,可以创建(全局作用域无指定键)或获取全局作用域内的 symbol ;利用 Symbol.keyFor(sym) 方法,可以获取指定 symbol 的键
JavaScript 内部使用了很多内置 symbol ,作为特殊的键,来实现一些内部功能;例如 Symbol.iterator 用于标示对象的迭代器
例子如下:


3.terator和For..Of

遍历器(Iterator)它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。
Iterator的作用有三个:
一是为各种数据结构,提供一个统一的、简便的访问接口;
二是使得数据结构的成员能够按某种次序排列;
三是ES6创造了一种新的遍历命令for...of循环,Iterator接口主要供for...of消费。
请看例子:



String, Array, Map, Set等是原生可迭代对象,因为他们都在原型(prototype)对象中实现了 Symbol.iterator 键对应的方法
for…of 是对象迭代器的遍历,而 for…in 是对象中 可枚举 值的遍历

4.Map和set

Object本质上是键值对的集合(Hash结构),但是传统上只能用字符串当作键。
Map类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
Set它类似于数组,但是成员的值都是唯一的,没有重复的值。
继续看例子:


5.Proxy和Reflect

元编程
元编程是指的是开发人员对 “语言本身进行编程”。一般是编程语言暴露了一些 API,供开发人员来操作语言本身的某些特性。ES6 两个新特性 Proxy 和 Reflect 是 JavaScript 关于对象元编程能力的扩展。
Proxy 可以 “代理” 对象的原生行为,替换为执行自定义行为。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。继续看例子:


注:Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法,完成默认行为,作为修改行为的基础。也就是说,不管Proxy怎么修改默认行为,你总可以在Reflect上获取默认行为。

6.Promise,Generator,Async-Await

异步编程
在 ES6 之前,JavaScript 的异步编程都跳不出回调函数这个方式。回调函数方式使用非常简单,在简单异步任务调用时候没有任何问题,但如果出现复杂的异步任务场景时,就显得力不从心了,最主要的问题就是 多层回调函数的嵌套会导致代码的横向发展,难以维护;ES6 带来了两个新特性来解决异步编程的难题。


6.1 Promise

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
Promise 是 ES6 的一个新特性,同为异步编程方式,它主要有如下几个特点:
1.本质还是回调函数
2.区分成功和失败的回调,省去嵌套在内层的判断逻辑
3.可以很轻松的完成回调函数模式到 Promise 模式的转化
4.代码由回调函数嵌套的横向扩展,变为链式调用的纵向扩展,易于理解和维护
5.Promise 虽然优势颇多,但是代码结构仍与同步代码区别较大
看例子:


6.2 Generator

1.Generator 从语法上,首先可以把它理解成,Generator 函数是一个状态机,封装了多个内部状态。
2.执行 Generator 函数会返回一个遍历器对象,也就是说, Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。
3.形式上,有两个特征。一是,function关键字与函数名之间有一个星号*;二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是“产出”)。


特点:
1.可以通过 yield 关键字,终止执行并返回(内到外)
2.可以通过 next(val) 方法调用重新唤醒,继续执行(外回内)
3.运行时(包括挂起态),共享局部变量

6.3 Async-Await

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。
async 函数是什么?
一句话,它就是 Generator 函数的语法糖。
个人认为它将是 JavaScript 目前支持异步编程最好的方式
看看下面的例子:


参考资料: es6.ruanyifeng.com/

Alone
2018-05-16


猜你喜欢

转载自juejin.im/post/5afb935c6fb9a07aac24a031