跟我學習javascript的最新標準ES6

2024-05-06 16:25:09

字體：大中小

來源：轉載

供稿：網友

跟我學習javascript的最新標準ECMAScript 6，ES6(ECMAScript 6)是即將到來的新版本JavaScript語言的標準，代號harmony，感興趣的小伙伴們可以參考一下

雖然ES6都還沒真正發布，但已經有用ES6重寫的程序了，各種關于ES789的提議已經開始了，這你敢信。潮流不是我等大眾所能追趕的。

潮流雖然太快，但我們不停下學習的步伐，就不會被潮流丟下的，下面來領略下ES6中新特性，一堵新生代JS的風采。

箭頭操作符

如果你會C#或者Java，你肯定知道lambda表達式，ES6中新增的箭頭操作符=>便有異曲同工之妙。它簡化了函數的書寫。操作符左邊為輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。

我們知道在JS中回調是經常的事，而一般回調又以匿名函數的形式出現，每次都需要寫一個function，甚是繁瑣。當引入箭頭操作符后可以方便地寫回調了。請看下面的例子。

var array = [1, 2, 3];

//傳統寫法

array.forEach(function(v, i, a) {

console.log(v);

});

//ES6

array.forEach(v = > console.log(v));

大家可以打開文章開頭提到的traceur在線代碼轉譯頁面輸入代碼來查看效果。

類的支持

ES6中添加了對類的支持，引入了class關鍵字(其實class在JavaScript中一直是保留字，目的就是考慮到可能在以后的新版本中會用到，現在終于派上用場了)。JS本身就是面向對象的，ES6中提供的類實際上只是JS原型模式的包裝?，F在提供原生的class支持后，對象的創建，繼承更加直觀了，并且父類方法的調用，實例化，靜態方法和構造函數等概念都更加形象化。

下面代碼展示了類在ES6中的使用。再次啰嗦一句，你可以將代碼貼到traceur自己查看運行結果。

//類的定義

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...'

增強的對象字面量

對象字面量被增強了，寫法更加簡潔與靈活，同時在定義對象的時候能夠做的事情更多了。具體表現在：

可以在對象字面量里面定義原型

定義方法可以不用function關鍵字

直接調用父類方法

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

//通過對象字面量創建對象

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}。如果你使用過像C#等后端強類型語言的話，對此功能應該不會陌生。

//產生一個隨機數

var num=Math.random();

//將這個數字輸出到console

console.log(`your num is ${num}`);

解構

自動解析數組或對象中的值。比如若一個函數要返回多個值，常規的做法是返回一個對象，將每個值做為這個對象的屬性返回。但在ES6中，利用解構這一特性，可以直接返回一個數組，然后數組中的值會自動被解析到對應接收該值的變量中。

var [x,y]=getVal(),//函數返回值的解構

[name,,age]=['wayou','male','secrect'];//數組解構

function getVal() {

return [ 1, 2 ];

}

console.log('x:'+x+', y:'+y);//輸出：x:1, y:2

console.log('name:'+name+', age:'+age);//輸出： name:wayou, age:secrect

參數默認值，不定參數，拓展參數

1、默認參數值

現在可以在定義函數的時候指定參數的默認值了，而不用像以前那樣通過邏輯或操作符來達到目的了。

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

2、不定參數

不定參數是在函數中使用命名參數同時接收不定數量的未命名參數。這只是一種語法糖，在以前的JavaScript代碼中我們可以通過arguments變量來達到這一目的。不定參數的格式是三個句點后跟代表所有不定參數的變量名。比如下面這個例子中，…x代表了所有傳入add函數的參數。

//將所有參數相加的函數

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

3、拓展參數

拓展參數則是另一種形式的語法糖，它允許傳遞數組或者類數組直接做為函數的參數而不用通過apply。

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，只是它定義的變量被限定在了特定范圍內才能使用，而離開這個范圍則無效。const則很直觀，用來定義常量，即無法被更改值的變量。

for (let i=0;i<2;i++)console.log(i);//輸出: 0,1

console.log(i);//輸出：undefined,嚴格模式下會報錯

for of 值遍歷

我們都知道for in 循環用于遍歷數組，類數組或對象，ES6中新引入的for of循環功能相似，不同的是每次循環它提供的不是序號而是值。

var someArray = [ "a", "b", "c" ];

for (v of someArray) {

console.log(v);//輸出 a,b,c

}

注意，此功能google traceur并未實現，所以無法模擬調試,下面有些功能也是如此

iterator, generator

這一部分的內容有點生澀，詳情可以參見這里。以下是些基本概念。

iterator:它是這么一個對象，擁有一個next方法，這個方法返回一個對象{done,value}，這個對象包含兩個屬性，一個布爾類型的done和包含任意值的value

iterable: 這是這么一個對象，擁有一個obj[@@iterator]方法，這個方法返回一個iterator

generator: 它是一種特殊的iterator。反的next方法可以接收一個參數并且返回值取決與它的構造函數(generator function)。generator同時擁有一個throw方法

