欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)

 更新時(shí)間：2022年09月18日 09:14:23   作者：楓玄霧隱  
ES6為我們?cè)诤瘮?shù)的使用上也提供了許多的便捷的東西,下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一.let,var,const區(qū)別

let

關(guān)鍵字用來(lái)聲明塊級(jí)變量。

-- 特點(diǎn)就是在{}聲明具有塊級(jí)作用域，var變量無(wú)此特點(diǎn)。

-- 防止循環(huán)變量編程全局變量。

-- let 關(guān)鍵詞無(wú)變量提升。

-- let 關(guān)鍵詞有暫時(shí)性死區(qū)的特點(diǎn)。{先聲明后使用}

const

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

對(duì)象的本身是可變的，所以可以添加屬性，但是地址不可改變

區(qū)別

 使用 var 聲明的變量，其作用域?yàn)樵撜Z(yǔ)句所在的函數(shù)內(nèi)，且存在變量提升現(xiàn)象

- 使用 let 聲明的變量，其作用域?yàn)樵撜Z(yǔ)句所在的代碼塊內(nèi)，不存在變量提升

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

- 使用let，const的聲明的變量不屬性頂層對(duì)象，返回undefined。

二，解構(gòu) 

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

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

let[a,...c] = [1,2,3];//合并運(yùn)算符可以展開(kāi)數(shù)組也可合并數(shù)組

console.log(c);//[2, 3]

console.log(...c);//2 3

let [x,y='2'] = ['a',undefined];

console.log(y);//如果沒(méi)有定義，可以用默認(rèn)值

說(shuō)明：ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。所以，只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效。

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

根據(jù)key解構(gòu)

let person = {name:"小帥",age:18};
let {name,age,height} = person;
console.log(name);//小帥
console.log(age);//18
console.log(height);//undefined

說(shuō)明：對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按順序排列的，變量的取值由它的位置決定；而對(duì)象的屬性沒(méi)有次序，變量必須與屬性同名，才能取到正確的值，否則解構(gòu)失敗就是undefined。

let { realname: myname,height=173 } = { realname: '張三', age: 18};
console.log(Myname);//張三
console.log(Myage)//18
console.log(realname)//realname is not defined
console.log(height)//當(dāng)屬性沒(méi)有的時(shí)候支持默認(rèn)值

說(shuō)明：對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。真正被賦值的是后者，而不是前者。

.3 字符串解構(gòu)

let [a,b,c] = "hello";
console.log(a);//h
console.log(b);//e
console.log(c);//l

三，箭頭函數(shù) 

1 基礎(chǔ)語(yǔ)法

//原js寫(xiě)法
function myFun(k,v){ ??
??????? return k + v;
}

//es6 寫(xiě)法
const myFun1 = (k,v) => {
??????? return k+v;
}

2 省略寫(xiě)法

如果形參或者代碼塊只有一句可以簡(jiǎn)寫(xiě)：

Const myFun = (k) => {return k+1;} 
簡(jiǎn)寫(xiě)：
Const myFun = k =>? k +1;

3 對(duì)象方法里的this

如果函數(shù)作為對(duì)象的方法調(diào)用，this指向的是這個(gè)上級(jí)對(duì)象，即調(diào)用方法的對(duì)象。

const person = {
??????? ??????? ??????? ?? name:"張三",
??????? ??????? ??????? ?? age:18,
??????? ??????? ??????? ?? say:function(){
??????? ??????? ??????? ??????? ? console.log(this.name);// 張三 這時(shí)候的this是person的對(duì)象
??????? ??????? ??????? ?? }
?}
person.say();

4 apply/call調(diào)用時(shí)的this

myfun1();//對(duì)象是Windows
myfun1.call(person1);//對(duì)象改變?yōu)閜erson1

說(shuō)明：兩者的區(qū)別，myfun.call(person,18,29); myfun.apply(person,[18,29]);

5 箭頭函數(shù)中this

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

箭頭函數(shù)中的this指向是它所定義（聲明）的位置，可以簡(jiǎn)單理解成，定義箭頭函數(shù)中的作用域的this指向誰(shuí)，它就指向誰(shuí)。

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

