中国熟妇人妻VIDEOS,亚洲美女一级片

作為開發(fā)者，我們就要不斷的學習，學習ES6，不知他的新特性怎么行？ES6 是 Javascript 的下一個版本，它有很多很棒的新特性。這些特性復雜程度各不相同，但對于簡單的腳本和復雜的應用都很有用。在本文中，我們將討論一些精心挑選的 ES6 特性，這些特性可以用于你日常的 Javascript 編碼中。

請注意，當前瀏覽器已經(jīng)全面展開對這些 ES6 新特性的支持，盡管目前的支持程度還有所差異。如果你需要支持一些缺少很多 ES6 特性的舊版瀏覽器，我將介紹一些當前可以幫助你開始使用 ES6 的解決方案。

變量

LET

你習慣于用 var 聲明變量。現(xiàn)在你也可以用 let 了。兩者微妙的差別在于作用域。var 聲明的變量作用域為包圍它的函數(shù)，而 let 聲明的變量作用域僅在它所在的塊中。

JavaScript

來聊聊ES6的新特性

if(true) {

let x = 1;

}

console.log(x); // undefined

這樣使得代碼更加干凈，減少滯留的變量。看看以下經(jīng)典的數(shù)組遍歷：

JavaScript

來聊聊ES6的新特性

for(let i = 0, l = list.length; i < l; i++) {

// do something with list[i]

}

console.log(i); // undefined

舉個例子，通常情況下，我們在同一作用域里使用變量 j 來完成另一個遍歷。但是，現(xiàn)在有了 let，可以安全地再一次聲明 i 變量。因為它只在被聲明的塊中有效。

CONST

還有另一個用于聲明塊作用域變量的方法。使用 const，你可以聲明一個值的只讀引用。必須直接給一個變量賦值。如果嘗試修改變量或者沒有立即給變量賦值，都將報錯：

JavaScript

來聊聊ES6的新特性

const MY_CONSTANT = 1;

MY_CONSTANT = 2 // Error

const SOME_CONST; // Error

注意，對象的屬性或數(shù)組成員還是可以改變的。

JavaScript

來聊聊ES6的新特性

1 2	const MY_OBJECT = {some: 1}; MY_OBJECT.some = 'body'; // Cool

箭頭函數(shù)

箭頭函數(shù)為 Javascript 語言增色不少。它使得代碼更簡潔。我們早早地在本文中介紹箭頭函數(shù)，這樣就可以在后面的示例中加以利用了。以下代碼片段是箭頭函數(shù)和我們熟悉的 ES5 版本的寫法：

JavaScript

來聊聊ES6的新特性

let books = [{title: 'X', price: 10}, {title: 'Y', price: 15}];

let titles = books.map( item => item.title );

// ES5 equivalent:

var titles = books.map(function(item) {

return item.title;

});

如果我們觀察箭頭函數(shù)的語法，會發(fā)現(xiàn)其中并沒有出現(xiàn) function 關鍵詞。只保留零或多個參數(shù)，“胖箭頭”（=>）和函數(shù)表達式。return 聲明被隱式加入。

帶有零或多個參數(shù)時，必須使用括號：

JavaScript

來聊聊ES6的新特性

// No arguments

books.map( () => 1 ); // [1, 1]

// Multiple arguments

[1,2].map( (n, index) => n * index ); // [0, 2]

如果需要寫更多的邏輯或更多的空格，可以把函數(shù)表達式放在（{...}）塊中。

JavaScript

來聊聊ES6的新特性

let result = [1, 2, 3, 4, 5].map( n => {

n = n % 3;

return n;

});

箭頭函數(shù)不單只是為了輸入更少的字符，它們的表現(xiàn)也和一般函數(shù)不同。它繼承了當前上下文的 this 和 arguments。這就意味著，你可以避免寫 var that = this 這樣丑陋的代碼，也不需要把函數(shù)綁定到正確的上下文了。舉例如下（注意對比 this.title 和 ES5 版本的 that.title 的不同）：

JavaScript

來聊聊ES6的新特性

