什麼是ECMA6?ES6常用語法

ECMA6

1. 什麼是ECMA6

ECMAScript 6.0(簡稱 ES6)是 JavaScript 語言的下一代標準,在2015年6月正式發佈。它的目標,是使得 JavaScript 語言可以用來編寫復雜的大型應用程序,成為企業級開發語言。

2. ECMAScript 和 JavaScript 的關系

ECMAScript是JavaScript的規格,JavaScript是ECMAScript的一種實現。日常場合,這兩個詞是可以互換的。

另外,ActionScript也是 ECMAScript的實現

1996年11月,JavaScript 的創造者 網景公司,將 JavaScript 提交給國際標準化組織ECMA,希望這種語言能夠成為國際標準。次年,ECMA 發佈262號標準文件(ECMA-262)的第一版,規定瞭瀏覽器腳本語言的標準,並將這種語言稱為 ECMAScript,這個版本就是1.0版。

該標準從一開始就是針對 JavaScript 語言制定的,但是之所以不叫 JavaScript,有兩個原因。一是商標,Java 是 Sun 公司的商標,根據授權協議,隻有網景公司可以合法地使用 JavaScript 這個名字,且 JavaScript 本身也已經被網景公司註冊為商標。二是想體現這門語言的制定者是 ECMA,不是網景,這樣有利於保證這門語言的開放性和中立性。

3. ECMA2015

ES6 的第一個版本,在2015年6月發佈,正式名稱是《ECMAScript 2015標準》(簡稱 ES2015)。

2016年6月,小幅修訂的《ECMAScript 2016標準》(簡稱 ES2016)發佈,這個版本可以看作是 ES6.1 版。

2017年6月會發佈 ES2017 標準。

因此,ES6 既是一個歷史名詞,也是一個泛指,含義是5.1版以後的 JavaScript 的下一代標準,涵蓋瞭ES2015、ES2016、ES2017等等,而ES2015 則是正式名稱,特指該年發佈的正式版本的語言標準。

4. ES6的兼容性問題

目前各大瀏覽器對ES6的支持度已經越來越高瞭,超過90%的 ES6 語法特性都實現瞭。

nodejs 微信開發 完全支持ES6的語法

5. Babel 轉碼器

該轉碼器可以吧ES6語法轉碼為ES5語法,意味著,可以借助於Babel轉碼器提高ES6的兼容性。

ES6常用語法

1. 變量擴展

1.1. let 關鍵字

用來聲明變量。它的用法類似於var,但是所聲明的變量,隻在let命令所在的代碼塊內有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

for循環的計數器,就很合適使用let命令

for (let i = 0; i < 10; i++) {}

console.log(i);
//ReferenceError: i is not defined

不存在變量提升

// var 的情況
console.log(foo); // 輸出undefined
var foo = 2;

// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;

不允許重復聲明

let a = 100;
let a = 200; //報錯

let b = 100;
b = 200; //正確

1.2 const 關鍵字

const聲明一個隻讀的常量。一旦聲明,常量的值就不能改變。

const PI = 3.1415;
PI // 3.1415

PI = 3; //報錯

同,let一樣,也不存在變量提升

1.3 頂層對象和全局變量

ES6中將頂層對象(瀏覽器中是window對象,node中是Global對象)與全局變量不再掛鉤。
但是,為瞭保持兼容性,var命令和function命令聲明的全局變量,依舊是頂層對象的屬性;另一方面規定,let命令、const命令、class命令聲明的全局變量,不屬於頂層對象的屬性。

2. 對象的簡化寫法

2.1 屬性的簡化寫法

var foo = 'name1';
var bar = 'name2';

var obj = {foo,bar};
//等同於
var obj = {foo:foo, bar:bar}

2.2 方法的簡化寫法

{
    fn:function(){
    }
}
//可簡化為
{
    fn(){
    }
}

3. 變量解構賦值

ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(Destructuring)。

3.1 數組的解構賦值

以前,變量賦值,隻能這麼寫

var a = 1;
var b = 2;
var c = 3;

現在,也可以這麼寫

let [a, b, c] = [1, 2, 3];

上面代碼表示,可以從數組中提取值,按照對應位置,對變量賦值。

本質上,這種寫法屬於“模式匹配”,隻要等號兩邊的模式相同,左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

如果解構不成功,變量的值就等於undefined
如果等號左邊的形式是數組,而右邊不是數組,將會報錯

解構變量可以有默認值

let [foo = true] = [];
foo // true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

3.2 對象的解構

