摘要：感覺對我這種沒實習(xí)沒工作的新手，雖然一些高級的功能暫時用不上，但是一些基礎(chǔ)的知識還是為平時的開發(fā)提供了巨大的便利。學(xué)習(xí)告一段落，現(xiàn)在結(jié)合平時的開發(fā)，總結(jié)一些常用的知識。日常開發(fā)中，塊級作用域中使用的變量，盡量使用或者聲明。使用時，進(jìn)行合并。

很早之前就學(xué)過TypeScript和ES6，后來做項目的時候零零散散用了些。這幾天又系統(tǒng)地把ES6的知識看了一遍。感覺對我這種沒實習(xí)沒工作的新手，雖然一些高級的功能暫時用不上，但是一些基礎(chǔ)的知識還是為平時的開發(fā)提供了巨大的便利。ES6學(xué)習(xí)告一段落，現(xiàn)在結(jié)合平時的開發(fā)，總結(jié)一些常用的知識。

ES6新增了塊級作用域，總結(jié)一句話大致就是：大括號{}包起來的代碼塊基本山都可以當(dāng)做塊級作用域。

常見的有

直接使用{}包起來：

 {
var a = 4
 }

函數(shù)體大括號，if-else大括號，for循環(huán)大括號，switch大括號，try-catch大括號等。
需要注意的是，for循環(huán)，每一次循環(huán)時的{}都是一個獨立的塊級作用域。

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

上面代碼循環(huán)了五次，實際上有五個獨立的j。

日常開發(fā)中，我們就可以利用這個特性，來創(chuàng)建塊級作用域了。

使用let或const聲明的變量只在當(dāng)前塊級作用域生效，出了這個代碼塊，就無法訪問。

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

日常開發(fā)中，塊級作用域中使用的變量，盡量使用let或者const聲明。

需要注意的問題:

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

const聲明變量時，一定要初始化，否則會報錯。let建議也在聲明時初始化。

const聲明的變量一旦初始化，以后就不可以在進(jìn)行賦值操作，但可以對其引用的對象進(jìn)行更改。

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

let和const聲明的變量不能再重復(fù)聲明。
雖然var可以無限次重復(fù)聲明，但是并不適用于這兩個新的聲明方式。

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

不要用window.xxx去調(diào)用let與const聲明的變量
ES6規(guī)定，let、const、class聲明的全局變量，不屬于頂層對象的屬性。

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

字符串不能換行，如果換行只能使用+號

字符串中的引號如果和最外層相同，需要進(jìn)行轉(zhuǎn)義

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

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

現(xiàn)在可以方便的寫作：

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

總的來說，有三個好處:

不怕字符串中出現(xiàn)的引號；

不怕?lián)Q行，反引號包起來的字符串可以隨便換行；

使用${}將變量或表達(dá)式包起來直接放在字符串中，不用寫很多+

使用for...of代替for循環(huán):

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

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

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

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

方便地設(shè)置函數(shù)參數(shù)的默認(rèn)值

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

可以使用...加上變量名保存其他參數(shù)全部數(shù)量。
當(dāng)只知道函數(shù)的前幾個具體參數(shù)，不確定之后會有多少個參數(shù)傳入時，可以使用...把其他傳入的參數(shù)保存到一個數(shù)組中。

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

使用箭頭函數(shù)有兩個好處:

代碼更加簡潔

靜態(tài)綁定this
箭頭函數(shù)中，this指向的是定義箭頭函數(shù)的對象中的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"

第一個使用了箭頭函數(shù)，由于箭頭函數(shù)的this與其所在環(huán)境中的this相同，也就是與obj的this相同，而obj處于全局環(huán)境的活動對象中，this指向全局對象，這里指window，所以輸出outer。

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

第二個使用了尋常函數(shù)，作為obj2的一個屬性，func方法中的this指向了所在的對象。輸出inner。

一般來說，含有length屬性的對象就可以當(dāng)作類數(shù)組對象。平時獲取多個DOM對象后，不能使用數(shù)組中的很多方法。我們可以使用Array.from方便的轉(zhuǎn)換為數(shù)組,。

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

想要以某個值初始化數(shù)組，需要遍歷。而使用fill()方法，就方便了很多。

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

第一個參數(shù)是要填充的值，后面兩個與一般的數(shù)組方法一樣，起始索引和結(jié)束索引(不包括)。

和字符串的includes方法一樣，看數(shù)組中是否有給定值。

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

改寫為:

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

其與===的差別:

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帶了個負(fù)號，和0與+0不一樣。0和+0相同就像1和+1相同一樣。

Object.assign()是用來合并對象的。assign，譯作分配,指派。這個方法本意是將某些對象自己的屬性拷貝到目標(biāo)對象上。它不回去復(fù)制繼承來的屬性。
比如可以在定義某個配置的時候，定義一個基礎(chǔ)配置，在定義兩個不同情況下的配置。使用時，進(jìn)行合并。

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)

只是舉個例子。

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

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

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

Object.entries: ["key", "value"]組成的數(shù)組。

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

前面在函數(shù)的剩余參數(shù)處理中提到了...擴(kuò)展運(yùn)算符?？偨Y(jié)了一下，感覺有兩個用法:

用來讀取數(shù)組或者對象的時候，是把數(shù)組或?qū)ο蠼o擴(kuò)展開；

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

讀取的時候就是把數(shù)組或者對象給擴(kuò)展開來。

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

所以可以很方便的用來擴(kuò)展，合并數(shù)組或?qū)ο蟆?/p> 用作賦值

用作賦值的時候，是用作解構(gòu)賦值，含義就是把等號右邊表達(dá)式的剩余屬性或數(shù)組項都放到...后面的變量里。

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"} 是一個對象

對于對象的解構(gòu)賦值，會把對應(yīng)不到的屬性全部放進(jìn)...后面的變量對象中。

注意：因為是把剩下沒人要的屬性或者數(shù)組項都收下，所以...應(yīng)該放在數(shù)組或者對象中的最后，且只能有一個。

本文首發(fā)于我的博客
如有錯誤，歡迎指出!