文章目錄

• ES6語法
• • ES6相關概念
  • • 什么是ES6
    • 為什么使用ES6？
  • ES6新增語法
  • • let 關鍵字
    • • let 聲明的變量只在所處于的塊級有限
      • 不存在變量提升
      • 暫時性死區
      • 面試題
      • 小結
    • const
    • • 具有塊級作用域
      • 聲明常量時必須賦值
      • 常量賦值后，值不能修改
      • 小結
    • let、const、var的區別
    • 解構賦值
    • • 數組解構
      • 對象解構
      • 小結
    • 箭頭函數
    • • 小結
      • 常見面試題
    • 剩余參數
    • • 剩余參數和結構配合使用
  • ES6內置對象擴展
  • • Array的擴展方法
    • • 擴展運算符（展開語法）
      • • 擴展運算符可以應用與合并數組
        • 將類數組或可遍歷對象轉換為真正的數組
      • 構造函數方法：Array.from()
      • 實例方法：find（）
      • 實例方法：findIndex()
      • 實例方法：includes()
    • String的擴展方法
    • • 模板字符串
      • • 模板字符串中可以解析變量
        • 模板字符串中可以換行
        • 在模板字符串中可以調用函數
      • 實例方法：startsWith() 和 endsWith()
      • 實例方法：repeat()
    • Set數據結構
    • • 實例方法
      • 遍歷

ES6語法

ES6相關概念

什么是ES6

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

為什么使用ES6？

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

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

ES6新增語法

let 關鍵字

ES6中新增了用于聲明變量的關鍵字

let 聲明的變量只在所處于的塊級有限

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

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

不存在變量提升

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

暫時性死區

利用let 聲明的變量會綁定在這個塊級作用域，不會受外界的影響

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

面試題

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

**圖解：**此題的關鍵點在于變量i是全局的，函數執行時輸出的都是全局作用域下的i值。

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關鍵字聲明的變量具有暫時性死區特性

const

聲明常量，常量就是值（內存地址）不能變化的量

具有塊級作用域

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

聲明常量時必須賦值

const AB;//Missing initializer in const declaration

常量賦值后，值不能修改

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

小結

• const聲明的變量是一個常量
• 既然是常量不能重新賦值，如果是基本數據類型，不能更改值，如果是復雜數據類型，不能更改地址值
• 聲明const時候必須要給定值

let、const、var的區別

• 使用var聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象
• 使用let聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升
• 使用const聲明的是常量，在后面出現的代碼中不能在修改該常量的值

解構賦值

ES6中允許從數組中提取值，按照對應位置，對變量賦值，對象也可以實現解構

數組解構

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

對象解構

let jsons ={name:'xiaohu',age:'18'}; let {name,age} = jsons; console.log(name);//打印結果為‘xiaohu’ console.log(age);//打印結果為20let {name:myname,age:myage} = jsons;//myname myage 為別名 console.log(myname);//‘xiaohu’ console.log(myage);//‘18’

小結

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

箭頭函數

ES6中新增的定義函數的方式

() = >{} //（）：代表是函數； // => :必須要的符號，指向哪一個代碼塊； // {} ：函數體const fn () =>{}//表示把一個函數賦值給fn

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

//原來的函數寫法 function father (father1,father2){return father1+father2; }//ES6寫法 const father = (father1,father2)=>father1+father2;

如形參里面只有一個，可以省略小括號

function fn (a){ return a; }//ES6寫法 const fn = a => a;

箭頭函數不綁定this關鍵字，箭頭函數中的this，指向的是桉樹定義位置上下文this

