随着google和firfox以及node6.0对ES6的支持,ES6语法的定稿使它越来越受到关注,尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析,为后续的React知识点做好铺垫,主要内容如下:
import, export:导入,输出
as:修改变量名
* :模块整体加载**
Map的使用方式
Set的使用方式
新增的核心库
1. default, rest: 函数默认值,变量展开
1.1 默认值操作
1.2 变量展开
rest是变量展开:
2. import, export:导入,输出
历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import, 但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。
es6中新增了两个命令export和import,export命令用于规定es6模块的对外接口,import 命令用于输入其他es6模块化提供的功能。一个es6模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个 变量, 就必须使用export关键字输出该变量。下面是一个JS文件,里面使用export命令输出变量。
2.1 index.js书写
如下是三种模块化写法的对比
requireJS 的使用方式
Commonjs 的写法
ES6的写法
2.2 content.js书写
如下是三种模块化写法的对比
requireJS 的使用方式
Commonjs 的写法
ES6的写法
3. *:模块整体加载 && as:修改变量名
修改变量名使用as;
除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。
4. Map的使用方法
Map的size属性,获取Map数据格式的内容个数,其方法如下:
has方法,判断Map数据中是否拥有某条属性,return 布尔值;
方法使用如下:
Map支持for…of语句
支持数组\字符串
5. Set的使用方法
Set类似数组,成员都是唯一,不存在重复值:
Set的应用:数组去重;
has方法:判断成员是否属于当前Set,返回布尔值;
方法使用:
6. 新增核心库
增加了Number、Math、Array等方法,使得原本的JS逻辑更加清晰简单,如下: