ES6 新特性

  • 類的支持
//類的定義
class Animal {
	//ES6中新型構造器
    constructor(name) {
        this.name = name;
    }
    //實例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//類的繼承
class Programmer extends Animal {
    constructor(name) {
    	//直接調用父類構造器進行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//測試咱們的類
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//輸出 ‘My name is dummy’
wayou.sayName();//輸出 ‘My name is wayou’
wayou.program();//輸出 ‘I'm coding...’
  • 字面量
字面量表示如何表達這個值,通常除去表達式,給變量賦值時,等號右邊均可以認爲是字面量。
字面量分爲字符串字面量(string literal )、數組字面量(array literal)和對象字面量(object literal),另外還有函數字面量(function literal)。
示例:
var test="hello world!";
"hello world!"就是字符串字面量,test是變量名。

對象字面量被加強了,寫法更加簡潔與靈活,同時在定義對象的時候可以作的事情更多了。具體表如今:javascript

  • 能夠在對象字面量裏面定義原型
  • 定義方法能夠不用function關鍵字
  • 直接調用父類方法

這樣一來,對象字面量與前面提到的類概念更加吻合,在編寫面向對象的JavaScript時更加輕鬆方便了。java

//經過對象字面量建立對象
var human = {
    breathe() {
        console.log('breathing...');
    }
};
var worker = {
    __proto__: human, //設置此對象的原型爲human,至關於繼承human
    company: 'freelancer',
    work() {
        console.log('working...');
    }
};
human.breathe();//輸出 ‘breathing...’
//調用繼承來的breathe方法
worker.breathe();//輸出 ‘breathing...’
  • 字符串模板

字符串模板相對簡單易懂些。ES6中容許使用反引號 ` 來建立字符串,此種方法建立的字符串裏面能夠包含由美圓符號加花括號包裹的變量${vraible}數組

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

解構賦值容許你使用相似數組或對象字面量的語法將數組和對象的屬性賦給各類變量。這種賦值語法極度簡潔,同時還比傳統的屬性訪問方法更爲清晰app

//之前咱們獲取對象數組的前三個數組的方法  

    var first = someArray[0];
    var second = someArray[1];
    var third = someArray[2];
//如今ES6
var [first, second, third] = someArray;
  • 默認函數值,(在定義函數的時候,能夠給定默認參數)
function sayHello(name){
	//傳統的指定默認參數的方式
	var name=name||'dude';
	console.log('Hello '+name);
}
//運用ES6的默認參數
function sayHello2(name='dude'){
	console.log(`Hello ${name}`);
}
sayHello();//輸出:Hello dude
sayHello('Wayou');//輸出:Hello Wayou
sayHello2();//輸出:Hello dude
sayHello2('Wayou');//輸出:Hello Wayou

 

  • 不定參數 (...傳遞)
    //將全部參數相加的函數
    function add(...x){
    	return x.reduce((m,n)=>m+n);
    }
    //傳遞任意個數的參數
    console.log(add(1,2,3));//輸出:6
    console.log(add(1,2,3,4,5));//輸出:15

     

  • 拓展參數(... 傳遞數組爲參數)
var people=['Wayou','John','Sherlock'];
//sayHello函數原本接收三個單獨的參數人妖,人二和人三
function sayHello(people1,people2,people3){
	console.log(`Hello ${people1},${people2},${people3}`);
}
//可是咱們將一個數組以拓展參數的形式傳遞,它能很好地映射到每一個單獨的參數
sayHello(...people);//輸出:Hello Wayou,John,Sherlock 

//而在之前,若是須要傳遞數組當參數,咱們須要使用函數的apply方法
sayHello.apply(null,people);//輸出:Hello Wayou,John,Sherlock
  • let 和 const
// let能夠看作var,可是限定了做用範圍


for (let i=0;i<2;i++)console.log(i);//輸出: 0,1
console.log(i);//輸出:undefined,嚴格模式下會報錯
 //const 就是定義常量了
  • for  of (循環提供的不是index而是 val)
  • var someArray = [ "a", "b", "c" ];
     
    for (v of someArray) {
        console.log(v);//輸出 a,b,c
    }

    module(不一樣功能的代碼分別寫在不一樣文件中,各模塊只需導出公共接口部分,而後經過模塊的導入的方式能夠在其餘地方使用)dom

  • // point.js
    module "point" {
        export class Point {
            constructor (x, y) {
                public x = x;
                public y = y;
            }
        }
    }
     
    // myapp.js
    //聲明引用的模塊
    module point from "/point.js";
    //這裏能夠看出,儘管聲明瞭引用的模塊,仍是能夠經過指定須要的部分進行導入
    import Point from "point";
     
    var origin = new Point(0, 0);
    console.log(origin);

    Map,Set 和 WeakMap,WeakSet

  • // Sets
    var s = new Set();
    s.add("hello").add("goodbye").add("hello");
    s.size === 2;
    s.has("hello") === true;
    
    // Maps
    var m = new Map();
    m.set("hello", 42);
    m.set(s, 34);
    m.get(s) == 34;
    
    //若是怕內存泄漏,可使用WeakMap,WeakSet
    // Weak Maps
    var wm = new WeakMap();
    wm.set(s, { extra: 42 });
    wm.size === undefined
    
    // Weak Sets
    var ws = new WeakSet();
    ws.add({ data: 42 });//由於添加到ws的這個臨時對象沒有其餘變量引用它,因此ws不會保存它的值,也就是說此次添加其實沒有意思

    JavaScript愈來愈強大了函數

相關文章
相關標籤/搜索