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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
jquery maxlength使用说明
Sep 09 Javascript
jquery插件制作简单示例说明
Feb 03 Javascript
jQuery学习笔记之 Ajax操作篇(三) - 过程处理
Jun 23 Javascript
深入理解js数组的sort排序
May 28 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 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之第七天
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
2019/04/10 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
详解python3中tkinter知识点
2018/06/21 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
解决python 找不到module的问题
2020/02/12 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
RIP版本1跟版本2的区别
2013/12/30 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
建材业务员岗位职责
2013/12/08 职场文书
三峡导游词
2015/01/31 职场文书
上课迟到检讨书
2015/05/06 职场文书
企业投资意向书
2015/05/09 职场文书
美丽的大脚观后感
2015/06/03 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android