解構不僅可以用於數組,還可以用於對象

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的,變量的取值由它的位置決定;而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值。

如果變量名與屬性名不一致,必須寫成下面這樣。
var { foo: baz } = { foo: ‘aaa’, bar: ‘bbb’ };
baz // “aaa”

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

這實際上說明,對象的解構賦值是下面形式的簡寫

let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };

和數組一樣,解構也可以用於嵌套解構的對象

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

註意,這時p是模式,不是變量,因此不會被賦值。

對象的解構也可以指定默認值

var {x, y = 5} = {x: 1};
x // 1
y // 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

3.3 特殊對象的解構

JavaScript中一切皆對象,向字符串、佈爾值、數值都可以被解構,而且字符串可以當做字符組成的數組

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length : len} = 'hello';   //因為字符串具有屬性length
len // 5

let {toString: s} = 123;
s === Number.prototype.toString // true

3.4 實際用途

交換變量的值

let x = 1;
let y = 2;

[x, y] = [y, x];

提取JSON數據

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

函數參數的默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

輸入模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

4. 擴展運算符(…)

擴展運算符(…)可以將某些數據結構轉為數組。
可以將兩類對象轉為真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象(包括ES6新增的數據結構Set和Map)。

// arguments對象
function foo() {
  var args = [...arguments];
}

// NodeList對象
[...document.querySelectorAll('p')]

5. for…of 循環

ES6 借鑒 C++、Java、C# 和 Python 語言,引入瞭for…of循環,作為遍歷所有數據結構的統一的方法。
for…of循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象(比如arguments對象、DOM NodeList 對象)以及字符串

const arr = ['red', 'green', 'blue'];

for(let v of arr) {
  console.log(v); // red green blue
}

6. Class關鍵字

6.1 定義類

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

JS傳統方法中定義對象是通過構造函數,這種寫法跟傳統的面向對象語言(比如C++和Java)差異很大,很容易讓新學習這門語言的程序員感到困惑。

ES6提供瞭更接近傳統語言的寫法,引入瞭Class(類)這個概念。

class Bar {
  doStuff() {
    console.log('stuff');
  }
}

var b = new Bar();
b.doStuff() // "stuff"

如果你瞭解過Java或者PHP或者C++或者.net 你將會對這種寫法非常熟悉

6.2 constructor 構造方法

class Bar{
    constructro() {

    }
}

在類被實例化的時候, 構造函數會被自動調用

6.3 extends 繼承

Class之間可以通過extends關鍵字實現繼承,這比ES5的通過修改原型鏈實現繼承,要清晰和方便很多。

class ColorPoint extends Point {}

上面代碼定義瞭一個ColorPoint類,該類通過extends關鍵字,繼承瞭Point類的所有屬性和方法。

6.4 super

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調用父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 調用父類的toString()
  }
}

上面代碼中,constructor方法和toString方法之中,都出現瞭super關鍵字,它在這裡表示父類的構造函數,用來新建父類的this對象。

子類必須在constructor方法中調用super方法,否則新建實例時會報錯。這是因為子類沒有自己的this對象,而是繼承父類的this對象,然後對其進行加工。如果不調用super方法,子類就得不到this對象。

7. 箭頭函數

ES6允許使用“箭頭”(=>)定義函數。

var f = v => v;
//等同於
var f = function(v) {
  return v;
};

var f = () => 5;
// 等同於
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭頭函數的代碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用return語句返回。

var sum = (num1, num2) => { 
    let sum =  num1 + num2; 
    return sum; 
}

箭頭函數的一個用處是簡化回調函數
// 正常函數寫法
var result = values.sort(function (a, b) {
return a – b;
});

// 箭頭函數寫法
var result = values.sort((a, b) => a - b);

函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 21;

foo.call({ id: 42 });
// id: 42

上面代碼中,setTimeout的參數是一個箭頭函數,這個箭頭函數的定義生效是在foo函數生成時,而它的真正執行要等到100毫秒後。如果是普通函數,執行時this應該指向全局對象window,這時應該輸出21。但是,箭頭函數導致this總是指向函數定義生效時所在的對象(本例是{id: 42}),所以輸出的是42。

箭頭函數 不可以當作構造函數,也就是說,不可以使用new命令,否則會拋出一個錯誤。

箭頭函數 不可以使用arguments對象,該對象在函數體內不存在。如果要用,可以用Rest參數代替。

8. ES6函數參數問題

8.1 函數默認值

ES6 允許為函數的參數設置默認值,即直接寫在參數定義的後面。不必那ES5那樣,采用些特殊手段

