ES6新特性之解构、参数、模块和记号用法示例

本文实例讲述了ES6新特性之解构、参数、模块和记号用法分享给大家供大家参考,具体如下:

一、解构

解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子:

rush:js;"> //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1];

使用这个语法,可以一次性给多个变量赋值。一个很好的附加用处是可以很简单的交换变量值:

rush:js;"> let x=1,y=2; [x,y]=[y,x];x=2 y=1

解构也可以用于对象,注意对象中必须存在的对应的键:

rush:js;"> let obj={x:1,y:2}; let {x,y}=obj;//a=1,b=1

或者

rush:js;"> let {x:a,y:b}=obj;//a=1,b=2

一个有趣的模式是模拟多个返回值:

rush:js;"> function doSomething(){ return [1,2]; } let [x.y]=doSomething();//x=1.y=2

解构可以用来为参数对象赋认值。通过对象字面量,可以模拟命名参数:

rush:js;"> function doSomething({y:1,z:0}){ console.log(y,z); } doSomething({y:2})

二、参数

1、认值

在ES6中,可以定义函数的参数认值。语法如下:

rush:js;"> function doSomething(){ return x*y; } doSomething(5);//10 doSomethinf(5,undefined);//10 doSomething(5,3);//15

//ES5中给参数赋认值
function doSomething(x,y){
y=y===undefined?2:y;
return x*y;
}

传递undefined或不传参数时都会触发参数使用认值。

2、REST参数

前面我们已经学习了省略号操作符,剩余参数和它很类似,它同样是使用‘...'语法,允许你把末尾的参数保存在数组中:

rush:js;"> funtion doSomething(x,...remaining){ return x*rremaining.length; } dodSomething(5,0);//15

三、模块

在ES6的模块语法中,模块设计围绕export和import关键词,现在让我们看一个包含两个模块的例子:

rush:js;"> //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关键词给模块提供一个本地名称,把模块当成一个整体导入:

rush:js;"> //app.js import*as math form"lib/math.js"; console.lgo(math.sum(math.pi,math.pi));

模块系统有一个default输出,它可以是一个函数,只需要提供一个本地名称就可以导入这个认值:

rush:js;"> //lib/my-fn.js export default function(){ console.log('echo echo); } //app.js import doSomething from 'lib/my-fn,js'; doSomething();

请注意import声明是同步的,但是模块代码需在所有依赖加载完后才会运行

四、类

类的创建围绕calss和constructor关键词,以下是个简短的示例:

rush:js;"> class Vehicle{ constructor(name){ this.name=name; this.kind=''Vehicle"; } getName(){ return this.name; } }; //Create an instance let myVehicle=new Vehicle('rocky');

注意类的定义不是一般的对象,因此,类的成员间没有逗号。创建一个类的对象时,需要使用new关键词,继承一个基类时,使用extends:

rush:js;"> 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一样,你可以使用记号为对象属性创建唯一标示或创建唯一的常量。创建方法如下:

rush:js;"> 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程序设计有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...