ES 2015/6 新增內容還是比較多的，這裡僅大綱性的列舉一下（不一定全面）這些特性。其實，每個點挖進去都會有很多學問在裡頭，本文旨在彙總，所以不對這些特性進行深層次的討論及研究。隨後有時間的話，在單獨寫幾篇博客對常用的點進行深挖，與大家進行深度交流。 ...
ES 2015/6 新增內容還是比較多的，這裡僅大綱性的列舉一下（不一定全面）這些特性。其實，每個點挖進去都會有很多學問在裡頭，本文旨在彙總，所以不對這些特性進行深層次的討論及研究。隨後若有時間，再單獨寫幾篇博客對常用的點進行深挖，與大家進行深度交流。
箭頭函數
箭頭函數，通過 => 語法實現的函數簡寫形式，C#/JAVA8/CoffeeScript 中都有類似語法。與函數不同，箭頭函數與其執行下文環境共用同一個 this。如果一個箭頭函數出現在一個函數對象內部，它會與這個函數共用 arguments 變數。
// Expression bodies
var odds = evens.map(v => v + 1);
var nums = evens.map((v, i) => v + i);
// Statement bodies
nums.forEach(v => {
if (v % 5 === 0)
fives.push(v);
});
// Lexical this
var bob = {
_name: "Bob",
_friends: ['jim'],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f)); // Bob knows jim
}
};
// Lexical arguments
function square() {
let example = () => {
let numbers = [];
for (let number of arguments) {
numbers.push(number * number);
}
return numbers;
};
return example();
}
square(2, 4, 7.5, 8, 11.5, 21); // returns: [4, 16, 56.25, 64, 132.25, 441]類 Class
Javascript 類 並不是引入了一個新的面向對象的對象繼承模型，而是基於原型繼承的語法糖。其提供了一個更簡單和清晰的語法來創建對象並處理繼承。
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}類沒有聲明提升，必須確保在調用前已經進行了聲明。
構造函數 constructor 是一個特殊的方法，其用於創建和初始化類的實例。
靜態方法 static 關鍵字用於聲明靜態方法
創建子類 extends 關鍵字用於創建子類，這裡要註意：extends 不能用於擴展常規對象(不可構造/非構造的)，如果要繼承常規對象，可使用 Object.setPrototypeOf()。
調用超類 super 關鍵字可以用來調用父類中的方法
Mix-ins 混合
增強的對象字面量
通過字面量形式可以實現，定義prototype、鍵值對簡寫、定義方法等、動態屬性名稱。
var obj = {
// Sets the prototype. "__proto__" or '__proto__' would also work.
__proto__: theProtoObj,
// Computed property name does not set prototype or trigger early error for
// duplicate __proto__ properties.
['__proto__']: somethingElse,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ "prop_" + (() => 42)() ]: 42
};模板字元串
模板字元串 提供構造字元串的語法糖，在 Prel/python 等語言中也都有類似特性。
// Basic literal string creation
`This is a pretty little template string.`
// Multiline strings
`In ES5 this is
not legal.`
// Interpolate variable bindings
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`
// Unescaped template strings
String.raw`In ES5 "\n" is a line-feed.`
// Construct an HTTP request prefix is used to interpret the replacements and construction
GET`http://foo.org/bar?a=${a}&b=${b}
Content-Type: application/json
X-Credentials: ${credentials}
{ "foo": ${foo},
"bar": ${bar}}`(myOnReadyStateChangeHandler);解構賦值
Destructuring 法是一個Javascript表達式，這使得可以將值從數組或屬性從對象提取到不同的變數中。
// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;
// object matching (用新變數名賦值)
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
// 變數可以先賦予預設值。當要提取的對象沒有對應的屬性，變數就被賦予預設值。
var {a = 10, b = 5} = {a: 3};
console.log(a); // 3
console.log(b); // 5
// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
return x + y + w + h;
}
r({x:1, y:2}) === 23
// 對象屬性計算名和解構
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"Default + Rest + Spread
為函數參數提供預設值 & ... 定數量參數
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6Let + Const
let 用於聲明塊級作用域變數。 const 用於聲明常量。
function f() {
{
let x;
{
// this is ok since it's a block scoped name
const x = "sneaky";
// error, was just defined with `const` above
x = "foo";
}
// this is ok since it was declared with `let`
x = "bar";
// error, already declared above in this block
let x = "inner";
}
}迭代器
通過 symbol.iterator 可創建自定義迭代器。
let fibonacci = {
[Symbol.iterator]() {
let pre = 0, cur = 1;
return {
next() {
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur }
}
}
}
}
for (var n of fibonacci) {
// truncate the sequence at 1000
if (n > 1000)
break;
console.log(n);
}生成器 Generators
普通函數使用function聲明，而生成器函數使用function*聲明。
在生成器函數內部，有一種類似return的語法：關鍵字yield。二者的區別是，普通函數只可以return一次，而生成器函數可以yield多次（當然也可以只yield一次）。在生成器的執行過程中，遇到yield表達式立即暫停，後續可恢復執行狀態。
function* quips(name) {
yield "你好 " + name + "!";
yield "希望你能喜歡這篇介紹ES6的譯文";
if (name.startsWith("X")) {
yield "你的名字 " + name + " 首字母是X，這很酷！";
}
yield "我們下次再見！";
}Unicode
// same as ES5.1
"
