ES6之let、箭頭函數(shù)和剩余參數(shù)怎么用

今天小編給大家分享一下ES6之let、箭頭函數(shù)和剩余參數(shù)怎么用的相關知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

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

let

關鍵字用來聲明塊級變量。

-- 特點就是在{}聲明具有塊級作用域，var變量無此特點。

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

-- let 關鍵詞無變量提升。

-- let 關鍵詞有暫時性死區(qū)的特點。{先聲明后使用}

const

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

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

區(qū)別

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

- 使用 let 聲明的變量，其作用域為該語句所在的代碼塊內(nèi)，不存在變量提升

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

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

二，解構 

1 數(shù)組解構

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

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

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

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

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

console.log(y);//如果沒有定義，可以用默認值

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

2對象解構

根據(jù)key解構

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

說明：對象的解構與數(shù)組有一個重要的不同。數(shù)組的元素是按順序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值，否則解構失敗就是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)//當屬性沒有的時候支持默認值

說明：對象的解構賦值的內(nèi)部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。

.3 字符串解構

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

三，箭頭函數(shù) 

1 基礎語法

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

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

2 省略寫法

如果形參或者代碼塊只有一句可以簡寫：

Const myFun = (k) => {return k+1;} 
簡寫：
Const myFun = k =>  k +1;

3 對象方法里的this

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

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

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

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

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

5 箭頭函數(shù)中this

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

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

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

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();
			
			
			二：對象里面的this指向
			1:普通函數(shù)
			const Person = {realname:"張三",age:19,
			   say:function(){
				   console.log(this.realname);//當前的對象 "張三"
			   }
			}
			Person.say();
			
			2:箭頭函數(shù)
			const Person = {realname:"張三",age:19,
			   say:()=>{
				   console.log(this);//window
			   }
			}
			Person.say();
			
			三：構造函數(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);//原來李四，現(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指向
			
			總結：普通函數(shù)與箭頭函數(shù)this的區(qū)別
			1：普通的函數(shù)this與調(diào)用者有關，調(diào)用者是誰就是誰;
			2：箭頭函數(shù)的this與當時定義的上下文的this有關，this是靜態(tài)的一旦定義了就無法改變

6 箭頭函數(shù)應用

練習1：單擊按鈕2s后改變按鈕文字：按鈕被點擊，在單擊按鈕改變文字：點擊被取消。

<!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>
<!-- 點擊按鈕   2s后顯示：文字被點擊，在點擊出現(xiàn)文字：點擊被取消。 -->
<!-- （附加：點擊10次后提示“今日點擊次數(shù)已上限，按鈕變成灰色”） -->
 
<body>
    <button>點擊</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="今日點擊次數(shù)已上限"
                this.disabled=true
                this.style.backgroundColor="grey"
                return false
            }
            time1=setTimeout(() => { 
                if (flag) {
                    // console.log(this);
                    this.innerHTML="文字被點擊"
                }
                else{
                    this.innerHTML="點擊被取消"
                }
            }, 100);
 
        })
    </script>
</body>
 
</html>

四，剩余函數(shù)

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

1:rest參數(shù)
			function demo(...nums){
				console.log(nums);//數(shù)組
				console.log(...nums);//解構數(shù)組
			}
			demo(1,2,3);
			
			2:rest參數(shù) 對象
			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:合并兩個數(shù)組
			const arr1 = [1,2,3];
			const arr2 = [4,5,6];
			console.log([...arr1,...arr2]);
			
			5:將類數(shù)組轉為數(shù)組
			const liNode = document.querySelectorAll("li");
			console.log(typeof [...liNode]);
			
			const arr1 =  [1,2,3];
			const arr2 =  [...arr1];//復制數(shù)組
			arr1[0] = 10;
			console.log(arr2);
			
			6:剩余參數(shù)必須放入最后(rest參數(shù)) 不然報錯
			function demo(a,b,...nums){
				console.log(nums);//數(shù)組
			}
			demo(1,2,3,4,5);

以上就是“ES6之let、箭頭函數(shù)和剩余參數(shù)怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。