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 相关文章推荐
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
May 27 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP实现的封装验证码类详解
2013/06/18 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JavaScript写的一个自定义弹出式对话框代码
2010/01/17 Javascript
js判断字符是否是汉字的两种方法小结
2014/01/03 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python 自定义对象的打印方法
2019/01/12 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
abstract class和interface有什么区别?
2012/01/03 面试题
Linux操作面试题
2012/05/16 面试题
六查六看自查材料
2014/02/17 职场文书
学生安全责任书
2014/04/15 职场文书
竞赛口号大全
2014/06/16 职场文书
政府四风问题整改措施
2014/10/04 职场文书
活动总结模板大全
2015/05/11 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