const resFn = fn.call(obj); //{ name: '張三'}
resFn();//{ name: '張三'}
一：全局作用域下this指向
			1:普通函數(shù)
			function global(){
				console.log(this);//window
			}
			global();
			2：箭頭函數(shù)
			const global = ()=>{
				console.log(this);//window
			}
			global();
			
			
			二：對(duì)象里面的this指向
			1:普通函數(shù)
			const Person = {realname:"張三",age:19,
			   say:function(){
				   console.log(this.realname);//當(dāng)前的對(duì)象 "張三"
			   }
			}
			Person.say();
			
			2:箭頭函數(shù)
			const Person = {realname:"張三",age:19,
			   say:()=>{
				   console.log(this);//window
			   }
			}
			Person.say();
			
			三：構(gòu)造函數(shù)的this指向
			1:普通函數(shù)
			
			function  Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = function(){
					console.log(this);
				}
			}
			const P1 = new Person("張三",19);
			P1.say();
			
			const P2 = new Person("李四",19);
			P2.say.call(P1);//原來(lái)李四，現(xiàn)在是張三 call和apply改變this指向，區(qū)別傳輸參數(shù)的區(qū)別
			
			2:箭頭函數(shù)
			
			function  Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = ()=>{
					console.log(this);
				}
			}
			const P1 = new Person("張三",19); 
			P1.say();
 
			const P2 = new Person("李四",19);
			P2.say.call(P1);//不能改變箭頭函數(shù)的this指向
			
			總結(jié)：普通函數(shù)與箭頭函數(shù)this的區(qū)別
			1：普通的函數(shù)this與調(diào)用者有關(guān)，調(diào)用者是誰(shuí)就是誰(shuí);
			2：箭頭函數(shù)的this與當(dāng)時(shí)定義的上下文的this有關(guān)，this是靜態(tài)的一旦定義了就無(wú)法改變

6 箭頭函數(shù)應(yīng)用

練習(xí)1：單擊按鈕2s后改變按鈕文字：按鈕被點(diǎn)擊，在單擊按鈕改變文字：點(diǎn)擊被取消。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 點(diǎn)擊按鈕   2s后顯示：文字被點(diǎn)擊，在點(diǎn)擊出現(xiàn)文字：點(diǎn)擊被取消。 -->
<!-- （附加：點(diǎn)擊10次后提示“今日點(diǎn)擊次數(shù)已上限，按鈕變成灰色”） -->
 
<body>
    <button>點(diǎn)擊</button>
    <script>
        let bth = document.querySelector("button")
        let flag = false
        let num=0
        bth.addEventListener("click", function () {
            flag = !flag
            num++
            if(num>10){   
                this.innerHTML="今日點(diǎn)擊次數(shù)已上限"
                this.disabled=true
                this.style.backgroundColor="grey"
                return false
            }
            time1=setTimeout(() => { 
                if (flag) {
                    // console.log(this);
                    this.innerHTML="文字被點(diǎn)擊"
                }
                else{
                    this.innerHTML="點(diǎn)擊被取消"
                }
            }, 100);
 
        })
    </script>
</body>
 
</html>

四，剩余函數(shù)

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

1:rest參數(shù)
			function demo(...nums){
				console.log(nums);//數(shù)組
				console.log(...nums);//解構(gòu)數(shù)組
			}
			demo(1,2,3);
			
			2:rest參數(shù) 對(duì)象
			function connect({username,...info}){
				console.log(username);
				console.log(info);
			}
			connect(
			   {username:"root",password:"123456",port:"3306"}
			)
			
			3:輸出數(shù)組
			const arr = [1,2,3];
			console.log(...arr);
			
			4:合并兩個(gè)數(shù)組
			const arr1 = [1,2,3];
			const arr2 = [4,5,6];
			console.log([...arr1,...arr2]);
			
			5:將類(lèi)數(shù)組轉(zhuǎn)為數(shù)組
			const liNode = document.querySelectorAll("li");
			console.log(typeof [...liNode]);
			
			const arr1 =  [1,2,3];
			const arr2 =  [...arr1];//復(fù)制數(shù)組
			arr1[0] = 10;
			console.log(arr2);
			
			6:剩余參數(shù)必須放入最后(rest參數(shù)) 不然報(bào)錯(cuò)
			function demo(a,b,...nums){
				console.log(nums);//數(shù)組
			}
			demo(1,2,3,4,5);

總結(jié)

到此這篇關(guān)于ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)的文章就介紹到這了,更多相關(guān)ES6 let、箭頭函數(shù)和剩余參數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論