文章目錄

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

ES6語法

ES6相關(guān)概念

什么是ES6

ES的全稱是ECMAscript，它是由ECMA國際話標(biāo)準(zhǔn)組織制定的一項(xiàng)腳本語言的標(biāo)準(zhǔn)化規(guī)范。

為什么使用ES6？

每一次標(biāo)準(zhǔn)的誕生都意味著語言的完善，功能的加強(qiáng)。
JavaScript語言本身也有一些令人不滿意的地方。

• 變量提升特效增加了程序運(yùn)行時(shí)的不可預(yù)測性
• 語法過于松散，實(shí)現(xiàn)相同的功能，不同的人可能會(huì)寫出不同的代碼

ES6新增語法

let 關(guān)鍵字

ES6中新增了用于聲明變量的關(guān)鍵字

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

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

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

不存在變量提升

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

暫時(shí)性死區(qū)

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

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]();

**圖解：**此題的關(guān)鍵點(diǎn)在于變量i是全局的，函數(shù)執(zhí)行時(shí)輸出的都是全局作用域下的i值。

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

圖解:此題的關(guān)鍵點(diǎn)在于每次循環(huán)都會(huì)產(chǎn)生一個(gè)塊級作用域，每個(gè)塊級作用域中的變量都是不同的，函數(shù)執(zhí)行時(shí)輸出的是自己上一級（循環(huán)產(chǎn)生的塊級作用域）作用域下的i值。

小結(jié)

• let關(guān)鍵字就是用來聲明變量的
• 使用let關(guān)鍵字聲明的變量具有塊級作用域
• 在一個(gè)大括號中使用let關(guān)鍵字聲明的變量才具有塊級作用域，var關(guān)鍵字是不具備這個(gè)特點(diǎn)的
• 防止循環(huán)變量變成全局變量
• 使用let關(guān)鍵字聲明的變量沒有變量提升
• 使用let關(guān)鍵字聲明的變量具有暫時(shí)性死區(qū)特性

const

聲明常量，常量就是值（內(nèi)存地址）不能變化的量

具有塊級作用域

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

聲明常量時(shí)必須賦值

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.

小結(jié)

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

let、const、var的區(qū)別

• 使用var聲明的變量，其作用域?yàn)樵撜Z句所在的函數(shù)內(nèi)，且存在變量提升現(xiàn)象
• 使用let聲明的變量，其作用域?yàn)樵撜Z句所在的代碼塊內(nèi)，不存在變量提升
• 使用const聲明的是常量，在后面出現(xiàn)的代碼中不能在修改該常量的值

解構(gòu)賦值

ES6中允許從數(shù)組中提取值，按照對應(yīng)位置，對變量賦值，對象也可以實(shí)現(xiàn)解構(gòu)

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

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

對象解構(gòu)

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

小結(jié)

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

箭頭函數(shù)

ES6中新增的定義函數(shù)的方式

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

函數(shù)體中只有一句代碼，且代碼的執(zhí)行結(jié)果就是返回值，可以省略大括號

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

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

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

箭頭函數(shù)不綁定this關(guān)鍵字，箭頭函數(shù)中的this，指向的是桉樹定義位置上下文this

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

小結(jié)

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

常見面試題

1、this指向問題

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

剩余參數(shù)

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

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

剩余參數(shù)和結(jié)構(gòu)配合使用

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

ES6內(nèi)置對象擴(kuò)展

Array的擴(kuò)展方法

擴(kuò)展運(yùn)算符（展開語法）

擴(kuò)展運(yùn)算符可以將數(shù)組或者對象轉(zhuǎn)為用逗號分隔的參數(shù)序列

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

擴(kuò)展運(yùn)算符可以應(yīng)用與合并數(shù)組

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

將類數(shù)組或可遍歷對象轉(zhuǎn)換為真正的數(shù)組

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

構(gòu)造函數(shù)方法：Array.from()

將偽數(shù)組或可遍歷對象轉(zhuǎn)換為真正的數(shù)組

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

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

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

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

實(shí)例方法：find（）

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

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

實(shí)例方法：findIndex()

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

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

實(shí)例方法：includes()

判斷某個(gè)數(shù)組是否包含給定的值，返回布爾值

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

String的擴(kuò)展方法

模板字符串

ES6新增的創(chuàng)建字符串的方式，使用反引號定義

let name = `xiaohu`;

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

let name = '小明'; let sayHello = `hello,my name is ${name}`; console.log(sayHello) //打印出來的結(jié)果為 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> `;

在模板字符串中可以調(diào)用函數(shù)

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

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

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

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

實(shí)例方法：repeat()

repeat方法表示將原字符串重復(fù)n次，返回一個(gè)新字符串

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

Set數(shù)據(jù)結(jié)構(gòu)

ES6提供了新的數(shù)據(jù)結(jié)構(gòu)Set。它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。
Set本身是一個(gè)構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)

const s =new Set();

Set函數(shù)可以接受一個(gè)數(shù)組作為參數(shù)，用來初始化。

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

實(shí)例方法

• add（value）:添加某個(gè)值，返Set結(jié)構(gòu)本身
• delete（value）：刪除某個(gè)值，返回一個(gè)布爾值，表示刪除成功
• has(value):返回一個(gè)布爾值，表示該值是為Set的成員
• clear():清除所有成員，沒有返回值

const S = new Set (); s.add(1).add(2).add(3); //向Set里面添加值 s.delete(2) //刪除set結(jié)構(gòu)中的2值 s.has(1) //表示set結(jié)構(gòu)中是否有1這個(gè)值 返回布爾值 s.clear() //清除set 結(jié)構(gòu)中的所有值//注意：刪除的是元素的值，不是代表的索引

遍歷

Set 結(jié)構(gòu)的實(shí)例與數(shù)組一樣，也擁有forEach方法，用于對每個(gè)成員執(zhí)行某種操作，沒有返回值。

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

總結(jié)

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

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