六、解构

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

//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 //ES5中给参数赋默认值
function doSomething(x,y){
  y=y===undefined?2:y;
  return x*y;
}

   传递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等。

  

ES6新特性-------解构、参数、模块和记号(续)的更多相关文章

  1. es6新特性-解构表达式、Lambda表达式、局部变量及map/reduce方法

    循环内的变量在循环外可见,不合理: let定义的变量是局部变量: const修饰的是常量,不允许再次修改,类似于java中的static: 解构表达式:

  2. ES6相关特性(解构赋值)

    解构赋值:本质上是一种匹配模式,等号两边的模式相同,则左边的变量可以被赋予对应的值. 注意:null & undefined 不能解构赋值!!! 数组的解构赋值: let [a,[[b],c] ...

  3. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  4. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

  5. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  6. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  7. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  8. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  9. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

随机推荐

  1. 使用Discuz!自带参数防御CC攻击以及原理,修改Discuz X 开启防CC攻击后,不影响搜索引擎收录的方法

    这部份的工作,以前花的时间太少. 希望能产生一定的作用. http://www.nigesb.com/discuz-cc-attacker-defence.html http://bbs.zb7.co ...

  2. Light OJ 1095 Arrange the Numbers(容斥)

    给定n,m,k,要求在n的全排列中,前m个数字中恰好有k个位置不变,有几种方案?首先,前m个中k个不变,那就是C(m,k),然后利用容斥原理可得 ans=ΣC(m,k)*(-1)^i*C(m-k,i) ...

  3. 粗窥STARTUP.A51和INIT.A51

    也许大家曾经注意过使用Keil C51来编译链接生成目标代码之后,在我们的主程序之前有些代码不是我们写的,它们从哪里来的? Keil C51的\C51\LIB目录下有STARTUP.A51和INIT. ...

  4. Transposed Matrix

    Transposed Matrix In linear algebra, the transpose of a matrix A is another matrix AT (also written  ...

  5. Magento How To Display Product Custom Option On list.phtml

    Some time we need to display custom option of product on category list page to achive this task we o ...

  6. HDU4532(组合DP)

    题目:安排座位 解析:http://www.douban.com/note/269136472/ #include <iostream> #include <string.h> ...

  7. pyqt MainWindow记录内容

    class Texts(QtGui.QMainWindow,Ui_MainWindow): def __init__(self,parne=None): super(Texts,self).__ini ...

  8. 用dTree组件生成无限级导航树

     在做管理系统时不可避免要用到导航树,这种东西只要一次做好,就可以随处运行,目前比较好的组件是dTree,原则上可以达到无限级,当然实际运行中4,5级就已经很多了,dTree的速度还是不错的,而且是J ...

  9. Memcached完全解剖–1. memcached基金会

    翻译一篇技术评论社的文章,是讲memcached的连载.fcicq同学说这个东西非常实用,希望大家喜欢. 发表日:2008/7/2  作者:长野雅广(Masahiro Nagano)  原文链接:ht ...

  10. Android 4.4前后版本读取图库图片和拍照完美解决方案

    转载:http://blog.csdn.net/zbjdsbj/article/details/42387551 4.3或以下,选了图片之后,根据Uri来做处理,很多帖子都有了,我就不详细说了. 主要 ...