let book = {

title: 'X',

sellers: ['A', 'B'],

printSellers() {

this.sellers.forEach(seller =>console.log(seller + ' sells ' + this.title));

}

// ES5 equivalent:

var book = {

title: 'X',

sellers: ['A', 'B'],

printSellers: function() {

var that = this;

this.sellers.forEach(function(seller) {

console.log(seller + ' sells ' + that.title)

})

}

字符串

方法

幾個方便的方法被添加到 String 的原型中。其中大多數(shù)用于簡化需要用 indexOf() 方法來解決的問題的復雜度，并達到同樣的效果：

JavaScript

來聊聊ES6的新特性

'my string'.startsWith('my'); //true

'my string'.endsWith('my'); // false

'my string'.includes('str'); // true

很簡單但是很有效。添加了另外一個方便的用于創(chuàng)建重復字符串的方法：

JavaScript

來聊聊ES6的新特性

1	'my '.repeat(3); // 'my my my '

模板字符串

模板字符串提供一個簡潔的方式來實現(xiàn)字符串插值。你可能已經(jīng)對這種語法很熟悉了；它基于美元符號和花括號 ${..}。模板字符串置于引號之中。以下是快速示例：

JavaScript

來聊聊ES6的新特性

let name = 'John',

apples = 5,

pears = 7,

bananas = function() { return 3; }

console.log(`This is ${name}.`);

console.log(`He carries ${apples} apples, ${pears} pears, and ${bananas()} bananas.`);

// ES5 equivalent:

console.log('He carries ' + apples + ' apples, ' + pears + ' pears, and ' + bananas() +' bananas.');

以上形式對比 ES5 僅僅是便于字符串拼接。事實上，模板字符串還可以用于多行字符串。記住空格也是字符串的一部分。

JavaScript

來聊聊ES6的新特性

let x = `1...

2...

3 lines long!`; // Yay

// ES5 equivalents:

var x = "1...n" +

"2...n" +

"3 lines long!";

var x = "1...n2...n3 lines long!";

數(shù)組

Array 對象增加了一些新的靜態(tài)方法，Array 原型上也增加了一些新方法。

首先， Array.from 從類數(shù)組和可遍歷對象中創(chuàng)建 Array 的實例。類數(shù)組對象示例包括：

函數(shù)中的 arguments；

由 document.getElementByTagName() 返回的 nodeList；

新增加的 Map 和 Set 數(shù)據(jù)結(jié)構。

JavaScript

來聊聊ES6的新特性

let itemElements = document.querySelectorAll('.items');

let items = Array.from(itemElements);

items.forEach(function(element) {

console.log(element.nodeType)

});

// A workaround often used in ES5:

let items = Array.prototype.slice.call(itemElements);

在上面的例子中，可以看到 items 數(shù)組擁有 forEach 方法，該方法是 itemElements 集合所不具備的。

Array.from 的一個有趣的特性是它的第二個可選參數(shù)mapFunction 。該參數(shù)允許你通過一次單獨調(diào)用創(chuàng)建一個新的映射數(shù)組。

JavaScript

來聊聊ES6的新特性

1 2	let navElements = document.querySelectorAll('nav li'); let navTitles = Array.from(navElements, el => el.textContent);

然后，我們可以使用 Array.of 方法，該方法的表現(xiàn)很像 Array 構造函數(shù)。它適合只傳遞一個參數(shù)的情況。因此 Array.of 是 new Array() 的更優(yōu)選擇。然而，更多的情況下，你會想使用數(shù)組字面量。

JavaScript

來聊聊ES6的新特性

let x = new Array(3); // [undefined, undefined, undefined]

let y = Array.of(8); // [8]

let z = [1, 2, 3]; // Array literal

最后但同樣重要的，有幾個方法被添加到 Array 的原型上。我想 find 方法將會很受 Javascript 開發(fā)者歡迎。

find 返回回調(diào)返回 true 的第一個元素。

findIndex 返回回調(diào)函數(shù)返回 true的第一個元素的下標。

fill 用所給參數(shù)“覆蓋”數(shù)組的元素。

JavaScript

來聊聊ES6的新特性

[5, 1, 10, 8].find(n => n === 10) // 10

[5, 1, 10, 8].findIndex(n => n === 10) // 2

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

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

Math

Math 對象新增了幾個方法。

Math.sign 返回數(shù)字的符號，結(jié)果為 1、-1 或 0。

Math.trunc 返回無小數(shù)位的數(shù)字。

Math.cbrt 返回數(shù)字的立方根。

JavaScript

來聊聊ES6的新特性

Math.sign(5); // 1

Math.sign(-9); // -1

Math.trunc(5.9); // 5

Math.trunc(5.123); // 5

Math.cbrt(64); // 4

擴展操作符

擴展操作符（...）這個語法用于特定地方擴展元素非常方便，例如函數(shù)調(diào)用中的參數(shù)。讓你了解它們用途的最好方法就是舉例子了。

首先，我們看看如何在一個另數(shù)組中擴展一個數(shù)組的元素。

JavaScript

來聊聊ES6的新特性

let values = [1, 2, 4];

let some = [...values, 8]; // [1, 2, 4, 8]

let more = [...values, 8, ...values]; // [1, 2, 4, 8, 1, 2, 4]

// ES5 equivalent:

let values = [1, 2, 4];

// Iterate, push, sweat, repeat...

擴展語法在傳參數(shù)調(diào)用函數(shù)時也非常有用：

JavaScript

來聊聊ES6的新特性

let values = [1, 2, 4];

doSomething(...values);

function doSomething(x, y, z) {

// x = 1, y = 2, z = 4

}

// ES5 equivalent:

doSomething.apply(null, values);

正如你所看到的，該語法讓我們免去通常使用 fn.apply() 的麻煩。它非常靈活，因為擴展操作符可以用在參數(shù)列表中的任意位置。這意味著以下調(diào)用方式會產(chǎn)生一樣的結(jié)果：

JavaScript

來聊聊ES6的新特性

1 2	let values = [2, 4]; doSomething(1, ...values);

我們已經(jīng)把擴展操作符應用在數(shù)組和參數(shù)中。事實上，它可以用在所有的可遍歷對象中，例如一個 NodeList：

JavaScript

來聊聊ES6的新特性

let form = document.querySelector('#my-form'),

inputs = form.querySelectorAll('input'),

selects = form.querySelectorAll('select');

let allTheThings = [form, ...inputs, ...selects];

現(xiàn)在， allTheThings 是一個包含 <form> 節(jié)點、 <input> 子節(jié)點和 <select> 子節(jié)點的二維數(shù)組。

解構

解構提供了一個方便地從對象或數(shù)組中提取數(shù)據(jù)的方法。對于初學者，請看以下數(shù)組示例：

JavaScript

來聊聊ES6的新特性

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

// ES5 equivalent:

var arr = [1, 2];

var x = arr[0];

var y = arr[1];

使用這個語法，可以一次性給多個變量賦值。一個很好的附加用處是可以很簡單地交換變量值：

JavaScript

來聊聊ES6的新特性

let x = 1,

y = 2;

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

解構也可以用于對象。注意對象中必須存在對應的鍵：

JavaScript

來聊聊ES6的新特性

1 2	let obj = {x: 1, y: 2}; let {x, y} = obj; // x = 1, y = 2

你也可以使用該機制來修改變量名：

JavaScript

來聊聊ES6的新特性

1 2	let obj = {x: 1, y: 2}; let {x: a, y: b} = obj; // a = 1, b = 2

另一個有趣的模式是模擬多個返回值：

JavaScript

來聊聊ES6的新特性

function doSomething() {

return [1, 2]

}

let [x, y] = doSomething(); // x = 1, y = 2

解構可以用來為參數(shù)對象賦默認值。通過對象字面量，可以模擬命名參數(shù)：

JavaScript

來聊聊ES6的新特性

function doSomething({y = 1, z = 0}) {

console.log(y, z);

}

doSomething({y: 2});

參數(shù)

默認值

在 ES6 中，可以定義函數(shù)的參數(shù)默認值。語法如下：

JavaScript

來聊聊ES6的新特性

function doSomething(x, y = 2) {

return x * y;

}

doSomething(5); // 10

doSomething(5, undefined); // 10

doSomething(5, 3); // 15

看起來很簡潔，對吧？我肯定你之前在 ES5 中曾經(jīng)需要給某些參數(shù)賦默認值：

JavaScript

來聊聊ES6的新特性

function doSomething(x, y) {

y = y === undefined ? 2 : y;

return x * y;

}

傳遞 undefined 或不傳參數(shù)時都會觸發(fā)參數(shù)使用默認值。

REST參數(shù)

我們已經(jīng)學習了省略號操作符。剩余參數(shù)和它很類似。它同樣是使用 ... 語法，允許你把末尾的參數(shù)保存在數(shù)組中：

JavaScript

來聊聊ES6的新特性

function doSomething(x, ...remaining) {

return x * remaining.length;

}

doSomething(5, 0, 0, 0); // 15

模塊

模塊當然是一個受歡迎的 Javascript 語言新功能。我想僅僅是這個主要特性就值得我們投入到 ES6 中來。

當前任何重要的 Javascript 項目都使用某種模塊系統(tǒng) —— 可能是“展示模塊模式”或其他 AMD 或 CommonJS 擴展形式的東西。然而，瀏覽器并沒有任何模塊系統(tǒng)特性。為了實現(xiàn) AMD 或 CommonJS，你通常需要一個構建步驟或加載器。解決這個問題的工具包括 RequireJS、Browserify 和 WebPack。

ES6 規(guī)范包含模塊化的新語法和加載器。如果你未來想使用模塊，應該使用這個語法?，F(xiàn)代構建工具支持這種形式（可能通過插件），所以你可以放心使用。（不用擔心 —— 我們將在后面的“轉(zhuǎn)譯”章節(jié)中討論）

在 ES6 的模塊語法中。模塊設計圍繞 export 和 import 關鍵詞?，F(xiàn)在讓我們看一個包含兩個模塊的例子：

JavaScript

來聊聊ES6的新特性

// lib/math.js

export function sum(x, y) {

return x + y;

}

export var pi = 3.141593;

// app.js

import { sum, pi } from "lib/math";

console.log('2π = ' + sum(pi, pi));

正如你所見，可以存在多個 export 聲明。每一個都要明確地指明輸出值的類型（本例中的function 和 var）。

本例中的 import 聲明使用一種語法（類似解構）來明確定義被導入的內(nèi)容。可以使用 * 通配符，結(jié)合 as 關鍵詞給模塊提供一個本地名稱，把模塊當成一個整體導入。

JavaScript

來聊聊ES6的新特性

// app.js

import * as math from "lib/math";

console.log('2π = ' + math.sum(math.pi, math.pi));

模塊系統(tǒng)有一個 default 輸出。它可以是一個函數(shù)。只需要提供一個本地名稱就可以導入這個默認值（即無解構）：

JavaScript

來聊聊ES6的新特性

// lib/my-fn.js

export default function() {

console.log('echo echo');

}

// app.js

import doSomething from 'lib/my-fn';

doSomething();

請注意 import 聲明是同步的，但是模塊代碼需在所有依賴加載完后才會運行。

類

類是 ES6 中備受熱議的一個特性。一部分人認為它不符合 Javascript 的原型特性，另一部分人認為類可以降低從其他語言轉(zhuǎn)過來的入門門檻，并幫助人們構建大規(guī)模應用。不管怎樣，它是 ES6 的一部分。這里我們快速介紹一下。

類的創(chuàng)建圍繞 class 和 constructor 關鍵詞。以下是個簡短的示例：

JavaScript

來聊聊ES6的新特性

class Vehicle {

constructor(name) {

this.name = name;

this.kind = 'vehicle';

}

getName() {

return this.name;

}

// Create an instance

let myVehicle = new Vehicle('rocky');

注意類的定義不是一般的對象，因此，類的成員間沒有逗號。

創(chuàng)造一個類的對象時，需要使用 new 關鍵詞。繼承一個基類時，使用 extends：

JavaScript

來聊聊ES6的新特性

class Car extends Vehicle {

constructor(name) {

super(name);

this.kind = 'car'

}

let myCar = new Car('bumpy');

myCar.getName(); // 'bumpy'

myCar instanceof Car; // true

myCar instanceof Vehicle; //true

從衍生類中，你可以使用從任何構造函數(shù)或方法中使用 super 來獲取它的基類：

使用 super() 調(diào)用父類構造函數(shù)。

調(diào)用其它成員，舉個例子，使用 super.getName() 。

記號

記號是一個新的原生數(shù)據(jù)類型，像 Number 和 String 一樣。你可以使用記號為對象屬性創(chuàng)建唯一標識或創(chuàng)建唯一的常量。

JavaScript

來聊聊ES6的新特性

const MY_CONSTANT = Symbol();

let obj = {};

obj[MY_CONSTANT] = 1;

注意通過記號產(chǎn)生的鍵值對不能通過 Object.getOwnPropertyNames() 獲得，在 for...in 遍歷、 Object.keys() 、JSON.stringify() 中均不可見。這是與基于字符串的鍵相反的。你可以通過 Object.getOwnPropertySymbols() 獲取一個對象的記號數(shù)組。

記號與 const 配合很合適，因為它們都有不可改變的特性。

JavaScript

來聊聊ES6的新特性

const CHINESE = Symbol();

const ENGLISH = Symbol();

const SPANISH = Symbol();

switch(language) {

case CHINESE:

break;

case ENGLISH:

break;

case SPANISH:

break;

default:

break;

}

你可以為 symbol 添加描述。雖然不可以通過描述獲取 symbol，但是可用于代碼調(diào)試。

JavaScript

來聊聊ES6的新特性

const CONST_1 = Symbol('my symbol');

const CONST_2 = Symbol('my symbol');

typeof CONST_1 === 'symbol'; // true

CONST_1 === CONST_2; // false

轉(zhuǎn)譯

我們現(xiàn)在可以用 ES6 來寫代碼了。正如介紹中提到的，瀏覽器對 ES6 特性的支持尚不廣泛，且各瀏覽器也各不相同。很有可能你寫的的代碼在用戶的瀏覽器中不能完全解析。這就是我們?yōu)槭裁葱枰汛a轉(zhuǎn)換成能在當前的任何瀏覽器中良好運行的舊版本 Javascript(ES5) 。這種轉(zhuǎn)換通常稱為“轉(zhuǎn)譯”。我們必須在應用中這么做，直到所有我們想兼容的瀏覽器都能運行 ES6 為止。

原文來自：伯樂在線

99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

來聊聊ES6的新特性

熱門帖子

Swift 教程

最新帖子

Xcode 9.4下載