ES6新增的內容

• 之前的都是 ES5 的內容
• 接下來我們聊一下 ES6 的內容

let 和 const 關鍵字

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

1、let 和 const 不允許重復聲明變量

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

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

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

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

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

• let 和 const 的區別

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

let const

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

let const

箭頭函數

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

function

• 語法： (函數的行參) => { 函數體內要執行的代碼 }

const

箭頭函數的特殊性

• 箭頭函數內部沒有 this，箭頭函數的 this 是上下文的 this

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

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

const

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

const

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

const

函數傳遞參數的時候的默認值

• 我們在定義函數的時候，有的時候需要一個默認值出現
• 就是當我不傳遞參數的時候，使用默認值，傳遞參數了就使用傳遞的參數

function

• 在 ES6 中我們可以直接把默認值寫在函數的行參位置

function

• 這個默認值的方式箭頭函數也可以使用

const

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

解構賦值

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

解構對象

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

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

解構數組

• 快速的從數組中獲取成員

// ES5 的方式從數組中獲取成員 // 使用解構賦值的方式從數組中獲取成員

注意

• {} 是專門解構對象使用的
• [] 是專門解構數組使用的
• 不能混用

模版字符串

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

let

• 和單引號好友雙引號的區別

1、反引號可以換行書寫

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

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

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

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

展開運算符

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

let

• 合并數組的時候可以使用

let

• 也可以合并對象使用

let

• 在函數傳遞參數的時候也可以使用

let

Map 和 Set

• 是 ES6 新增的兩個數據類型
• 都是屬于內置構造函數
• 使用 new 的方式來實例化使用

Set

• 使用方式就是和 new 連用

const

• 就是一個數據集合
• 我們可以在 new 的時候直接向內部添加數據

// 實例化的時候直接添加數據要以數組的形式添加

• 看上去是一個類似數組的數據結構，但是不是，就是 Set 數據結構

常用方法和屬性

• size ： 用來獲取該數據結構中有多少數據的

const

看上去是一個和數組數據類型差不多的數據結構，而且我們也看到了 length 屬性

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

• add : 用來向該數據類型中追加數據

const

這個方法就是向該數據類型中追加數據使用的

• delete : 是刪除該數據結構中的某一個數據

const

• clear ： 清空數據結構中的所有數據

const

• has ： 查詢數據解構中有沒有某一個數據

const

• forEach : 用來遍歷 Set 數據結構的方法

const

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

const

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

const

Map

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

const

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

const

常用方法和屬性

• size ： 用來獲取該數據類型中數據的個數

const

• delete : 用來刪除該數據集合中的某一個數據

const

• set : 用來向該數據集合中添加數據使用

const

• get : 用來獲取該數據集合中的某一個數據

const

• clear : 清除數據集合中的所有數據

const

• has ： 用來判斷數據集合中是否存在某一個數據

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

總結

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

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