ES6新特性总结

Posted on | In

本文对ES6新特性进行了总结记录，详情请见各大ES6教程（本文主要为菜鸟教程内容）

let与const**

ES6新增加了两个重要的关键字：let和const

let：声明的变量旨在let命令所在的代码块范围内有效

const：声明的变量是一个只读常量，一旦进行了声明，常量的值就不能改变

Symbol

在原有的数据类型基础（Number，String，Boolean，Object，null，undefined）上，ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，最大的用法使用来定义对象的唯一属性名。

Symbol不能使用new命令，可以接受一个字符串作为参数，用来显示在控制台或者作为字符串的时候使用

Reflect与Proxy

这两个是ES6为了操作对象引入的API

Proxy可以对目标对象的读取、函数调用等操作进行拦截，然后进行操作处理，它不直接操作对象，而是像代理模式，通过对象的代理对象进行操作，在进行这些操作时，可以添加一些需要的额外操作。

Reflect 可以用于获取目标对象的行为，它与 Object 类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与 Proxy 是对应的。

String

ES6 之前判断字符串是否包含子串，用 indexOf 方法，ES6 新增了子串的识别方法。

  • includes()：返回布尔值，判断是否找到参数字符串。
  • startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。
  • endsWith()：返回布尔值，判断参数字符串是否在原字符串的尾部。

以上三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。

对象

ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。

1
2
3
4
5
6
const age = 12;
const name = "Amy";
const person = {age, name};
person   //{age: 12, name: "Amy"}
//等同于
const person = {age: age, name: name}

Iterator

Iterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：

  • 迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。
  • 迭代器是用于遍历数据结构元素的指针（如数据库中的游标）

迭代的过程如下：

  • 通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置
  • 随后通过 next 方法进行向下迭代指向下一个位置， next 方法会返回当前位置的对象，对象包含了 value 和 done 两个属性， value 是当前属性的值， done 用于判断是否遍历结束
  • 当 done 为 true 时则遍历结束

class

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

模块

在 ES6 前， 实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库， 和基于 CMD 规范的模块化库）。

ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

特点

ES6 的模块化分为导出（export） 与导入（import）两个模块。

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。

模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。

每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。

每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取。

Generator 函数

ES6 新引入了 Generator 函数，可以通过 yield 关键字，把函数的执行流挂起，为改变执行流程提供了可能，从而为异步编程提供解决方案。

基本用法

Generator 有两个区分于普通函数的部分：

  • 一是在 function 后面，函数名之前有个 * ；
  • 函数内部有 yield 表达式。

其中 * 用来表示函数为 Generator 函数，yield 用来定义函数内部的状态。

async

async 是 ES7 才有的与异步操作有关的关键字，和 Promise ， Generator 有很大关联的。

0%