ES6學(xué)習(xí)筆記之let、箭頭函數(shù)和剩余參數(shù)
一.let,var,const區(qū)別
let
關(guān)鍵字用來聲明塊級變量。
-- 特點就是在{}聲明具有塊級作用域，var變量無此特點。
-- 防止循環(huán)變量編程全局變量。
-- let 關(guān)鍵詞無變量提升。
-- let 關(guān)鍵詞有暫時性死區(qū)的特點。{先聲明后使用}
const
聲明常量，常量就是值（內(nèi)存地址）不能變化的量。
對象的本身是可變的，所以可以添加屬性，但是地址不可改變
區(qū)別
使用 var 聲明的變量，其作用域為該語句所在的函數(shù)內(nèi)，且存在變量提升現(xiàn)象
- 使用 let 聲明的變量，其作用域為該語句所在的代碼塊內(nèi)，不存在變量提升
- 使用 const 聲明的是常量，在后面出現(xiàn)的代碼中不能再修改該常量的值
- 使用let，const的聲明的變量不屬性頂層對象，返回undefined。
二，解構(gòu)
1 數(shù)組解構(gòu)
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對象解構(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說明：對象的解構(gòu)與數(shù)組有一個重要的不同。數(shù)組的元素是按順序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值，否則解構(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)//當屬性沒有的時候支持默認值說明：對象的解構(gòu)賦值的內(nèi)部機制，是先找到同名屬性，然后再賦給對應(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ǔ)語法
//原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關(guān)鍵字，箭頭函數(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();
三：構(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);//原來李四，現(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)用者是誰就是誰;
2：箭頭函數(shù)的this與當時定義的上下文的this有關(guān)，this是靜態(tài)的一旦定義了就無法改變6 箭頭函數(shù)應(yīng)用
練習(xí)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);//解構(gòu)數(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ù)組轉(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ù)) 不然報錯
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
javascript完整操作Table的增加行，刪除行的列子大全
非常漂亮的js操作table行代碼函數(shù)。比較方便2008-10-10
用javascript代替marquee的滾動字幕效果代碼...2007-04-04
Django1.7+JQuery+Ajax驗證用戶注冊集成小例子
下面是散仙使用Django+Jquery+Ajax的方式來模擬實現(xiàn)了一個驗證用戶注冊時，用戶名存在不存在的一個小應(yīng)用。注意，驗證存在不存在使用的是Ajax的方式，不用讓用戶點擊按鈕驗證是否存在,需要的朋友可以參考下2017-04-04
layui實現(xiàn)把數(shù)據(jù)表格時間戳轉(zhuǎn)換為時間格式的例子
今天小編就為大家分享一篇layui實現(xiàn)把數(shù)據(jù)表格時間戳轉(zhuǎn)換為時間格式的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
用javascript取得傳遞參數(shù)的個數(shù)的代碼
用javascript取得傳遞參數(shù)的個數(shù)的代碼...2007-10-10
這篇文章主要介紹了tsconfig.json配置詳解，tsconfig.json文件中指定了用來編譯這個項目的根文件和編譯選項，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
原生js和jquery中有關(guān)透明度設(shè)置的相關(guān)問題
設(shè)置透明度問題，比如圖片的淡入淡出效果。下面我介紹一下在原生js和jQuery中設(shè)置透明度的相關(guān)問題和注意點2014-01-01
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
使用Promise和JavaScript有效處理1000個請求的方法
在現(xiàn)代Web開發(fā)中,處理高并發(fā)請求是一個常見的挑戰(zhàn),當我們需要從服務(wù)器獲取大量數(shù)據(jù)或執(zhí)行多個異步任務(wù)時,如何有效地管理請求的并發(fā)性和性能變得至關(guān)重要,本文將介紹如何使用Promise和JavaScript來管理高并發(fā)請求,需要的朋友可以參考下2023-09-09
JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象
這篇文章介紹了JS實現(xiàn)樹形結(jié)構(gòu)與數(shù)組結(jié)構(gòu)相互轉(zhuǎn)換并在樹形結(jié)構(gòu)中查找對象的方法，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06