1. 程式人生 > >es6的新語法

es6的新語法

es6的語法糖雖然很方便,但是目前瀏覽器大多不支援es6的語法,需要使用bable進行轉換。

新特性如下:

1、可以通過class關鍵字建立類,通過extends關鍵字繼承類

//父類
class Human {
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    }
} 

//子類
class Man extends Human {
    constructor(name, sex) {
        super(name);
        this.sex = sex;
    }
    info(){
        console.log(this.name + 'is ' + this.sex);
    }
}
var xx = new Man('jarson', 'boy');
xx.breathe();   //jarson is breathing
xx.info();   //arsonis boy

  對比之前建立類的方式(用functio建立、用prototype繼承)

function Human(name) {
    this.name = name;
    this.breathe = function() {
        console.log(this.name + ' is breathing');
    }
}
var man = new Human('jarson');
man.breathe(); 

2、增加了模組的使用:將不同功能的程式碼分別寫在不同檔案中,各模組只需匯出(export)公共介面部分,然後在需要使用的地方通過模組的匯入(import)

就可以了。

1)模組匯出:export

//匯出單個模組
export class Human{
    constructor(name) {
        this.name = name;
    }
    breathe() {
        console.log(this.name + " is breathing");
    } 
} 


//匯出一組物件
function run(){  
    console.log('i am runing'); 
}
export {Human, run}; 


//default匯出:default關鍵字在每一個模組中只能使用一次。
export default {  //把Human類和run函式標註為default物件匯出。
    Human,  
    run  
}; 

2)模組匯入:import

  如果模組包含一些邏輯要執行,且不會匯出任何物件,此類物件也可以被匯入到另一模組中,匯入之後只執行邏輯。

//匯入預設物件
import './module1.js'; 

//使用Default匯出方式匯出物件,該物件在import宣告中將直接被分配給某個引用,如下例中的“app”
import app from './module1.js'; 

//若匯出了一組物件,則應該在匯入宣告中一一列出這些物件
import {Human, run} from './app.js'

3、變數宣告方式:增加了let和const

       在定義變數的時候統統使用let來代替var;const用來定義常量。

4、箭頭函式:=>左邊為輸入的引數,而右邊則是進行的操作以及返回的值

let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));

5、字串模板:ES6中允許使用反引號 ` 來建立字串,此種方法建立的字串裡面可以包含由美元符號加花括號包裹的變數${vraible}。

//產生一個隨機數
let num = Math.random();
//將這個數字輸出到console
console.log(`your num is ${num}`);

 

6、解構:若一個函式要返回多個值,常規的做法是返回一個物件,將每個值做為這個物件的屬性返回。在ES6中,利用解構這一特性,可以直接返回一個數組,然後陣列中的值會自動被解析到對應接收該值的變數中。

function getVal() {
    return [1, 2];
}
var [x,y] = getVal(); //函式返回值的解構

7、 預設引數:現在可以在定義函式的時候指定引數的預設值了,而不用像以前那樣通過邏輯或操作符來達到目的了。

//es6寫法:ame指定預設引數
function sayHello2(name='tom'){  //如果沒有傳這個引數,才會有預設值,
    console.log(`Hello ${name}`);
}

//傳統寫法
function sayHello(name){
    var name=name||'tom';   //傳統的指定預設引數的方式
    console.log('Hello '+name);
}

8、Promise 

let promise = new Promise ( (resolve, reject) => {
    if ( success ) {
        resolve(a) // pending ——> resolved 引數將傳遞給對應的回撥方法
    } else {
        reject(err) // pending ——> rejectd
    }
} )