新手開發中經常使用ES6基礎知識總結

很早以前就學過TypeScript和ES6，後來作項目的時候零零散散用了些。這幾天又系統地把ES6的知識看了一遍。感受對我這種沒實習沒工做的新手，雖然一些高級的功能暫時用不上，可是一些基礎的知識仍是爲平時的開發提供了巨大的便利。ES6學習告一段落，如今結合平時的開發，總結一些經常使用的知識。

let與const及其相關

塊級做用域

ES6新增了塊級做用域，總結一句話大體就是：大括號{}包起來的代碼塊基本山均可以當作塊級做用域。

常見的有

1. 直接使用{}包起來：

   {
   var a = 4
    }

2. 函數體大括號，if-else大括號，for循環大括號，switch大括號，try-catch大括號等。
   須要注意的是，for循環，每一次循環時的{}都是一個獨立的塊級做用域。

   for(let i=0; a < 5; i++){
      let j = i
   }

上面代碼循環了五次，實際上有五個獨立的j。

平常開發中，咱們就能夠利用這個特性，來建立塊級做用域了。

塊級做用域變量let與const

使用let或const聲明的變量只在當前塊級做用域生效，出了這個代碼塊，就沒法訪問。

{
   let a = 5
 }
console.log(a) //  Uncaught ReferenceError: a is not defined

平常開發中，塊級做用域中使用的變量，儘可能使用let或者const聲明。

須要注意的問題:

1. let和const變量必定要先聲明，再使用，避免出錯。不要試圖利用變量提高的特性。

2. const聲明變量時，必定要初始化，不然會報錯。let建議也在聲明時初始化。

3. const聲明的變量一旦初始化，之後就不能夠在進行賦值操做，但能夠對其引用的對象進行更改。

   const noChangeMe;    // Uncaught SyntaxError: Missing initializer in const declaration
   const noChangeMe = [1,2,4]
   noChangeMe = [2, 3]    // Uncaught TypeError: Assignment to constant variable
   noChangeMe[100] = 100        // everything is OK

4. let和const聲明的變量不能再重複聲明。
   雖然var能夠無限次重複聲明，可是並不適用於這兩個新的聲明方式。

   let a = 1
   let a = 2        // Identifier 'a' has already been declared

5. 不要用window.xxx去調用let與const聲明的變量
   ES6規定，let、const、class聲明的全局變量，不屬於頂層對象的屬性。

String

使用反引號"`"

使用``將字符串包起來，能夠解決下面的問題:

• 字符串不能換行，若是換行只能使用+號

• 字符串中的引號若是和最外層相同，須要進行轉義

• 字符串中插入變量，須要用+號
  之前這樣的寫法:

var name = 'world'
var str = "小明說:\"hello, " + name + "\"" // 小明說:"hello, world"

如今能夠方便的寫做：

var name = 'world'
str str = `小明說："hello, ${name}"`

總的來講，有三個好處:

1. 不怕字符串中出現的引號；

2. 不怕換行，反引號包起來的字符串能夠隨便換行；

3. 使用${}將變量或表達式包起來直接放在字符串中，不用寫不少+

遍歷字符串

使用for...of代替for循環:

var string = 'string'
for(var i of string) {
    console.log(i)
}

includes(),startsWidth(),endsWidth()

不用使用indexOf()判斷字符串中是否包含某個值了，使用includes():

var string = 'string'
    string.includes('i'， 0)            // true

includes第二個參數表示查找的起始索引。
還可使用startsWidth()和endsWidth()判斷字符串是否以某些字符開始或結尾。

函數

參數的默認值

方便地設置函數參數的默認值

function print( a = 2 ){
    console.log(a)
}
print()    //2

擴展運算符...獲取其他參數

可使用...加上變量名保存其餘參數所有數量。
當只知道函數的前幾個具體參數，不肯定以後會有多少個參數傳入時，可使用...把其餘傳入的參數保存到一個數組中。

function print(value1, value2, ...values){
    console.log(values.join('--'))
}
print(1, 2, '參數3')        // 參數3
print(1, 2, '參數3', '參數4', '參數5')    // print(1, 2, '參數3', '參數4', '參數5')

使用箭頭函數

使用箭頭函數有兩個好處:

1. 代碼更加簡潔

2. 靜態綁定this
   箭頭函數中，this指向的是定義箭頭函數的對象中的this。

   var name = 'outer'
   var obj = {
   name: 'inner',
   func: () => {
       console.log(this.name)
   }
   }
   var obj2 = {
   name: 'inner',
   func: function() {
       console.log(this.name)
   }
   }
   obj.func() // "outer"
   obj2.func()    // "inner"

