ES6箭頭函數(shù)、rest參數(shù)、擴展運算符和Symbol如何使用

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

創(chuàng)新互聯(lián)是少有的網(wǎng)站建設(shè)、成都做網(wǎng)站、營銷型企業(yè)網(wǎng)站、小程序設(shè)計、手機APP,開發(fā)、制作、設(shè)計、賣鏈接、推廣優(yōu)化一站式服務(wù)網(wǎng)絡(luò)公司,從2013年開始,堅持透明化,價格低,無套路經(jīng)營理念。讓網(wǎng)頁驚喜每一位訪客多年來深受用戶好評

簡化對象寫法

ES6 允許在大括號里面，直接寫入變量和函數(shù)，作為對象的屬性和方法，這樣更簡介。

在ES5中創(chuàng)建對象的寫法：

let name = "江流兒"

let showName = function（）{

console.log（"name:",this.name）;

}

const People = {

name: name,

showName: showName,

func: function（）{

console.log（"正在西游的路上！"）;

}

console.log（People）;

在ES6中創(chuàng)建對象的寫法：

let name = "江流兒"

let showName = function（）{

console.log（"name:",this.name）;

}

const people = {

name,//省略了重復(fù)的工作

showName,

func（）{

console.log（"正在西游的路上！"）;

}

console.log（people）;

箭頭函數(shù)及聲明特點

ES6 允許使用箭頭=>定義函數(shù)

申明一個函數(shù)

在ES5中創(chuàng)建函數(shù)的寫法：

let fn = function（a, b）{

…//代碼體

}

在ES6中創(chuàng)建函數(shù)的寫法：

let fn = （a, b） => {

…//代碼體

}

箭頭函數(shù)特點

this 是靜態(tài)的，this始終指向函數(shù)聲明時所在作用域下的 this 的值，即使使用call、apply、bind函數(shù)修改this，也不會起作用。

//ES5寫法

function getName1（） {

console.log（"ES5:",this）;

};

//ES6寫法

let getName2 = （） => {

console.log（"ES6:",this）;

};

const people = {

name: "江流兒"

};

getName1.call（people）;//people

getName2.call（people）;//window

不能作為構(gòu)造函數(shù)實例化對象

let Person = （name, age） => {

this.name = name;

this.age = age;

}

let stu = new Person（"心猿", 5000）;

console.log（stu）;//err

不能使用arguments變量

let fn =（） =>{

console.log（arguments）;

}

fn（1, 2, 3）;//err

箭頭函數(shù)的簡寫

1）省略小括號，當形參有且只有一個的時候

let add = n =>{

return n+n;

}

console.log（add（9））;//18

2）省略花括號，當代碼體只有一條語句的時候，此時的return必須省略，語句的執(zhí)行結(jié)果就是函數(shù)的返回值

let pow = n => n * n;

console.log（pow（9））;//81

箭頭函數(shù)的實踐

1）點擊div 2s 后顏色變成粉色

在ES5中寫法：

<style>

div{

width: 200px;

height: 200px;

background-color: #58a;

}

</style>

<body>

let div = document.getElementById（"box"）;

box.addEventListener（"click", function（）{

// ES5中必須先保存this的值

let _this = this;

// 定時器

setTimeout（function（）{

// 修改背景顏色 this

_this.style.background = "pink"

}, 2000）;

}）

</script>

在ES6中使用箭頭函數(shù)寫法：

let div = document.getElementById（"box"）;

box.addEventListener（"click", function（）{

// 保存this的值

// let _this = this;

// 定時器

setTimeout（（）=>{

// 修改背景顏色 this

// _this.style.background = "pink"

this.style.background = "pink";

}, 2000）;

}）

</script>

2）從數(shù)組中返回偶數(shù)的元素

const arr = [1, 6, 9, 10, 14, 200];

const result = arr.filter（item => item % 2 === 0）;

console.log（result）;//[ 6, 10, 14, 200 ]

箭頭函數(shù)適合于this無關(guān)的回調(diào)。定時器，數(shù)組的方法回調(diào)

箭頭函數(shù)不太適合與this有關(guān)的回調(diào)。例如事件回調(diào)，對象的方法

以上就是“ES6箭頭函數(shù)、rest參數(shù)、擴展運算符和Symbol如何使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：ES6箭頭函數(shù)、rest參數(shù)、擴展運算符和Symbol如何使用
新聞來源：http://bm7419.com/article38/jcidpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站設(shè)計公司、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、建站公司、網(wǎng)站導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

ES6箭頭函數(shù)、rest參數(shù)、擴展運算符和Symbol如何使用

ES6箭頭函數(shù)、rest參數(shù)、擴展運算符和Symbol如何使用