一、字符串模板基本使用

在ES6之前，如果我們想要將字符串和一些動態的變量（標識符）拼接到一起，是非常麻煩和丑陋的（ugly）。
ES6允許我們使用字符串模板來嵌入JS的變量或者表達式來進行拼接：

• 首先，我們會使用 `` 符號來編寫字符串，稱之為模板字符串；
• 其次，在模板字符串中，我們可以通過 ${expression} 來嵌入動態的內容；
  

二、標簽模板字符串使用

模板字符串還有另外一種用法：標簽模板字符串（Tagged Template Literals）。

我們一起來看一個普通的JavaScript的函數：

如果我們使用標簽模板字符串，并且在調用的時候插入其他的變量：

• 模板字符串被拆分了；
• 第一個元素是數組，是被模塊字符串拆分的字符串組合；
• 后面的元素是一個個模塊字符串傳入的內容；
  

三、函數的默認參數

在ES6之前，我們編寫的函數參數是沒有默認值的，所以我們在編寫函數時，如果有下面的需求：

• 傳入了參數，那么使用傳入的參數；
• 沒有傳入參數，那么使用一個默認值；
  而在ES6中，我們允許給函數一個默認值：
  

默認值也可以和解構一起來使用：


另外參數的默認值我們通常會將其放到最后（在很多語言中，如果不放到最后其實會報錯的）： 但是JavaScript允許不將其放到最后，但是意味著還是會按照順序來匹配；

另外默認值會改變函數的length的個數，默認值以及后面的參數都不計算在length之內了：

// ES5以及之前給參數默認值 /* * 缺點： * 1. 寫起來麻煩，并且代碼閱讀性比較差 * 2. 這種寫法有bug * */ function foo(m, n) {m = m || 'aaa'n = n || 'bbb'console.log(m, n) } foo() // aaa bbb foo(0, '') // aaa bbb// 1.ES6可以給函數參數提供默認值 function bar(m = 'aaa', n = 'bbb') {console.log(m, n) } bar('hhh') // hhh bbb// 2.對象參數和默認值以及解構 // function printInfo(info = {name: 'why', age: 18}) { // console.log(info.name, info.age) // } function printInfo({name, age} = {name: 'why', age: 18}) {console.log(name, age) } printInfo() // why 18 printInfo({name: 'zep', age: 22}) // zep 22// 另一種寫法 function printInfo2({name = 'zep', age = 33} = {}) {console.log(name, age) } printInfo2() // zep 33// 3.有默認值的形參最好放到最后 function bar2(x, y, z = 30) {console.log(x, y, z) } bar2(10, 20) // 10 20 30function bar3(z = 30, x, y) {console.log(x, y, z) } bar3(10, 20) // 20 undefined 10 bar3(undefined, 10, 20) // 10 20 30// 4. 有默認值的函數的length屬性 console.log(bar3.length) // 0 console.log(bar2.length) // 2 function baz(x, y, z, m = 30, n) {console.log(x, y, z, m, n) } console.log(baz.length) // 3

四、函數的剩余參數

ES6中引用了rest parameter，可以將不定數量的參數放入到一個數組中：

• 如果最后一個參數是 … 為前綴的，那么它會將剩余的參數放到該參數中，并且作為一個數組；

那么剩余參數和arguments有什么區別呢？

• 剩余參數只包含那些沒有對應形參的實參，而 arguments 對象包含了傳給函數的所有實參；
• arguments對象不是一個真正的數組，而rest參數是一個真正的數組，可以進行數組的所有操作；
• arguments是早期的ECMAScript中為了方便去獲取所有的參數提供的一個數據結構，而rest參數是ES6中提供 并且希望以此來替代arguments的；
• 剩余參數必須放到最后一個位置，否則會報錯。

五、函數箭頭函數的補充

在前面我們已經學習了箭頭函數的用法，這里進行一些補充：

• 箭頭函數是沒有顯式原型的，所以不能作為構造函數，不能使用new來創建對象；
  

六、展開語法

展開語法(Spread syntax)：

• 可以在函數調用/數組構造時，將數組表達式或者string在語法層面展開；
• 還可以在構造字面量對象時, 將對象表達式按key-value的方式展開；

展開語法的場景：

• 在函數調用時使用；
• 在數組構造時使用；
• 在構建對象字面量時，也可以使用展開運算符，這個是在ES2018（ES9）中添加的新特性；

注意：展開運算符其實是一種淺拷貝；

七、數值的表示

八、Symbol的基本使用

Symbol是什么呢？Symbol是ES6中新增的一個基本數據類型，翻譯為符號。

那么為什么需要Symbol呢？

• 在ES6之前，對象的屬性名都是字符串形式，那么很容易造成屬性名的沖突；

• 比如原來有一個對象，我們希望在其中添加一個新的屬性和值，但是我們在不確定它原來內部有什么內容的情況下，很容易造成沖突，從而覆蓋掉它內部的某個屬性；
  

• 比如我們前面在講apply、call、bind實現時，我們有給其中添加一個fn屬性，那么如果它內部原來已經有了fn屬性了呢？

• 比如開發中我們使用混入，那么混入中出現了同名的屬性，必然有一個會被覆蓋掉；

Symbol就是為了解決上面的問題，用來生成一個獨一無二的值。

• Symbol值是通過Symbol函數來生成的，生成后可以作為屬性名；
• 也就是在ES6中，對象的屬性名可以使用字符串，也可以使用Symbol值；

Symbol即使多次創建值，它們也是不同的：Symbol函數執行后每次創建出來的值都是獨一無二的；

我們也可以在創建Symbol值的時候傳入一個描述description：這個是ES2019（ES10）新增的特性；

Symbol作為屬性名

我們通常會使用Symbol在對象中表示唯一的屬性名：

相同值的Symbol

前面我們講Symbol的目的是為了創建一個獨一無二的值，那么如果我們現在就是想創建相同的Symbol應該怎么來做呢？

• 我們可以使用Symbol.for方法來做到這一點；
• 并且我們可以通過Symbol.keyFor方法來獲取對應的key；
  

總結

以上是生活随笔為你收集整理的ES6（二）——字符串模板、标签模板字符串、函数的默认参数、剩余参数、数组对象的展开语法、数值的表示、Symbol的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。