第一個使用了箭頭函數，因爲箭頭函數的this與其所在環境中的this相同，也就是與obj的this相同，而obj處於全局環境的活動對象中，this指向全局對象，這裏指window，因此輸出outer。

注意:obj對象的this與它的屬性中的this不同。

第二個使用了尋常函數，做爲obj2的一個屬性，func方法中的this指向了所在的對象。輸出inner。

數組

使用Array.from()把類數組對象轉爲數組

通常來講，含有length屬性的對象就能夠看成類數組對象。平時獲取多個DOM對象後，不能使用數組中的不少方法。咱們可使用Array.from方便的轉換爲數組,。

var divs = Array.from(document.querySelectorAll('div'))
divs.forEach((value, index) => {})

使用fill()初始化數組

想要以某個值初始化數組，須要遍歷。而使用fill()方法，就方便了不少。

var arr = new Array(100)  // 創建一個100元素的數組
arr.fill('初始值', 0, arr.length)

第一個參數是要填充的值，後面兩個與通常的數組方法同樣，起始索引和結束索引(不包括)。

使用includes方法

和字符串的includes方法同樣，看數組中是否有給定值。

對象

使用簡單的屬性表示和方法表示

var name = 'John'
var a = {
    name: name,
    sayName: function(){ console.log(this.name) }
}

改寫爲:

var name = 'John'
var a = {
    name,
    sayName () { console.log(this.name) }
}

記得Object.is()這個方法

其與===的差異:

NaN === NaN // false
Object.is(NaN, NaN) // true

-0 === +0   //true
Object.is(+0, -0)        // false
Object.is(+0, 0)        / true
Object.is(-0, 0)        / false

能夠這樣理解,遵循的原則: 是同一個東西就要相等。
NaN與NaN就是一個東西，而-0帶了個負號，和0與+0不同。0和+0相同就像1和+1相同同樣。

使用Object.assign()合併多個對象

Object.assign()是用來合併對象的。assign，譯做分配,指派。這個方法本意是將某些對象本身的屬性拷貝到目標對象上。它不回去複製繼承來的屬性。
好比能夠在定義某個配置的時候，定義一個基礎配置，在定義兩個不一樣狀況下的配置。使用時，進行合併。

var pathConfig = {
    path: 'style/images'
}
var devConfig = {
    baseUrl: 'http://localhost:8080/'
}
var buildConfig = {
    baseUrl: 'https://192.128.0.2'
}
// 使用時，合併
var mode = 'dev'
var config = Object.assign({}, pathConfig, mode === 'dev' ? devConfig : buildConfig)

只是舉個例子。

Object.keys()，Object.values()，Object.entries

這三個方法返回對象自身的，可枚舉的，屬性名爲字符串的屬性相關的東西，分別爲：

• Object.keys(): 屬性名組成的數組

• Object.values()： 屬性值組成的數組

• Object.entries: ["key", "value"]組成的數組。

var john = {
    name: 'John',
    age: 12
}
Object.keys(john) //  ["name", "age"]
Object.values(john) //  ["John", 12]
Object.entries(john) // [["name", "John"], ["age", 12]]

經常使用...運算符

前面在函數的剩餘參數處理中提到了...擴展運算符。總結了一下，感受有兩個用法:

1. 用來讀取數組或者對象的時候，是把數組或對象給擴展開；

2. 用來給對象或者數組賦值的時候，自動給對象或數組添加屬性或元素。

用來讀取

讀取的時候就是把數組或者對象給擴展開來。

var a = [...[1,2,3], 4]        // 把數組的每一項都展出來
a  // [1, 2, 3, 4]
var obj = {
    name: 'John',
    age: 12
}
var newObj  = {...obj, job: 'teacher' }        // 把某個屬性展出來
newObj // {name: "John", age: 12, job: "teacher"}

因此能夠很方便的用來擴展，合併數組或對象。

用做賦值

用做賦值的時候，是用做解構賦值，含義就是把等號右邊表達式的剩餘屬性或數組項都放到...後面的變量裏。

var a, restB
[a, ...restB] = [1, 3, 5]
a // 1
restB //    [3, 5]

var c, restD
{ name, ...restD } = {name: 'John', age: 12, job: 'teacher'}
name  //  "John"  是一個屬性的值
restD    //     { c, ...restD } = {name: 'John', age: 12, job: 'teacher'} 是一個對象

對於對象的解構賦值，會把對應不到的屬性所有放進...後面的變量對象中。

注意：由於是把剩下沒人要的屬性或者數組項都收下，因此...應該放在數組或者對象中的最後，且只能有一個。

本文首發於個人博客若有錯誤，歡迎指出!