Linux中國

Node.js 4.0 中的 ES 6 特性介紹

1. 模板字元串

如果你要在 JavaScript 中創建多行字元串,你可能會使用如下的語法:

var message = [
    'The quick brown fox',
    'jumps over',
    'the lazy dog'
].join('n');

對於少量字元串這還算合適,但是如果比較多就會顯得混亂。不過,有個聰明的開發者提出了一個叫 multiline 的技巧:

var multiline = require('multiline');
var message = multiline(function () {/*
    The quick brown fox
    jumps over
    the lazy dog
*/});

幸運的是,ES 6 為我們帶來了模板字元串:

var message = `
    The quick brown fox
        jumps over
        the lazy dog
`;

此外,它還給我們帶來了字元串內插:

var name = 'Schroedinger';

// 不要這樣做 ...
var message = 'Hello ' + name + ', how is your cat?';
var message = ['Hello ', name, ', how is your cat?'].join('');
var message = require('util').format('Hello %s, how is your cat?', name);

// 應該這樣做 ...
var message = `Hello ${name}, how is your cat?`;

在 MDN 上查看模板字元串的細節.

2. 類

在 ES5 中定義類看起來有點奇怪,也比較麻煩:

var Pet = function (name) {
    this._name = name;
};

Pet.prototype.sayHello = function () {
    console.log('*scratch*');
};

Object.defineProperty(Pet.prototype, 'name', {
  get: function () {
    return this._name;
  }
});

var Cat = function (name) {
    Pet.call(this, name);
};

require('util').inherits(Cat, Pet);

Cat.prototype.sayHello = function () {
    Pet.prototype.sayHello.call(this);
    console.log('miaaaauw');
};

幸運的是,在 Node.js 中可以使用新的 ES6 格式:

class Pet {
    constructor(name) {
        this._name = name;
    }
    sayHello() {
        console.log('*scratch*');
    }
    get name() {
        return this._name;
    }
}

class Cat extends Pet {
    constructor(name) {
        super(name);
    }
    sayHello() {
        super.sayHello();
        console.log('miaaaauw');
    }
}

有 extends 關鍵字、構造子、調用超類及屬性,是不是很棒?還不止這些,看看 MDN 上的更詳細的介紹。

3. 箭頭函數

在函數裡面對 this 的動態綁定總是會導致一些混亂,人們一般是這樣用的:

Cat.prototype.notifyListeners = function () {
    var self = this;
    this._listeners.forEach(function (listener) {
        self.notifyListener(listener);
    });
};
Cat.prototype.notifyListeners = function () {
    this._listeners.forEach(function (listener) {
        this.notifyListener(listener);
    }.bind(this));
};

現在你可以使用胖箭頭函數了:

Cat.prototype.notifyListeners = function () {
    this._listeners.forEach((listener) => {
        this.notifyListener(listener);
    });
};

了解箭頭函數的更多細節。.

4. 對象字面量

使用對象字面量,你現在有了很漂亮的快捷方式:

var age = 10, name = 'Petsy', size = 32;

// 不要這樣做 ...
var cat = {
    age: age,
    name: name,
    size: size
};

// ... 而是這樣做 ...
var cat = {
    age,
    name,
    size
};

此外,你現在可以很容易地 給你的對象字面量添加函數

5. Promise

不用再依賴像 bluebirdQ這樣的第三方庫了,你現在可以使用 原生的 promise. 它們公開了如下 API:

var p1 = new Promise(function (resolve, reject) {});
var p2 = Promise.resolve(20);
var p3 = Promise.reject(new Error());
var p4 = Promise.all(p1, p2);
var p5 = Promise.race(p1, p2);

// 顯然
p1.then(() => {}).catch(() => {});

6. 字元串方法

我們也有了一系列新的字元串功能:

// 在幾種情況下可以替代 `indexOf()`
name.startsWith('a')
name.endsWith('c');
name.includes('b');

// 重複字元串三次
name.repeat(3);

去告訴那些使用 Ruby 的傢伙吧!字元串現在也 對 unicode 支持更好了

7. let 和 const

猜猜下列函數調用的返回值:

var x = 20;
(function () {
    if (x === 20) {
        var x = 30;
    }
    return x;
}()); // -> undefined

是的, undefined。使用 let 替代 var ,你會得到預期的行為:

let x = 20;
(function () {
    if (x === 20) {
        let x = 30;
    }
    return x;
}()); // -> 20

原因是什麼呢? var 是函數作用域,而 let 是塊級作用域(如大部分人所預期的)。因此,可以說 let 是一個新var。 你可以在 MDN 上了解更多細節

此外,Node.js 也支持 const 關鍵字了,它可以防止你為同一個引用賦予不同的值:

var MY_CONST = 42; // no, no
const MY_CONST = 42; // yes, yes

MY_CONST = 10 // 使用了 const ,這就不行了

結語

Node.js 4.0.0 帶來了更多的 ES6 特性,我希望這七個例子可以吸引你升級到最新版本。

還有更多的語言特性呢(例如,maps/sets, 符號和生成器,這裡只提到了一點)。你可以看看 Node.js 4.0.0 的 ES6 概覽。 趕快升級吧!


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國