//ES6寫法
function log(x, y = 'World') {
  console.log(x, y);
}

//ES5寫法
function log(x, y) {
    if (y === undefined) {
        y = 'World';
    }
    console.log(x,y);
}

8.2 rest參數

ES6 引入 rest 參數(形式為“…變量名”),用於獲取函數的多餘參數,這樣就不需要使用arguments對象瞭

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10

9. 模板字符串

傳統的JavaScript語言,輸出模板通常是這樣寫的。

$('#result').append(
  'There are ' + basket.count + ' ' +
  'items in your basket, ' +
  '' + basket.onSale +
  ' are on sale!'
);

上面這種寫法相當繁瑣不方便,ES6引入瞭模板字符串解決這個問題

$('#result').append(`
  There are ${basket.count} items
   in your basket, ${basket.onSale}
  are on sale!
`);

模板字符串(template string)是增強版的字符串,用反引號 ` 標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量。

模板字符串中嵌入變量,需要將變量名寫在${}之中。
大括號內部可以放入任意的JavaScript表達式,可以進行運算,以及引用對象屬性。

`User ${user.name} is not authorized to do ${action}.`
`${x} + ${y} = ${x + y}`
`foo ${fn()} bar`

如果在模板字符串中需要使用反引號,則前面要用反斜杠轉義。

10. Symbol

ES6引入瞭一種新的原始數據類型Symbol,表示獨一無二的值。它是JavaScript語言的第七種數據類型,前六種是:Undefined、Null、佈爾值(Boolean)、字符串(String)、數值(Number)、對象(Object)
Symbol值通過Symbol函數生成。
Symbol函數可以接受一個字符串作為參數,表示對Symbol實例的描述,主要是為瞭在控制臺顯示,或者轉為字符串時,比較容易區分。

let s = Symbol();

typeof s
// "symbol"

var s1 = Symbol('foo');
var s2 = Symbol('bar');

s1 // Symbol(foo)
s2 // Symbol(bar)

s1.toString() // "Symbol(foo)"
s2.toString() // "Symbol(bar)"

註意,Symbol函數前不能使用new命令,否則會報錯。這是因為生成的Symbol是一個原始類型的值,不是對象。

任意兩個Symbol類型的數據都不想等

// 沒有參數的情況
var s1 = Symbol();
var s2 = Symbol();

s1 === s2 // false

// 有參數的情況
var s1 = Symbol('foo');
var s2 = Symbol('foo');

s1 === s2 // false

Symbol值不能與其他類型的值進行運算,會報錯。

由於每一個Symbol值都是不相等的,這意味著Symbol值可以作為標識符,用於對象的屬性名,就能保證不會出現同名的屬性。這對於一個對象由多個模塊構成的情況非常有用,能防止某一個鍵被不小心改寫或覆蓋。
var mySymbol = Symbol();

// 第一種寫法
var a = {};
a[mySymbol] = 'Hello!';

// 第二種寫法
var a = {
};

// 第三種寫法
var a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上寫法都得到同樣結果
a[mySymbol] // "Hello!"

註意,Symbol值作為對象屬性名時,不能用點運算符。

11. Set 數據結構

ES6 提供瞭新的數據結構 Set。它類似於數組,但是成員的值都是唯一的,沒有重復的值。
Set 本身是一個構造函數,用來生成 Set 數據結構。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {
  console.log(i);
}
// 2 3 5 4

上面代碼通過add方法向 Set 結構加入成員,結果表明 Set 結構不會添加重復的值

Set 函數可以接受一個數組(或類似數組的對象)作為參數,用來初始化。

var set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]

// 例二
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

12. Map 數據結構

ES6提供瞭Map數據結構。它類似於對象,也是鍵值對的集合,但是“鍵”的范圍不限於字符串,各種類型的值(包括對象)都可以當作鍵。也就是說,Object結構提供瞭“字符串—值”的對應,Map結構提供瞭“值—值”的對應,是一種更完善的Hash結構實現。如果你需要“鍵值對”的數據結構,Map比Object更合適。

var m = new Map();
var o = {p: 'Hello World'};

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

作為構造函數,Map也可以接受一個數組作為參數。該數組的成員是一個個表示鍵值對的數組。

var map = new Map([
  ['name', '張三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "張三"
map.has('title') // true
map.get('title') // "Author"

以上介紹的是ES6中最為常用的也較為容易掌握一些新語法。 查看更為詳細的ES6語法,請訪問阮一峰老師 ECMAScript6入門

(完)

You May Also Like