React系列(四):ECMAScript6.0的使用(下)

随着google和firfox以及node6.0对ES6的支持,ES6语法的定稿使它越来越受到关注,尤其是react项目基本上都是用ES6来写的。本文主要就是对ES6基础语法做出解析,为后续的React知识点做好铺垫,主要内容如下:

default, rest: 函数默认值,变量展开

import, export:导入,输出

as:修改变量名

:模块整体加载**

Map的使用方式

Set的使用方式

新增的核心库

1. default, rest: 函数默认值,变量展开

1.1 默认值操作

ES5对于函数参数的默认值操作:


default是默认值,应用于函数传参个数不匹配时。

ES6中的函数参数默认值设定:


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数据格式的内容个数,其方法如下:

set方法,给Map设置一个属性;

get方法,获取Map数据格式中的某条属性;

has方法,判断Map数据中是否拥有某条属性,return 布尔值;

delete方法,删除Map数据格式中的某条属性;

clear方法,删除Map数据格式中的所有数据。

方法使用如下:

Map支持for…of语句

支持数组\字符串

5. Set的使用方法

Set类似数组,成员都是唯一,不存在重复值:

Set的应用:数组去重;

add方法,新增一个数据;

size属性,获取当前Set的长度;

has方法:判断成员是否属于当前Set,返回布尔值;

delete方法,删除Set中的某条属性。

方法使用:

支持添加方法add:

6. 新增核心库

增加了Number、Math、Array等方法,使得原本的JS逻辑更加清晰简单,如下:

总结

本文与上一篇文章都是对ES6语法的深入解读,旨在提供简化开发难度,使得JS逻辑、方法更简便。

使用到的代码文件可下载:链接:https://pan.baidu.com/s/1dGsYuyt 密码:6t3g

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • [TOC] 参考阮一峰的ECMAScript 6 入门参考深入浅出ES6 let和const let和const都...
    郭子web阅读 1,807评论 0 1
  • 一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6(亦称 ...
    一岁一枯荣_阅读 6,108评论 8 25
  • ECMAScript 6 入门这篇文章不错,下面的只是随手记。 块级作用域 能用let的地方,就不要用var,可以...
    松哥888阅读 782评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,845评论 18 139
  • 在萍乡市湘东区荷尧镇青云村有一位最美的乡村医生,为家乡父老解除病痛,他用最朴实的爱报答着他的父老乡亲。 他不但是一...
    赣西小城阅读 255评论 0 0