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


Posted in Javascript onApril 01, 2017

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
js操作iframe父子窗体示例
May 22 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
vue.js实现的绑定class操作示例
Jul 06 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
写一个Vue Popup组件
Feb 25 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 #jQuery
前端自动化开发之Node.js的环境搭建教程
Apr 01 #Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 #Javascript
手机端转换rem适应
Apr 01 #Javascript
ES6新特性之变量和字符串用法示例
Apr 01 #Javascript
ES5学习教程之Array对象
Apr 01 #Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
2015/04/06 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
从vue源码看props的用法
2019/01/09 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
2019/05/23 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
Opencv+Python实现图像运动模糊和高斯模糊的示例
2019/04/11 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
介绍JAVA 中的Collection FrameWork(及如何写自己的数据结构)
2014/10/31 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
怎样写好创业计划书的内容
2014/02/06 职场文书
保安岗位职责
2014/02/21 职场文书
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers