目錄

• 1. ES6相關概念
• • 1.1 什么是 ES6 ?
  • 1.2 為什么使用 ES6 ?
• 2 ES6新增語法
• • 2.1 新增關鍵字
  • • 2.1.1 let 關鍵字
    • 小結
    • 2.1.2 const 關鍵字
    • 小結
    • 2.1.3 let、const、var 的區別
  • 2.2 解構賦值
  • • 2.2.1 數組解構
    • 2.2.2 對象解構
    • 小結
  • 2.3 箭頭函數
  • • 2.3.1 語法規范
    • 2.3.2 箭頭函數的調用
    • 2.3.3 this關鍵字
  • 2.4 剩余參數
  • 2.5 剩余參數和解構配合使用
• 3 ES6的內置對象擴展
• • 3.1 Array 的擴展方法
  • • 3.1.1 擴展運算符（展開語法）
    • 3.1.2 構造函數方法：Array.from()
    • 3.1.3 實例方法： find()
    • 3.1.4 實例方法：findIndex()
    • 3.1.5 實例方法：includes()
  • 3.2 String 的擴展方法
  • • 3.2.1 模板字符串
    • • 3.2.2 模板字符串的特點
    • 3.2.3 實例方法：startsWith() 和 endsWith()
    • 3.2.4 實例方法：repeat()
  • 3.3 Set 數據結構
  • • 3.3.1 利用Set數據結構做數組去重
    • 3.3.2 Set對象實例方法
    • 3.3.3 遍歷
• ~~待續

學習目標

• 能夠說出使用let關鍵字聲明變量的特點；
• 能夠使用解構賦值從數組中提取值；
• 能夠說出箭頭函數擁有的特性；
• 能夠使用剩余參數接收剩余的函數參數；
• 能夠使用拓展運算符拆分數組；
• 能夠說出模板字符串擁有的特性。

1. ES6相關概念

1.1 什么是 ES6 ?

ES 的全稱是 ECMAScript , 它是由 ECMA 國際標準化組織,制定的一項腳本語言的標準化規范。

ES6 實際上是一個泛指，泛指 ES2015 及后續的版本。

1.2 為什么使用 ES6 ?

每一次標準的誕生都意味著語言的完善，功能的加強。JavaScript 語言本身也有一些令人不滿意的地方。

• 變量提升特性增加了程序運行時的不可預測性；
• 語法過于松散，實現相同的功能，不同的人可能會寫出不同的代碼。

2 ES6新增語法

ES6 中新增了用于聲明變量的關鍵字。它的出現是為了替換var關鍵字。

2.1 新增關鍵字

2.1.1 let 關鍵字

1）let聲明的變量只在所處的塊級有效。
塊級作用域 - 在大括號 {}中。

if (true) { let a = 10;} console.log(a) // a is not defined

注意： 使用let關鍵字聲明的變量才具有塊級作用域特性，使用var聲明的變量不具備。

2）不存在變量提升

console.log(a); // a is not defined let a = 20; // 報錯

let聲明的變量沒有變量提升，必須先聲明再使用。

3）暫時性死區
利用let聲明的變量會綁定在這個塊級作用域，不會受外部代碼影響。

var tmp = 123;if (true) { tmp = 'abc';let tmp; }

解釋： 報錯“初始化前無法訪問tmp ”，它不會向上查找“var tmp = 123”。
原因是，在塊級中使用了let關鍵字，而它會將num變量與塊級這個整體進行綁定。

4）經典面試題（一）

var arr = [];for (var i = 0; i < 2; i++) {arr[i] = function () {console.log(i); }}arr[0]();arr[1]();

解釋：i是全局作用域下的變量，當循環到2時，不滿足循環條件，跳出循環，此時才執行arr[0]，輸出2。循環時，函數是不執行的。

5）經典面試題（二）
將上題中的var改為let。

let arr = [];for (let i = 0; i < 2; i++) {arr[i] = function () {console.log(i); }}arr[0]();arr[1]();

圖解：

此題的關鍵點在于每次循環都會產生一個塊級作用域，每個塊級作用域中的變量都是不同的，函數執行時輸出的是自己上一級（循環產生的塊級）作用域下的i值。

小結

