ES6新增的內(nèi)容

• 之前的都是 ES5 的內(nèi)容
• 接下來我們聊一下 ES6 的內(nèi)容

let 和 const 關(guān)鍵字

• 我們以前都是使用 var 關(guān)鍵字來聲明變量的
• 在 ES6 的時候，多了兩個關(guān)鍵字 let 和 const，也是用來聲明變量的
• 只不過和 var 有一些區(qū)別

1、let 和 const 不允許重復(fù)聲明變量

// 使用 var 的時候重復(fù)聲明變量是沒問題的，只不過就是后面會把前面覆蓋掉 // 使用 let 重復(fù)聲明變量的時候就會報錯了

2、let 和 const 聲明的變量不會在預(yù)解析的時候解析（也就是沒有變量提升）

// 因為預(yù)解析（變量提升）的原因，在前面是有這個變量的，只不過沒有賦值 // 因為 let 不會進行預(yù)解析（變量提升），所以直接報錯了 // 因為 const 不會進行預(yù)解析（變量提升），所以直接報錯了

3、let 和 const 聲明的變量會被所有代碼塊限制作用范圍

// var 聲明的變量只有函數(shù)能限制其作用域，其他的不能限制 // let 聲明的變量，除了函數(shù)可以限制，所有的代碼塊都可以限制其作用域（if/while/for/...） // const 聲明的變量，除了函數(shù)可以限制，所有的代碼塊都可以限制其作用域（if/while/for/...）

• let 和 const 的區(qū)別

1、let 聲明的變量的值可以改變，const 聲明的變量的值不可以改變

let const

2、let 聲明的時候可以不賦值，const 聲明的時候必須賦值

let const

箭頭函數(shù)

• 箭頭函數(shù)是 ES6 里面一個簡寫函數(shù)的語法方式
• 重點： 箭頭函數(shù)只能簡寫函數(shù)表達式，不能簡寫聲明式函數(shù)

function

• 語法： (函數(shù)的行參) => { 函數(shù)體內(nèi)要執(zhí)行的代碼 }

const

箭頭函數(shù)的特殊性

• 箭頭函數(shù)內(nèi)部沒有 this，箭頭函數(shù)的 this 是上下文的 this

// 在箭頭函數(shù)定義的位置往上數(shù)，這一行是可以打印出 this 的

• 按照我們之前的 this 指向來判斷，兩個都應(yīng)該指向 obj
• 但是 fun 因為是箭頭函數(shù)，所以 this 不指向 obj，而是指向 fun 的外層，就是 window
• 箭頭函數(shù)內(nèi)部沒有 arguments 這個參數(shù)集合

const

• 函數(shù)的行參只有一個的時候可以不寫 () 其余情況必須寫

const

• 函數(shù)體只有一行代碼的時候，可以不寫 {} ，并且會自動 return

const

函數(shù)傳遞參數(shù)的時候的默認(rèn)值

• 我們在定義函數(shù)的時候，有的時候需要一個默認(rèn)值出現(xiàn)
• 就是當(dāng)我不傳遞參數(shù)的時候，使用默認(rèn)值，傳遞參數(shù)了就使用傳遞的參數(shù)

function

• 在 ES6 中我們可以直接把默認(rèn)值寫在函數(shù)的行參位置

function

• 這個默認(rèn)值的方式箭頭函數(shù)也可以使用

const

• 注意： 箭頭函數(shù)如果你需要使用默認(rèn)值的話，那么一個參數(shù)的時候也需要寫 （）

解構(gòu)賦值

• 解構(gòu)賦值，就是快速的從對象或者數(shù)組中取出成員的一個語法方式

解構(gòu)對象

• 快速的從對象中獲取成員

// ES5 的方法向得到對象中的成員 // 解構(gòu)賦值的方式從對象中獲取成員

解構(gòu)數(shù)組

• 快速的從數(shù)組中獲取成員

// ES5 的方式從數(shù)組中獲取成員 // 使用解構(gòu)賦值的方式從數(shù)組中獲取成員

注意

• {} 是專門解構(gòu)對象使用的
• [] 是專門解構(gòu)數(shù)組使用的
• 不能混用

模版字符串

• ES5 中我們表示字符串的時候使用 '' 或者 ""
• 在 ES6 中，我們還有一個東西可以表示字符串，就是 ``（反引號）

let

• 和單引號好友雙引號的區(qū)別

