一.使用let關(guān)鍵字申明變量

1.let申明的變量才具有塊級(jí)作用域，而var并不具有這個(gè)功能

<script>if(true){var a=200let num =100}console.log(a);console.log(num); </script>

?同樣在for循環(huán)中，可以看到效果：

我們要防止使用var,防止循環(huán)變量變成全局變量。

<script>for (var index = 0; index < 2; index++) {}console.log(index);// 2</script> <script>for (let index = 0; index < 2; index++) {}console.log(index);// index is not defined</script>

2.let不存在變量提升，而var會(huì)

console.log(a);// Cannot access 'a' before initializationlet a=10 console.log(a);//undefined 此時(shí)變量提升了，但是并沒有獲取到值var a=10

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

? ?<script

? ? ? ? var num=30

? ? ? ? if(true){

? ? ? ? //在此區(qū)域申明用let申明的變量具有塊級(jí)作用域，它并不會(huì)訪問外部的變量

? ? ? ? console.log(num);//Cannot access 'num' before initialization

? ? ? ? ?let num=20

? ? ? ? }

? ? </script>

接下來附加兩道題：

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

?

?<script>

? ? ? ? let arr = []

? ? ? ? for (let index = 0; index < 2; index++) {

? ? ? ? ? ? arr[index] = function () {

? ? ? ? ? ? ? ? console.log(index);

? ? ? ? ? ? }

? ? ? ? }

? ? ? ? arr[0]()//0

? ? ? ? arr[1]()//1

? ? </script>

使用const申明的常量也具有塊級(jí)作用域?

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

使用const申明的變量必須賦初始值

?

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

const PI=3.14 PI=100 //Assignment to constant variable.

對(duì)于復(fù)雜數(shù)據(jù)類型，比如說對(duì)象，它內(nèi)部的值是可以更改的，但是你對(duì)他它重新賦值，就是不可以的，也就是說常量所對(duì)應(yīng)的內(nèi)存地址是不可更改的，來看下列代碼：

const arr=[100,200]arr[0]=123console.log(arr);//[123,200]arr=[1,2] //更改常量所對(duì)應(yīng)的內(nèi)存地址，不可以console.log(arr)// Assignment to constant variable.

總結(jié)：var ,let 及 const的區(qū)別

a.使用var申明的變量，其作用域就是該語句所在的函數(shù)內(nèi)，且存在變量提升現(xiàn)象；

b.使用let申明的變量，其作用域就是該語句所在的代碼快內(nèi)，不存在變量提升現(xiàn)象；

c.使用const申明的是常量，在后面出現(xiàn)的代碼中不能再修改該常量出現(xiàn)的值。

?二、解構(gòu)賦值

1.數(shù)組解構(gòu)：允許我們按照一一對(duì)應(yīng)關(guān)系從數(shù)組中取值，然后將值賦給常量。解構(gòu)不成功的話，會(huì)返回underfined.

<script>let arr=[1,2,3]let [a,b,c,d,e]=arrconsole.log(a);//1console.log(b);//2console.log(c);//3console.log(d);//undefinedconsole.log(e);//undefined</script>

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

a.第一種寫法：

let person={name:'阿航',age:'18',sex:'男'}let {name,age,sex}=personconsole.log(name);console.log(age);console.log(sex);

b.第二種寫法：

let person={name:'阿航',age:'18',sex:'男'}let {name:myName}=person //冒號(hào)左邊的name用于屬性匹配，myName才是真正的變量console.log(myName);//阿航

三、箭頭函數(shù)：用來簡述函數(shù)定義的語法

const fn = () => {console.log(123);}fn()

箭頭函數(shù)中，如果函數(shù)只有一句代碼，并且代碼的執(zhí)行結(jié)果就是函數(shù)的返回值，那么大括號(hào)可以省略不寫。

const sum=(a,b)=>a+bconst res=sum(10,20)console.log(res);//30

箭頭函數(shù)中，如果形參只有一個(gè)，形參外側(cè)的小括號(hào)也是可以省略的。

const fn = n => {console.log(123);}fn()

箭頭函數(shù)不綁定this,箭頭函數(shù)中的this,指的是函數(shù)定義位置的上下文this.