• let關鍵字是用來聲明變量的；
• 使用let關鍵字聲明的變量具有塊級作用域特性；
• 在一個大括號中使用let關鍵字聲明的變量才具有塊級作用域特性，var關鍵字不具備；
• 防止循環變量變成全局變量；
• 使用let關鍵字聲明的變量沒有變量提升；
• 使用let關鍵字聲明的變量具有暫時性死區特性。

2.1.2 const 關鍵字

作用：用來聲明常量，常量就是值（內存地址）不能變化的量。

const 特點：

具有塊級作用域；

if (true) { const a = 10;} console.log(a) // a is not defined

解釋： 在塊級作用域內聲明的常量，外部代碼是找不到的，所以會報錯。

聲明常量時必須賦初始值；

const PI; // Missing initializer in const declaration // 報錯：常量聲明中缺少初始值

常量賦值后，值不能修改。

const PI = 3.14; PI = 100; // Assignment to constant variable. const ary = [100, 200]; ary[0] = 'a'; ary[1] = 'b'; console.log(ary); // ['a', 'b']; ary = ['a', 'b']; // Assignment to constant variable.

小結

• const聲明的是一個常量。
• 常量不能重新賦值；
  • 如果是基本數據類型，不能更改值；
  • 如果是復雜數據類型，數據結構內部的值可以更改，但數據值本身不可更改（其實質是地址值不可更改）。
• 聲明const時候必須要給定值。

2.1.3 let、const、var 的區別

使用var聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象。

使用let聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升。

使用const聲明的是常量，在后面出現的代碼中不能修改該常量的值。

2.2 解構賦值

ES6 中允許我們按照一一對應的方式，從數組或對象中提取值，再將提取出來的值，賦值給變量（按照對應位置，對變量賦值）。

解構： 表示分解數據結構；賦值： 給變量賦值。

• 數組解構
• 對象解構

2.2.1 數組解構

從數組中提取值，按照對應位置，對變量賦值。如果解構不成功，變量的值為undefined。

let [a, b, c] = [1, 2, 3];console.log(a)//1console.log(b)//2console.log(c)//3 //如果解構不成功，變量的值為undefined

解釋： 數組解構中，“=”右邊是數組，里面有3個值，分別為1、2、3，左邊的中括號[ ]不是表示數組，而是表示結構。中括號內是用let關鍵字聲明的變量。“=” 左、右兩邊是一一對應的關系。

2.2.2 對象解構

從對象中提取值，將提取出來的值，賦給另外的變量。

let person = { name: 'zhangsan', age: 20 }; let { name, age } = person; console.log(name); // 'zhangsan' console.log(age); // 20 let {name: myName, age: myAge} = person; // myName myAge 屬于別名 console.log(myName); // 'zhangsan' console.log(myAge); // 20

解釋： 對象解構中，“=”左邊用大括號{}表示，大括號中依然是關鍵字let聲明的變量；“=”的右邊，是具體的被解構的對象。

• 對象解構，實際上是屬性匹配。即變量名稱匹配對象中屬性的名稱；
• 如果匹配成功，就將對象中屬性的值，賦值給變量。

小結

• 解構賦值就是把數據結構分解，然后給變量進行賦值；
• 如果結構不成功，變量跟數值個數不匹配的時候，變量的值為undefined；
• 數組解構用中括號包裹，多個變量用逗號隔開，對象解構用花括號包裹，多個變量用逗號隔開；
• 利用解構賦值能夠讓我們方便的獲取對象中的屬性跟方法。

2.3 箭頭函數

作用： 用來簡化函數定義語法；是ES6中新增的定義函數的方式。

2.3.1 語法規范

( ) => {}

解釋： ():代表函數（小括號里面放形參）； =>:必須的符號，指向哪一個代碼塊；{}:函數體；

2.3.2 箭頭函數的調用

通常，將箭頭函數賦值給一個變量，變量名就是函數名，通過變量名來調用函數。

// 函數調用 const fn = () => {}//代表把一個函數賦值給fn <script>const fn =()=>{ // 小括號里放形參console.log(123);};fn(); </script>

1）如果函數體中只有一句代碼，且代碼的執行結果就是返回值，可以省略大括號。

A、普通寫法：

function sum(num1, num2) { return num1 + num2; }

B、省略{}大括號后的ES6寫法

//es6寫法const sum = (num1, num2) => num1 + num2;

2）如果 形參 只有一個，可以省略小括號()。

function fn (v) { return v; } // 省略小括號后 const fn = v => v;

