ES6新增的內(nèi)容

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

let 和 const 關(guān)鍵字

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

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

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

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

// 因?yàn)轭A(yù)解析（變量提升）的原因，在前面是有這個(gè)變量的，只不過沒有賦值 // 因?yàn)?let 不會(huì)進(jìn)行預(yù)解析（變量提升），所以直接報(bào)錯(cuò)了 // 因?yàn)?const 不會(huì)進(jìn)行預(yù)解析（變量提升），所以直接報(bào)錯(cuò)了

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

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

• let 和 const 的區(qū)別

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

let const

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

let const

箭頭函數(shù)

• 箭頭函數(shù)是 ES6 里面一個(gè)簡(jiǎn)寫函數(shù)的語(yǔ)法方式
• 重點(diǎn)： 箭頭函數(shù)只能簡(jiǎn)寫函數(shù)表達(dá)式，不能簡(jiǎn)寫聲明式函數(shù)

function

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

const

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

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

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

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

const

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

const

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

const

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

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

function

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

function

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

const

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

解構(gòu)賦值

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

解構(gòu)對(duì)象

• 快速的從對(duì)象中獲取成員

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

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

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

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

注意

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

模版字符串

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

let

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

1、反引號(hào)可以換行書寫

// 這個(gè)單引號(hào)或者雙引號(hào)不能換行，換行就會(huì)報(bào)錯(cuò)了 let

2、反引號(hào)可以直接在字符串里面拼接變量

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

在 `` 里面的 ${} 就是用來(lái)書寫變量的位置

展開運(yùn)算符

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

let

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

let

• 也可以合并對(duì)象使用

let

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

let

Map 和 Set

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

Set

• 使用方式就是和 new 連用

const

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

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

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

常用方法和屬性

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

const

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

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

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

const

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

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

const

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

const

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

const

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

const

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

const

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

const

Map

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

const

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

const

常用方法和屬性

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

const

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

const

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

const

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

const

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

const

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

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

總結(jié)

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

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