ES6新特性-------解构、参数、模块和记号(续)

6、解构javascript

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

//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

  另外一个有趣的模式是模拟多个返回值:app

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})

7、参数学习

一、默认值this

  在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或不传参数时都会触发参数使用默认值。orm

二、REST参数

  前面咱们已经学习了省略号操做符,剩余参数和它很相似,它一样是使用‘...’语法,容许你把末尾的参数保存在数组中:

funtion doSomething(x,...remaining){
    return x*rremaining.length;
}

dodSomething(5,0,0,0);//15

 

8、模块

  在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声明是同步的,可是模块代码需在全部依赖加载完后才会运行

9、类  

  类的建立围绕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()调用父类构造函数;调用其余成员。

10、记号

  记号是一个新的原生数据的类型,像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等。

相关文章
相关标签/搜索