2.3.3 this關鍵字

• 傳統函數當中，誰調用了函數，函數內部的this關鍵字就指向誰。
• 箭頭函數中，沒有自己的this，也就不具有這個特性；
• 箭頭函數不綁定this關鍵字，箭頭函數中的this，指向的是函數定義位置的上下文this。

const obj = { name: '張三'} function fn () { console.log(this);//this 指向 是obj對象return () => { console.log(this);//this 指向的是箭頭函數定義的位置，那么這個箭頭函數定義在fn里面，而這個fn指向是的obj對象，所以這個this也指向是obj對象。} } const resFn = fn.call(obj); resFn();

2.4 剩余參數

當函數實參個數大于形參個數時，我們可以將剩余的實參放到一個數組中（剩余參數語法，允許我們將一個不定數量的參數表示為一個數組）。

示例1

function sum (first, ...args) { console.log(first); // 10 console.log(args); // [20, 30] } sum(10, 20, 30)

…args表示接收所有的實參

示例2

<script>const sum=(...args)=>{let total=0;args.forEach(item()=>{total+=item;})return total;};console.log(sum(10, 20));console.log(sum(10, 20, 30)); </script>

回調函數形參item表示循環的當前項（數組中有多少個值就循環幾次）。
由于箭頭函數只有一個形參，因此包圍item的小括號可以去掉，并且箭頭函數體的內部也只有一句代碼，所以{}也可以去掉。則整段代碼可以簡寫：

<script>const sum=(...args)=>{let total=0;args.forEach(item=> total += item)return total;};console.log(sum(10, 20)); // 返回 30console.log(sum(10, 20, 30)); // 返回 60 </script>

2.5 剩余參數和解構配合使用

let students = ['wangwu', 'zhangsan', 'lisi']; let [s1, ...s2] = students; console.log(s1); // 'wangwu' console.log(s2); // ['zhangsan', 'lisi']

s1 接收“wangwu”這個變量，s2接收剩余的變量

3 ES6的內置對象擴展

3.1 Array 的擴展方法

3.1.1 擴展運算符（展開語法）

擴展運算符：正好和剩余參數是相反的，它可以將數組或者對象轉為用逗號分隔的參數序列。

let ary = [1, 2, 3]; ...ary console.log(...ary); // 輸出 1 2 3

數組變量ary前面加“…”，表示將數組元素拆分為以逗號分隔的參數序列。輸出中沒有逗號，是因為console.log方法中，逗號會被當做方法的參數分隔符。

應用： 擴展運算符應用于合并數組。

// 方法一 let ary1 = [1, 2, 3]; let ary2 = [3, 4, 5]; let ary3 = [...ary1, ...ary2]; console.log(ary3) // 輸出[1,2,3,3,4,5] // 方法二 ary1.push(...ary2);

方法二中的push()方法，可以向數組中追加元素。push方法可以接收多個參數

將類數組或可遍歷對象轉換為真正的數組：

let oDivs = document.getElementsByTagName('div'); oDivs = [...oDivs];

3.1.2 構造函數方法：Array.from()

Array.from() 方法，它接收一個偽數組做參數，返回值（轉換后的結果）是一個真正的數組（也即將類數組或可遍歷對象轉換為真正的數組）：

let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

上面這段代碼中的arrayLike變量，是一個偽數組。然后將此偽數組做為參數，傳遞到方法中，方法的返回值即是真正的數組。

Array.from() 方法還可以接收第二個參數。第二個參數是一個函數。它的作用是對數組中的元素進行加工處理。數組中有多少個元素，函數就會被調用多少次。此函數有一個形參，代表要處理的值。只需將處理的結果返回即可。

let arrayLike = { "0": 1, "1": 2, "length": 2 } let newAry = Array.from(aryLike, (item) => {return item *2 });

由于只有一個形參，且函數體內只有一句代碼，因此可簡寫為：

let arrayLike = { "0": 1, "1": 2, "length": 2 } let newAry = Array.from(aryLike, item => item *2)

解釋： 在函數內部，將數組中的每個值都乘以了2

3.1.3 實例方法： find()

查找數組中第一個符合條件的數組成員，它接收一個函數作為參數。在參數的函數體中，要返回一個布爾值。如果沒有找到返回undefined

find( ) 方法，它的內部其實就是查找條件

let ary = [{ id: 1, name: '張三‘ }, { id: 2, name: '李四‘ }]; let target = ary.find((item, index) => item.id == 2);

item和index是參數函數中的兩個形參。item代表當前循環到的值，index是當前循環到的值的索引。由于當前沒有用到index索引，因此index也可以省略不寫。

let ary = [{ id: 1, name: '張三‘ }, { id: 2, name: '李四‘ }]; let target = ary.find(item=> item.id == 2); console.log(target) // 輸出 “李四”

3.1.4 實例方法：findIndex()

作用： findIndex()方法，用于查找數組中第一個符合條件的值在數組中的索引。如果找不到，則返回-1。
它的使用方法同find()一樣。

let ary = [1, 5, 10, 15]; let index = ary.findIndex((value, index) => value > 9); console.log(index); // 2

3.1.5 實例方法：includes()

includes()方法的作用是，判斷數組中是否包含某一個元素（給定的值），返回布爾值。
括號內的參數，就是要判斷的元素。

[1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false

includes：“包含”的意思

3.2 String 的擴展方法

3.2.1 模板字符串

ES6新增的聲明字符串的方式，使用反引號定義。

示例：

let name = `zhangsan`;

3.2.2 模板字符串的特點

1）模板字符串中可以解析變量。

let name = '張三'; let sayHello = `hello,my name is ${name}`; // hello, my name is zhangsan

$和{}組合使用，即可解析變量內容，不需要用+連接字符串。

2）模板字符串中可以換行

let result = { name: 'zhangsan', age: 20, sex: '男' } let html = ` <div> <span>${result.name}</span> <span>${result.age}</span> <span>${result.sex}</span> </div> `;

3）在模板字符串中可以調用函數

const fn = () => {return '我是fn函數'; }; let str = `模板字符串：${fn()}`; // 模板字符串：我是fn函數

字符串中調用函數的位置，會顯示函數執行后的返回值。

3.2.3 實例方法：startsWith() 和 endsWith()

• startsWith()：判斷參數字符串是否以某字符串的開頭，返回布爾值；
• endsWith()：判斷參數字符串是否以某字符串的結尾，返回布爾值。

let str = 'Hello world!'; str.startsWith('Hello') // true str.endsWith('!') // true

3.2.4 實例方法：repeat()

將原字符串進行重復，返回一個新字符串。它接收一個數值n做為參數，表示將字符串重復n次

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello"

3.3 Set 數據結構

ES6 提供了新的數據結構 Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。

應用場景 ，比如：
電商網站中的搜索功能，用戶搜索完成后，網站要記錄用戶搜索的關鍵字，方便用戶下次直接點擊搜索歷史關鍵字就可以進行搜索。

Set本身是一個構造函數。用來生成 Set 數據結構。
創建此構造函數的實例對象，就是在創建Set數據結構。

const s = new Set();

Set函數可以接受一個數組作為參數，用來初始化。

const set = new Set([1, 2, 3, 4, 4]);

3.3.1 利用Set數據結構做數組去重

const s1 = new Set(); console.log(s1.size) const s2=new Set(["a","b"]); const.log(s2.size); const s3= new Set(['a','a','b','b']) console.log(s3.size); const ary = [...s3]; const.log(ary)

3.3.2 Set對象實例方法

常用實例方法：

• add(value)：添加某個值，返回 Set 結構本身；
• delete(value)：刪除某個值，返回一個布爾值，表示刪除是否成功；
• has(value)：返回一個布爾值，表示該值是否為 Set 的成員；
• clear()：清除所有成員，沒有返回值

const s = new Set(); s.add(1).add(2).add(3); // 向 set 結構中添加值 s.delete(2) // 刪除 set 結構中的2值 s.has(1) // 表示 set 結構中是否有1這個值 返回布爾值 s.clear() // 清除 set 結構中的所有值

3.3.3 遍歷

從Set數據結構中取值。
Set 結構的實例與數組一樣，也擁有forEach方法，用于對每個成員執行某種操作，沒有返回值。

// forEach方法遍歷取值 const s = new Set(['a','b','c']); s.forEach(value => {console.log(value) // 輸出 a b c })

~~待續

上一篇：JavaScript從入門到放棄 -（六）正則表達式

總結

以上是生活随笔為你收集整理的JavaScript从入门到放弃 -（七）ES6的全部內容，希望文章能夠幫你解決所遇到的問題。

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