const obj = {name:"小hu同學"} function fn(){console.log(this);//this指向時obj對象return() =>{console.log(this);//這個this指向的是箭頭函數定義的位置，那么這個箭頭函數定義在fn里面，而這個fn指向是obj對象，所以這個this也指向的是obj對象} }//我們思考一下下面兩句代碼是什么意思？ const Fns = fn.call(obj); Fns();

小結

• 箭頭函數中不綁定this,箭頭函數中的this指向是它所定義的位置，可以簡單理解成，定義箭頭函數中的作用域的this指向誰，它就指向誰
• 箭頭函數的有點在于解決了匿名函數this指向的問題（匿名函數的執行環境更具有全局性），包括setTimout和serInterval中所造成的問題

常見面試題

1、this指向問題

var age = 18; var obj = {age:20,say:()=>{alert(this.age)} } obj.say(); //箭頭函數this指向的是被聲明的作用域里面，而對象沒有作用域的，所以箭頭函數雖然在對象中被定義，但是this指向的是全局作用域

剩余參數

剩余參數語法允許我們將一個不定數量的參數表示為一個數組，不定參數定義方式，這種方式很方便的去聲明不知道參數情況下的一個函數

function sum (a,...z){console.log(a);//console.log(z); } sum(1,2,3)

剩余參數和結構配合使用

let students = ['xiao1','xiao2','xiao3']; let [s1,...s2] = students; console.log(s1);//'xiao1' console.log(s2);//'[xiao2,'xiao3']'

ES6內置對象擴展

Array的擴展方法

擴展運算符（展開語法）

擴展運算符可以將數組或者對象轉為用逗號分隔的參數序列

let array = [1,2,3]; ...array //1,2,3 console.log(...array);//1,2,3 console.log(1,2,3);

擴展運算符可以應用與合并數組

//方法一 let ary =[1,2,3]; let ary2 = [4,5,6]; let ary3 = [...ary,ary2];//方法二 ary.push(...ary2);

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

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

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

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

//定義一個集合 let arrays = {'0':'a','1':'b','2':'c',length:3 }; //轉換為數組 let arr2 = Array.from(arrays);//['a','b','c']

方法還可以接受第二個參數，作用類似于數組的map方法，用來對每個元素進行處理，將處理后值放入返回的數組

let arrays = {"0":1,"1":2,length:2}let newAry = Array.from(arrayLike, item => item *2)//[2,4]

注意：如果是對象，那么屬性需要寫對應的索引

實例方法：find（）

用于找出一個符合條件的數組成員，如果沒有找到返回undefined

let ary =[{id:1,name:'小王' },{id:2,name:'小李' }];let target = arr.find((item,index) => item.id ==2); //找數組里面符合條件的值當數組中元素id等于2的查找出來，注意，指回匹配第一個

實例方法：findIndex()

用于找出第一個符合t條件的數組成員的位置，如果沒有找到就返回-1

let ary - [1,4,5,6,8]; let index = ary.findIndex((value,index) = > value > 7); console.log(index);//1

實例方法：includes()

判斷某個數組是否包含給定的值，返回布爾值

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

String的擴展方法

模板字符串

ES6新增的創建字符串的方式，使用反引號定義

let name = `xiaohu`;

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

let name = '小明'; let sayHello = `hello,my name is ${name}`; console.log(sayHello) //打印出來的結果為 hello,my name is 小明

模板字符串中可以換行

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

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

const say = function(return '都看到這里了，不點贊，收藏，加關注嘛！'; }; let greet = `${say()} 碼字不易`; console.log(greet) //打印結果是 都看到這里了，不點贊，收藏，加關注嘛！碼字不易

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

• startsWith()：表示參數字符串是否在原字符串的頭部，返回布爾值
• endsWith()：表示參數字符串是否在原字符串的尾部，返回布爾值

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

實例方法：repeat()

repeat方法表示將原字符串重復n次，返回一個新字符串

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

Set數據結構

ES6提供了新的數據結構Set。它類似于數組，但是成員的值都是唯一的，沒有重復的值。
Set本身是一個構造函數，用來生成Set數據結構

const s =new Set();

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

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

實例方法

• 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 結構中的所有值//注意：刪除的是元素的值，不是代表的索引

遍歷

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

s.forEach(value => console.log(value))

總結

以上是生活随笔為你收集整理的高级JavaScript第（五）篇的全部內容，希望文章能夠幫你解決所遇到的問題。

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