1、反引號可以換行書寫

// 這個單引號或者雙引號不能換行，換行就會報錯了 let

2、反引號可以直接在字符串里面拼接變量

// ES5 需要字符串拼接變量的時候 // 模版字符串拼接變量

在 `` 里面的 ${} 就是用來書寫變量的位置

展開運算符

• ES6 里面號新添加了一個運算符 ... ，叫做展開運算符
• 作用是把數(shù)組展開

let

• 合并數(shù)組的時候可以使用

let

• 也可以合并對象使用

let

• 在函數(shù)傳遞參數(shù)的時候也可以使用

let

Map 和 Set

• 是 ES6 新增的兩個數(shù)據(jù)類型
• 都是屬于內(nèi)置構(gòu)造函數(shù)
• 使用 new 的方式來實例化使用

Set

• 使用方式就是和 new 連用

const

• 就是一個數(shù)據(jù)集合
• 我們可以在 new 的時候直接向內(nèi)部添加數(shù)據(jù)

// 實例化的時候直接添加數(shù)據(jù)要以數(shù)組的形式添加

• 看上去是一個類似數(shù)組的數(shù)據(jù)結(jié)構(gòu)，但是不是，就是 Set 數(shù)據(jù)結(jié)構(gòu)

常用方法和屬性

• size ： 用來獲取該數(shù)據(jù)結(jié)構(gòu)中有多少數(shù)據(jù)的

const

看上去是一個和數(shù)組數(shù)據(jù)類型差不多的數(shù)據(jù)結(jié)構(gòu)，而且我們也看到了 length 屬性

但是不能使用，想要獲取該數(shù)據(jù)類型中的成員數(shù)量，需要使用 size 屬性

• add : 用來向該數(shù)據(jù)類型中追加數(shù)據(jù)

const

這個方法就是向該數(shù)據(jù)類型中追加數(shù)據(jù)使用的

• delete : 是刪除該數(shù)據(jù)結(jié)構(gòu)中的某一個數(shù)據(jù)

const

• clear ： 清空數(shù)據(jù)結(jié)構(gòu)中的所有數(shù)據(jù)

const

• has ： 查詢數(shù)據(jù)解構(gòu)中有沒有某一個數(shù)據(jù)

const

• forEach : 用來遍歷 Set 數(shù)據(jù)結(jié)構(gòu)的方法

const

• 方法介紹的差不多了，有一個問題出現(xiàn)了，那就是
• 我們的方法要么是添加，要么是刪除，要么是查詢，沒有獲取
• 因為要獲取 Set 結(jié)構(gòu)里面的數(shù)據(jù)需要借助一個 ... 展開運算符
• 把他里面的東西都放到一個數(shù)組里面去，然后再獲取

const

• 又一個問題出現(xiàn)了，new 的時候需要以數(shù)組的形式傳遞
• 然后獲取的時候又要轉(zhuǎn)成數(shù)組的形式獲取
• 那么我為什么不一開始就定義數(shù)組，要這個 Set 數(shù)據(jù)類型干什么
• 這就不得不提到一個 Set 的特點
• Set 不允許存儲重復(fù)的數(shù)據(jù)

const

Map

• 也是要和 new 連用
• 是一個數(shù)據(jù)集合，是一個很類似于 對象 的數(shù)據(jù)集合

const

• 我們的對象中不管存儲什么，key 一定是一個字符串類型
• 但是再 Map 里面，我們的 key 可以為任意數(shù)據(jù)類型
• 我們也管 Map 叫做 （值 = 值 的數(shù)據(jù)類型）

const

常用方法和屬性

• size ： 用來獲取該數(shù)據(jù)類型中數(shù)據(jù)的個數(shù)

const

• delete : 用來刪除該數(shù)據(jù)集合中的某一個數(shù)據(jù)

const

• set : 用來向該數(shù)據(jù)集合中添加數(shù)據(jù)使用

const

• get : 用來獲取該數(shù)據(jù)集合中的某一個數(shù)據(jù)

const

• clear : 清除數(shù)據(jù)集合中的所有數(shù)據(jù)

const

• has ： 用來判斷數(shù)據(jù)集合中是否存在某一個數(shù)據(jù)

const 千鋒HTML5學(xué)院：JavaScript學(xué)習(xí)筆記（二十）-- DOM動畫效果?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的es6 数组合并_JavaScript学习笔记（十九）-- ES6的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。