generator 函數: 即generator的構造函數。此函數內可以使用yield關鍵字。在yield出現的地方可以通過generator的next或throw方法向外界傳遞值。generator 函數是通過function*來聲明的

yield 關鍵字：它可以暫停函數的執行，隨后可以再進進入函數繼續執行

模塊

在ES6標準中，JavaScript原生支持module了。這種將JS代碼分割成不同功能的小塊進行模塊化的概念是在一些三方規范中流行起來的，比如CommonJS和AMD模式。

將不同功能的代碼分別寫在不同文件中，各模塊只需導出公共接口部分，然后通過模塊的導入的方式可以在其他地方使用。下面的例子來自tutsplus:

// 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

這些是新加的集合類型，提供了更加方便的獲取屬性值的方法，不用像以前一樣用hasOwnProperty來檢查某個屬性是屬于原型鏈上的呢還是當前對象的。同時，在進行屬性值添加與獲取時有專門的get，set 方法。

下方代碼來自es6feature

// 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則更加安全些，這些作為屬性鍵的對象如果沒有別的變量在引用它們，則會被回收釋放掉，具體還看下面的例子。

正文代碼來自es6feature

// 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不會保存它的值，也就是說這次添加其實沒有意思

Proxies

Proxy可以監聽對象身上發生了什么事情，并在這些事情發生后執行一些相應的操作。一下子讓我們對一個對象有了很強的追蹤能力，同時在數據綁定方面也很有用處。

以下例子借用自這里。

//定義被偵聽的目標對象

var engineer = { name: 'Joe Sixpack', salary: 50 };

//定義處理程序

var interceptor = {

set: function (receiver, property, value) {

console.log(property, 'is changed to', value);

receiver[property] = value;

}

};

//創建代理以進行偵聽

engineer = Proxy(engineer, interceptor);

//做一些改動來觸發代理

engineer.salary = 60;//控制臺輸出：salary is changed to 60

上面代碼我已加了注釋，這里進一步解釋。對于處理程序，是在被偵聽的對象身上發生了相應事件之后，處理程序里面的方法就會被調用，上面例子中我們設置了set的處理函數，表明，如果我們偵聽的對象的屬性被更改，也就是被set了，那這個處理程序就會被調用，同時通過參數能夠得知是哪個屬性被更改，更改為了什么值。

Symbols

我們知道對象其實是鍵值對的集合，而鍵通常來說是字符串。而現在除了字符串外，我們還可以用symbol這種值來做為對象的鍵。Symbol是一種基本類型，像數字，字符串還有布爾一樣，它不是一個對象。Symbol 通過調用symbol函數產生，它接收一個可選的名字參數，該函數返回的symbol是唯一的。之后就可以用這個返回值做為對象的鍵了。Symbol還可以用來創建私有屬性，外部無法直接訪問由symbol做為鍵的屬性值。

以下例子來自es6features

(function() {

// 創建symbol

var key = Symbol("key");

function MyClass(privateData) {

this[key] = privateData;

}

MyClass.prototype = {

doStuff: function() {

... this[key] ...

}

};

})();

var c = new MyClass("hello")

c["key"] === undefined//無法訪問該屬性，因為是私有的

Math，Number，String，Object 的新API

對Math,Number,String還有Object等添加了許多新的API。下面代碼同樣來自es6features，對這些新API進行了簡單展示。

Number.EPSILON

Number.isInteger(Infinity) // false

Number.isNaN("NaN") // false

Math.acosh(3) // 1.762747174039086

Math.hypot(3, 4) // 5

Math.imul(Math.pow(2, 32) - 1, Math.pow(2, 32) - 2) // 2

"abcde".contains("cd") // true

"abc".repeat(3) // "abcabcabc"

Array.from(document.querySelectorAll('*')) // Returns a real Array

Array.of(1, 2, 3) // Similar to new Array(...), but without special one-arg behavior

[0, 0, 0].fill(7, 1) // [0,7,7]

[1,2,3].findIndex(x => x == 2) // 1

["a", "b", "c"].entries() // iterator [0, "a"], [1,"b"], [2,"c"]

["a", "b", "c"].keys() // iterator 0, 1, 2

["a", "b", "c"].values() // iterator "a", "b", "c"

Object.assign(Point, { origin: new Point(0,0) })

Promises

Promises是處理異步操作的一種模式，之前在很多三方庫中有實現，比如jQuery的deferred 對象。當你發起一個異步請求，并綁定了.when(), .done()等事件處理程序時，其實就是在應用promise模式。

//創建promise

var promise = new Promise(function(resolve, reject) {

// 進行一些異步或耗時操作

if ( /*如果成功 */ ) {

resolve("Stuff worked!");

} else {

reject(Error("It broke"));

}

});

//綁定處理程序

promise.then(function(result) {

//promise成功的話會執行這里

console.log(result); // "Stuff worked!"

}, function(err) {

//promise失敗會執行這里

console.log(err); // Error: "It broke"

});