您好,登錄后才能下訂單哦!
語法變化是最明顯的,也是最容易理解的。ECMAScript 6 沒有對 JavaScript 整體語法進行太多改動(仍是基于 C 的語言,包含分號和花括號),但確實清理了對開發人員具有細微影響的 “小” 東西。
ECMAScript 6 現在要符合 Unicode Standard 8.0 版或更高版本。意味著必須兼容 ECMAScript 的環境,因 8.0 擁有表情符號的字符代碼。
大部分文本編輯器都尚未直接支持 Unicode 8.0 的所有字符代碼,所以要將大部分 Unicode 字符作為轉義字符,比如字符串字面量中的 \u{1d306}。因為還可以使 Unicode 作為標識符,所以 ECMAScript 6 也支持對變量名稱使用 Unicode 轉義語法。以下示例:
var \u{102C0} = { \u{102C0} : 2 };
return \u{102C0};
開發人員將 Unicode 用于國際化用途,這意味著它將出現在字符串字面量內,而不是用作變量標識符。考慮在其代碼中使用英語以外的語言的開發人員可能仍會喜歡變量標識符中新增的靈活性
無處不在的整數字面量:9。由于 9 是一個字面量值,而且考慮到阿拉伯記數制(十進制)的主導性,9 被視為一個十進制字面量。但是,計算機不會以十進制形式思考;它們以二進制、八進制或十六進制形式進行思考。ECMAScript 很早就支持十六進制字面量(通過在字面量中添加 0x 作為前綴來表示)。在 ECMAScript 6 中,可以通過在字面量中分別添加 0b 或 0o 作為前綴來表達二進制和八進制字面量。因此,在 ECMAScript 6 中,下面的表達式中的所有字面量都會打印 true,因為它們都是相同的值:
var decimalLit = 15;
var hexadecimalLit = 0xF;
var octalLit = 0o17;
var binaryLit = 0b1111;
console.log(decimalLit == hexadecimalLit);
console.log(decimalLit == octalLit);
console.log(decimalLit == binaryLit);/span>
多年來,ECMAScript 開發人員使用了一些難看的字符串串聯來將變量成員放入字符串中,比如:
var message = "The user " + user.firstName + " " + user.lastName +
" cannot be " + action + " because " + validationError;
盡管此策略不是 JavaScript 中最大的錯誤來源,但它容易出錯,更別提難以讀取了。在適用性方面,它使得 JavaScript 落后于支持字符串插值的語言。為了不繼續落后,ECMAScript 6 引入了重音符字符串字面量(backtick string literal)。這個字面量使用重音符 (`) 表示支持字符串插值的字符串字面量。
var message = `The user ${user.firstName} ${user.lastName} cannot be
${action} because ${validationError}`;
在 be 和 ${action} 之間使用硬換行符,是因為重音符字符串也是 “多行字面量”。這意味著字符串中保留了空格,所以上面的消息將顯示在兩行上。它將在 “be” 后斷開,然后在繼續之前顯示兩個空格(因為代碼縮進了兩個空格)。
當然,不幸的是 ECMAScript 6 需要引入一種新的字符串字面量,而不是簡單地支持在現有的單引號或雙引號字符串中進行插入。但是,支持插值的向后兼容性意義非常大。這可能是最佳解決方案。隨著時間的推移,我們可以預期大部分字符串字面量都將變成重音符字符串
ECMAScript 在過去允許程序員使用變量而不聲明它們。但是,這么做會隱式地讓它們成為全局變量,這被認為是一種不可取的行為。(除非它被稱為 “單例模式”,進而被視為一種模式。)為了解決此問題,JavaScript 程序員開始使用 var 聲明樣式來在使用前聲明變量。
不同于其他許多語言,ECMAScript 從來沒有出現特定變量被重新聲明多次的問題。因此,在守舊的 ECMAScript 中,您可以編寫以下沒有用的代碼
var msg = "Howdy";
var msg = "Hello there"; // acceptable, just reassigns:
ECMAScript 6 解決了所有這些問題:首先,它建議將 var 替換為 let,let 不可以重新聲明。除此之外,let 的操作與 var 完全相同:
var msg = "Howdy";var msg = "Hello there"; // acceptable, just reassigns let mevar msg = "Howdy";
var msg = "Hello there"; // acceptable, just reassigns
let message = `This is your message.`;
let message = `This is another message.`; // ERROR!
在變量聲明中使用 const,滿足了對不可變性的需求。完成設置之后,使用 const 聲明的變量絕對不能修改:
const message = `This is your message.
`;message = `This is your second message.`; // ERROR!
盡管使用 const 聲明的變量不能更改其值,但該變量指向的 object 不是常量,所以它仍是可修改的:
const user = request.user;
user = new User(); // ERROR!
user.authorized = true; // acceptable, changes a property
因此,我的建議是首先使用 const。如果確實需要修改該變量,始終可以將聲明更改為 let。
談到變量聲明,令許多 ECMAScript 開發人員感到奇怪的是聲明的變量沒有綁定到聲明它們的 “代碼塊”。它們被綁定到函數。這是一個函數范圍變量的示例:
function bar() {
var i = 10;
while (i > 0) {
var j = 1;
while (j > 0) {
var i = 1; // This is the same i as above
j--;
i--;
}
}
}
上面的函數將進入嵌套循環一次,因為 i 的第二個 “聲明” 僅將值 1 賦給它。或許這不符合程序員的意圖,但其中已考慮到了所有方面。
從 ECMAScript 6 開始,使用 let 和 const 聲明的變量都具有代碼塊范圍,所以在當前表達式代碼塊結束時,而不是函數結束時,它們將超出范圍。重寫前面的代碼,使用 let 代替 var,這將得到預期的行為:
function bar() {
let i = 10;
while (i > 0) {
let j = 1;
while (j > 0) {
let i = 1; // Different i
j--;
i--;
}
} // This loop will execute 10 times, as intended
}
更廣義地講,代碼塊范圍意味著使用 let 和 const 聲明的變量的行為將與其他基于 C 的語言中的變量相同。與 ECMAScript 目前為止管理變量的奇怪方式相比,這是一大改進。
還有最后一個與變量聲明相關的變化,而且該變化是 ECMAScript 6 中最重要的更新之一。解構賦值(destructuring assignment) 允許從一個對象或數組向多個變量賦值。實質上,該操作將數組或對象 “解構” 為它的構成部分。
或許通過操作而不是通過文字才能更好地了解什么是解構。給定一個類似這樣的數組
let names = ["Ted", "Jenni", "Athen"];
let [ted, jenni, athen] = names;
console.log(ted, jenni, athen); // prints "Ted Jenni Athen"
注意,數組將變量聲明放在括號中。這些括號告訴 ECMAScript,等號右側需要一個數組。如果數組中的元素比聲明的變量要多,那么數組中剩余的元素將被丟棄。(當然,這些值仍在數組中 — 數組的值被復制到變量中,最初的數組不受影響。)如果數組中的值比聲明的變量少,ECMAScript 將為所有剩余的變量填入值 “undefined”。
在許多方面,解構賦值的數組形式只是相同操作的舊形式的語法糖:
var ted = names[0];
var jenni = names[1];
var athen = names[2];
解構版本更短,而且可能表達得更清楚。
解構賦值的最適用用例之一是,從一次正則表達式解析中提取值:
var url = "http://www.newardassociates.com/#/speaking";
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "http"
也可對對象執行類似的解構類型。先給定一個簡單對象,然后就可以執行以下類似操作:
let point = { x:2, y: 5 };
let {x, y} = point;
console.log(x, y); // prints 2, 5
在這里,解構發生在對象上,并通過在右側對象中找到同名的變量來綁定變量。也就是說,即使我們以相反順序編寫變量,x 的值仍會收到 point.x,y 仍會收到 point.y:
let point = { x:2, y: 5 };
let {y, x} = point;
console.log(x, y); // prints 2, 5
如果出于某種原因,您不關心對象字段名稱是否匹配,可以使用字段式語法來重命名字段,左側表示要匹配的名稱,右側表示實際聲明的變量名:
let {y: pty, x: ptx} = point;
console.log(ptx, pty); // prints 2, 5
這使您在解構對象時能夠對變量命名有更多的控制權。
解構也可以在多個層上發生;例如,矩形通常使用兩點來表示:
let rect = { lowerLeft: { x:0, y:0 }, upperRight: { x:3, y:4} };
如果提取矩形的 4 個值,可以將兩個 x/y 對拉入 4 個不同的變量中,就像這樣:
let { lowerLeft: { x:llx, y: lly }, upperRight: { x:urx, y:ury } } = rect;
console.log(llx, lly, urx, ury); // prints "0 0 3 4"
在這種情況下,“lowerLeft” 和 “upperRight” 不是實際的變量;它們是占位符,表示其子字段應如何綁定到被解構的對象中具有對應名稱的字段。本例中僅實際引入了變量 llx、lly、urx 和 ury。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。