function fn() {console.log(this); //{name: '李誕'}return () => {console.log(this); //{name: '李誕'}}}let obj = {name: '李誕'}const resFn = fn.call(obj)resFn()

附加一道箭頭函數(shù)的題目：

var obj={age:20,say:()=>{console.log(this.age);//指向window下面的age，并無此屬性，打印undefined}}obj.say()//對(duì)象并沒有自己的作用域，say方法其實(shí)是定義在了全局作用域window下（本題關(guān)鍵）

把這道題改造一下：

var age = 50var obj = {age: 20,say: () => {console.log(this.age);//50 輸出了window的age屬性}}obj.say()

四、剩余參數(shù)：允許我們將一個(gè)不定數(shù)量的參數(shù)表示為一個(gè)數(shù)組。

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

a.剩余參數(shù)和解構(gòu)賦值配合使用

let students=['李誕','徐志勝','何廣智']let [s1,...s2]=studentsconsole.log(s1);//李誕console.log(s2);?//['徐志勝', '何廣智']

五、擴(kuò)展運(yùn)算符（展開語法）：可以將數(shù)組或?qū)ο筠D(zhuǎn)為用逗號(hào)分割的參數(shù)序列。

<script>let arr=[1,2,3]console.log(...arr);//1 2 3 </script>

擴(kuò)展運(yùn)算符用途：a.可以用于合并數(shù)組；

let arr1=[1,2,3]let arr2=[4,5,6]let arr3=[...arr1,...arr2]console.log(arr3);//[1, 2, 3, 4, 5, 6]

上述代碼的另一種寫法：

let arr1=[1,2,3]let arr2=[4,5,6]arr1.push(...arr2)console.log(arr1);//[1, 2, 3, 4, 5, 6]

b.將偽數(shù)組或者可遍歷對(duì)象轉(zhuǎn)換成真正的數(shù)組，就可以用到數(shù)組的方法了。

<div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div><script>let divs = document.getElementsByTagName('div')console.log(divs); //HTMLCollection(5)?[div, div, div, div, div]let ary = [...divs] //將偽數(shù)組轉(zhuǎn)換成真正的數(shù)組console.log(ary); //[div, div, div, div, div]ary.push('a')console.log(ary);//?[div, div, div, div, div, 'a']</script>

六、內(nèi)置對(duì)象擴(kuò)展

（1）Array的擴(kuò)展方法

1.利用Array的擴(kuò)展方法Array.from()也可以將偽數(shù)組轉(zhuǎn)換成真正的數(shù)組：

let obj = {'0': '李誕','1': '池子','2': '王建國','length': 3}let transObj = Array.from(obj)console.log(transObj); //['李誕', '池子', '王建國']

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

let obj = {'0': '1','1': '2','2': '3','length': 3}let transObj = Array.from(obj,item=>item*2)console.log(transObj); //[2, 4, 6]

2.實(shí)例方法：find() 找到符合條件的第一個(gè)數(shù)組成員，沒有找到則返回undefined。

<script>let arr1=[{id:1,name:'張雨綺'},{id:2,name:'虞書欣'}]let arr2=arr1.find(item=>item.id==2)let arr3=arr1.find(item=>item.id==3)console.log(arr2);//{id: 2, name: '虞書欣'} console.log(arr3);//undefined</script>

3.實(shí)例方法：findIndex() 找到符合條件的第一個(gè)數(shù)組成員的索引位置，沒有找到則返回-1。

let arr=[1,3,10,15]let index1=arr.findIndex(item=>item>9)let index2=arr.findIndex(item=>item>20)console.log(index1);//2console.log(index2);//-1

4.實(shí)例方法includes（），表示某個(gè)數(shù)組是否包含給定的值，返回布爾值。

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

(2)String的擴(kuò)展方法

1.模板字符串

<script>let name='李明浩'let logName=`我的名字是${name}`console.log(logName);//我的名字是李明浩</script>

模板字符串可以換行顯示：

let res = {name: '徐藝',age: '20',sex: '男'}let html = `<div><span>${res.name}</span><span>${res.age}</span><span>${res.sex}</span></div>`console.log(html);

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

const fn = () => {return '我是模板字符串fn'} let html = `我是模板字符串,${fn()}` console.log(html);//我是模板字符串,我是模板字符串fn

2.兩種實(shí)例方法：?startsWith() 和 endsWith()

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

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

let str = 'Hello year 2022'let res1 = str.startsWith('Hello')console.log(res1);//truelet res2=str.endsWith('2023')console.log(res2);//false

3.實(shí)例方法：repeat（）

repeat（）方法表示將原字符串重復(fù)n次，得到一個(gè)新字符串。

<script>console.log('y'.repeat(5));//yyyyy</script>

4.Set數(shù)據(jù)結(jié)構(gòu)，它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。

<script>//Set本身是一個(gè)構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)let res1=new Set()console.log(res1.size);//0let res2=new Set(['a','b'])//可以接收一個(gè)數(shù)組作為Set的參數(shù)console.log(res2.size);//2</script>

利用new Set()還可以做數(shù)組去重：

//利用new Set()還可以做數(shù)組去重let arr = new Set(['a', 'a', 'b', 'b'])console.log(arr.size);//2const res3 = [...arr]console.log(res3);//['a', 'b']

Set實(shí)例的方法：

(1)add(value):添加某個(gè)值，返回Set結(jié)構(gòu)本身；

（2）delete(value):刪除某個(gè)值，返回一個(gè)布爾值，表示是否刪除成功；

（3）has(value):返回一個(gè)布爾值，表示該值是否是Set的成員；

（4）clear():清除所有成員，沒有返回值。

const s1 = new Set()//向Set結(jié)構(gòu)中添加數(shù)值，使用add方法let res1 = s1.add('a').add('b')console.log(res1.size); //2//從Set結(jié)構(gòu)中刪除數(shù)值，使用delete方法，還返回一個(gè)布爾值，表示是否刪除成功let res2 = s1.delete('a')console.log(s1.size); //1console.log(res2); //true//判斷某一個(gè)數(shù)值是否是Set結(jié)構(gòu)中的成員，使用has方法let res3 = s1.has('b')console.log(res3); //true//清空Set結(jié)構(gòu)中的所有值，使用clear方法let res4 = s1.clear()console.log(s1.size);//0 表示沒有成員

也可以遍歷Set數(shù)據(jù)結(jié)構(gòu)，從中取值：

let arr = new Set(['a', 'b', 'c'])arr.forEach(item => {console.log(item); // a b c})

總結(jié)

以上是生活随笔為你收集整理的ES6部分常用语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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