本文实例讲述了 ES6 新特性之解构、参数、模块和记号用法。分享给大家供大家参考,具体如下:
一、解构
解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子:
- //ES6
- let [x,y]=[1,2];//x=1,y=2
- //ES5
- var arr=[1,2];
- var x=arr[0];
- var y=arr[1];
使用这个语法,可以一次性给多个变量赋值。一个很好的附加用处是可以很简单的交换变量值:
- let x=1,y=2;
- [x,y]=[y,x];x=2 y=1
解构也可以用于对象,注意对象中必须存在的对应的键:
- let obj = {
- x: 1,
- y: 2
- };
- let {
- x,
- y
- } = obj; //a=1,b=1
或者
- let {
- x: a,
- y: b
- } = obj; //a=1,b=2
另一个有趣的模式是模拟多个返回值:
- function doSomething(){
- return [1,2];
- }
- let [x.y]=doSomething();//x=1.y=2
解构可以用来为参数对象赋默认值。通过对象字面量,可以模拟命名参数:
- function doSomething({
- y: 1,
- z: 0
- }) {
- console.log(y, z);
- }
- doSomething({
- y: 2
- })
二、参数
1、默认值
在 ES6 中,可以定义函数的参数默认值。语法如下:
- function doSomething(){
- return x*y;
- }
- doSomething(5);//10
- doSomethinf(5,undefined);//10
- doSomething(5,3);//15<br><br>//ES5中给参数赋默认值<br>function doSomething(x,y){<br>y=y===undefined?2:y;<br>return x*y;<br>}
传递 undefined 或不传参数时都会触发参数使用默认值。
2、REST 参数
前面我们已经学习了省略号操作符,剩余参数和它很类似,它同样是使用'...'语法,允许你把末尾的参数保存在数组中:
- funtion doSomething(x,...remaining){
- return x*rremaining.length;
- }
- dodSomething(5,0,0,0);//15
三、模块
在 ES6 的模块语法中,模块设计围绕 export 和 import 关键词,现在让我们看一个包含两个模块的例子:
- //lib/ath.js
- export
- function sum(x, y) {
- return x + y
- };
- export
- var pi = 3.14;
- //app.js
- import {
- sum,
- pi
- }
- form "lib/math.js";
- console.log(sum(pi, pi);
正如你所见,可以存在多个 export 声明,每个都要明确的指出输出值得类型。本例中的 import 声明使用一种语法,来明确定义被导入的内容,可以使用 * 通配符,结合 as 关键词给模块提供一个本地名称,把模块当成一个整体导入:
- //app.js
- import*as math form"lib/math.js";
- console.lgo(math.sum(math.pi,math.pi));
模块系统有一个 default 输出,它可以是一个函数,只需要提供一个本地名称就可以导入这个默认值:
- //lib/my-fn.js
- export
- default
- function() {
- console.log('echo echo);
- }
- //app.js
- import doSomething from 'lib / my - fn, js ';
- doSomething();
- '
请注意 import 声明是同步的,但是模块代码需在所有依赖加载完后才会运行
四、类
类的创建围绕 calss 和 constructor 关键词,以下是个简短的示例:
- class Vehicle{
- constructor(name){
- this.name=name;
- this.kind=''Vehicle";
- }
- getName(){
- return this.name;
- }
- };
- //Create an instance
- let myVehicle=new Vehicle('rocky');
注意类的定义不是一般的对象,因此,类的成员间没有逗号。创建一个类的对象时,需要使用 new 关键词,继承一个基类时,使用 extends:
- class Car extends Vehicle{
- constructor(name){
- super(name);
- this.kind='car';
- }
- }
- let myCar=new Car('bumpy');
- myCar.getName();//'bumpy';
- myCar instanceof Car;//true
- myCar instanceof Vehicle;//true
从衍生类中,你可以使用从任何构造函数或方法中使用 super 来获取它的基类:使用 super() 调用父类构造函数;调用其他成员。
五、记号
记号是一个新的原生数据的类型,像 Number 和 String 一样,你可以使用记号为对象属性创建唯一标示或创建唯一的常量。创建方法如下:
- const MY_CONSTANT=Symbol();
- let obj={};
- obj[MY_CONSTANT]=1;
注意通过记号产生的键值对不能通过 Object.getOwnPorpertyNames() 获得,在 for...in 遍历、Object.key()、JSON.stringify() 中均不可见,这是与基于字符串的键相反的,你可以通过 Object.getOenPropertySymbols() 获取一个对象的记号数组。记号与 const 配合很合适,因为它们都有不可改变的特性。
转译
现在浏览器对 ES6 的支持还不广泛,且个浏览器也各不相同,可能你写的代码在用户的浏览器中还不能完全解析,这就是我们为什么需要把代码转换成能在当前的任何浏览器中良好运行的旧版本 JavaScript(ES5),这种转换通常称为转译,我们必须要这么做,知道所有我们想兼容的浏览器都能运行 ES6 为止。转译的方法有很多种,包括 Bable、Traceur、TypeScript 等。
希望本文所述对大家 ECMAScript 程序设计有所帮助。
来源: http://www.jb51.net/article/110184.htm