ES6部分常用语法
一.使用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=10let有暫時(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);//-14.實(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);//我是模板字符串,我是模板字符串fn2.兩種實(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);//false3.實(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é)
- 上一篇: 【Django】基于PythonWeb的
- 下一篇: LTE(4G) - NR(5G) RB