學習筆記：ES6

 

http://es6.ruanyifeng.com/　　ECMAScript 6

https://frankfang.github.io/es-6-tutorials/　　ES 6 新特性列表　　2017-12-29

http://www.runoob.com/w3cnote/es6-concise-tutorial.html　　ESMAScript 6簡明教程　　2018-1-8

https://juejin.im/post/5991549af265da3e345f6e6d　　ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解

https://segmentfault.com/a/1190000013099221　　ES6 換種思路處理數據　　2018-2-2

https://www.jianshu.com/p/edaf43e9384f　　export default 和 export 區別　　2019-7-26

---

如下是ES6排名前十的最佳特性列表（排名不分前後）：

• Default Parameters（默認參數） in ES6
• Template Literals （模板文本）in ES6
• Multi-line Strings （多行字符串）in ES6
• Destructuring Assignment （解構賦值）in ES6
• Enhanced Object Literals （加強的對象文本）in ES6
• Arrow Functions （箭頭函數）in ES6
• Promises in ES6
• Block-Scoped Constructs Let and Const（塊做用域構造Let and Const）
• Classes（類） in ES6
• Modules（模塊） in ES6

 

 

---

筆記正文

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在2015年6月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。

 

let命令

它的用法相似於var，可是所聲明的變量，只在let命令所在的代碼塊內有效。（for循環的計數器，就很合適使用let命令。）

在代碼塊內，使用let命令聲明變量以前，該變量都是不可用的。這在語法上，稱爲「暫時性死區」

不容許重複聲明 ： let不容許在相同做用域內，重複聲明同一個變量。

let實際上爲 JavaScript 新增了塊級做用域。

ES6 容許塊級做用域的任意嵌套。

內層做用域能夠定義外層做用域的同名變量。

ES6 引入了塊級做用域，明確容許在塊級做用域之中聲明函數。ES6 規定，塊級做用域之中，函數聲明語句的行爲相似於let，在塊級做用域以外不可引用。

考慮到環境致使的行爲差別太大，應該避免在塊級做用域內聲明函數。若是確實須要，也應該寫成函數表達式，而不是函數聲明語句。

// 函數聲明語句
{
  let a = 'secret';
  function f() {
    return a;
  }
}

// 函數表達式
{
  let a = 'secret';
  let f = function () {
    return a;
  };
}

 

const 命令

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

const聲明的變量不得改變值，這意味着，const一旦聲明變量，就必須當即初始化，不能留到之後賦值。

const的做用域與let命令相同：只在聲明所在的塊級做用域內有效。

 

ES5和ES6

ES5 只有兩種聲明變量的方法：var命令和function命令。

ES6 一共有6種聲明變量的方法：var命令和function命令、let和const命令、import命令和class命令

頂層對象window的屬性與全局變量掛鉤，被認爲是JavaScript語言最大的設計敗筆之一。

ES6爲了改變這一點，一方面爲了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另外一方面規定，let命令、const命令、class命令聲明的全局變量，不屬於頂層對象的屬性。也就是說，從ES6開始，全局變量將逐步與頂層對象的屬性脫鉤。

var a = 1;
// 若是在Node的REPL環境，能夠寫成global.a
// 或者採用通用方法，寫成this.a
window.a // 1

let b = 1;
window.b // undefined

 

變量的解構賦值

數組的解構賦值：

之前，爲變量賦值，只能直接指定值。

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

ES6 容許寫成下面這樣。

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

上面代碼表示，能夠從數組中提取值，按照對應位置，對變量賦值。

解構賦值容許指定默認值

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

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

對象的解構賦值：

解構不只能夠用於數組，還能夠用於對象。

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

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

字符串的解構賦值：

字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象。

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

數值和布爾值的解構賦值（略）

函數參數的解構賦值（略）

 

---

 

字符串的擴展

一、字符的 Unicode 表示法： 用大括號

JavaScript 容許採用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。

可是，這種表示法只限於碼點在\u0000~\uFFFF之間的字符。超出這個範圍的字符，必須用兩個雙字節的形式表示。

let s1='\u20BB7';    //₻7
let s2='\u{20BB7}';    //𠮷

二、codePointAt()

三、String.fromCodePoint()

四、字符串的遍歷器接口。

for (let codePoint of 'foo') {
    console.log(codePoint)
}

除了遍歷字符串，這個遍歷器最大的優勢是能夠識別大於0xFFFF的碼點，傳統的for循環沒法識別這樣的碼點。

五、at()

'abc'.at(0) // "a"
'𠮷'.at(0) // "𠮷"

ES5 對字符串對象提供charAt方法，返回字符串給定位置的字符。該方法不能識別碼點大於0xFFFF的字符。
目前，有一個提案，提出字符串實例的at方法，能夠識別 Unicode 編號大於0xFFFF的字符，返回正確的字符。

六、normalize()

七、includes(), startsWith(), endsWith()

includes()：返回布爾值，表示是否找到了參數字符串。
startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。

八、repeat()　　返回一個新字符串，表示將原字符串重複n次。

'hello'.repeat(3) // "hellohellohello"

九、padStart()，padEnd()　　字符串補全長度。

若是某個字符串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

'x'.padStart(10, 'abc') // 'abcabcabcx'
'x'.padStart(5, 'm') // 'mmmmx'
'x'.padEnd(10, 'abc') // 'xabcabcabc'
'x'.padEnd(5, 'm') // 'xmmmm'

十、模板字符串

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var basket={
        count:123,
        onSale:'ddd'
    };
    $('#result').append(`
        There are <b>${basket.count}</b> items
        in your basket, <em>${basket.onSale}</em>
        are on sale!
    `);
});
</script>
<div id="result" style="border:1px solid red;"></div>

若是在模板字符串中須要使用反引號，則前面要用反斜槓轉義。

模板字符串中嵌入變量，須要將變量名寫在${}之中。

十一、標籤模板

十二、String.raw() 

---

 

 

...