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 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
vue Render中slots的使用的实例代码
Jul 19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
php 不使用js实现页面跳转
2014/02/11 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
js实现添加删除表格(两种方法)
2017/04/27 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
微信小程序定义和调用全局变量globalData的实现
2019/11/01 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python实现随机调用一个浏览器打开网页
2018/04/21 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
python如何绘制疫情图
2020/09/16 Python
html5 input输入实时检测以及延时优化
2018/07/18 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
荷兰超市:DEEN
2018/03/14 全球购物
作弊检讨书1000字
2014/02/01 职场文书
幼儿园老师寄语
2014/04/03 职场文书
预防煤气中毒方案
2014/06/16 职场文书
森林防火宣传标语
2014/06/27 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL