溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下ES6之let、箭頭函數和剩余參數怎么用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
關鍵字用來聲明塊級變量。
-- 特點就是在{}聲明具有塊級作用域，var變量無此特點。
-- 防止循環變量編程全局變量。
-- let 關鍵詞無變量提升。
-- let 關鍵詞有暫時性死區的特點。{先聲明后使用}
聲明常量，常量就是值（內存地址）不能變化的量。
對象的本身是可變的，所以可以添加屬性，但是地址不可改變
使用 var 聲明的變量，其作用域為該語句所在的函數內，且存在變量提升現象
- 使用 let 聲明的變量，其作用域為該語句所在的代碼塊內，不存在變量提升
- 使用 const 聲明的是常量，在后面出現的代碼中不能再修改該常量的值
- 使用let，const的聲明的變量不屬性頂層對象，返回undefined。
let [x, y, ...z] = ['a']; x // "a" y // undefined z // [] let[a,...c] = [1,2,3];//合并運算符可以展開數組也可合并數組 console.log(c);//[2, 3] console.log(...c);//2 3 let [x,y='2'] = ['a',undefined]; console.log(y);//如果沒有定義，可以用默認值
說明：ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當一個數組成員嚴格等于undefined，默認值才會生效。
根據key解構
let person = {name:"小帥",age:18};
let {name,age,height} = person;
console.log(name);//小帥
console.log(age);//18
console.log(height);//undefined說明：對象的解構與數組有一個重要的不同。數組的元素是按順序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值，否則解構失敗就是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)//當屬性沒有的時候支持默認值說明：對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。
let [a,b,c] = "hello"; console.log(a);//h console.log(b);//e console.log(c);//l
//原js寫法
function myFun(k,v){
return k + v;
}
//es6 寫法
const myFun1 = (k,v) => {
return k+v;
}如果形參或者代碼塊只有一句可以簡寫：
Const myFun = (k) => {return k+1;}
簡寫：
Const myFun = k => k +1;如果函數作為對象的方法調用，this指向的是這個上級對象，即調用方法的對象。
const person = {
name:"張三",
age:18,
say:function(){
console.log(this.name);// 張三 這時候的this是person的對象
}
}
person.say();myfun1();//對象是Windows myfun1.call(person1);//對象改變為person1
說明：兩者的區別，myfun.call(person,18,29); myfun.apply(person,[18,29]);
箭頭函數不綁定this關鍵字，箭頭函數中的this，指向的是函數定義位置的上下文this。
箭頭函數中的this指向是它所定義（聲明）的位置，可以簡單理解成，定義箭頭函數中的作用域的this指向誰，它就指向誰。
const obj = { name: '張三'}
function fn () {
console.log(this);//this 指向 是obj對象
return () => {
console.log(this);//this 指向 的是箭頭函數定義的位置，那么這個箭頭函數定義在fn里面，而這個fn指向是的obj對象，所以這個this也指向是obj對象
}
}
const resFn = fn.call(obj); //{ name: '張三'}
resFn();//{ name: '張三'}一：全局作用域下this指向
1:普通函數
function global(){
console.log(this);//window
}
global();
2：箭頭函數
const global = ()=>{
console.log(this);//window
}
global();
二：對象里面的this指向
1:普通函數
const Person = {realname:"張三",age:19,
say:function(){
console.log(this.realname);//當前的對象 "張三"
}
}
Person.say();
2:箭頭函數
const Person = {realname:"張三",age:19,
say:()=>{
console.log(this);//window
}
}
Person.say();
三：構造函數的this指向
1:普通函數
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);//原來李四，現在是張三 call和apply改變this指向，區別傳輸參數的區別
2:箭頭函數
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);//不能改變箭頭函數的this指向
總結：普通函數與箭頭函數this的區別
1：普通的函數this與調用者有關，調用者是誰就是誰;
2：箭頭函數的this與當時定義的上下文的this有關，this是靜態的一旦定義了就無法改變練習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后顯示：文字被點擊，在點擊出現文字：點擊被取消。 -->
<!-- （附加：點擊10次后提示“今日點擊次數已上限，按鈕變成灰色”） -->
<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="今日點擊次數已上限"
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>剩余參數語法允許我們將一個不定數量的參數表示為一個數組，不定參數定義方式，這種方式很方便的去聲明不知道參數情況下的一個函數。
1:rest參數
function demo(...nums){
console.log(nums);//數組
console.log(...nums);//解構數組
}
demo(1,2,3);
2:rest參數 對象
function connect({username,...info}){
console.log(username);
console.log(info);
}
connect(
{username:"root",password:"123456",port:"3306"}
)
3:輸出數組
const arr = [1,2,3];
console.log(...arr);
4:合并兩個數組
const arr1 = [1,2,3];
const arr2 = [4,5,6];
console.log([...arr1,...arr2]);
5:將類數組轉為數組
const liNode = document.querySelectorAll("li");
console.log(typeof [...liNode]);
const arr1 = [1,2,3];
const arr2 = [...arr1];//復制數組
arr1[0] = 10;
console.log(arr2);
6:剩余參數必須放入最后(rest參數) 不然報錯
function demo(a,b,...nums){
console.log(nums);//數組
}
demo(1,2,3,4,5);以上就是“ES6之let、箭頭函數和剩余參數怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
