ECMAscrip新特性函數(shù)介紹
1.函數(shù)參數(shù)的默認值
1.1函數(shù)參數(shù)指定默認值
在ECMAScript 2015中，允許為函數(shù)的參數(shù)添加默認值，將默認值直接寫在參數(shù)的后面即可。
示例代碼如下所示：
// 函數(shù)參數(shù)指定默認值
function fun(a = 1, b = 2) {
console.log(a + b);
}
fun() // 3
值得注意的是：參數(shù)變量是默認聲明的，所以不能用let或const再次聲明, 否則會拋出異常。
還有就是默認參數(shù)的位置都是在參數(shù)列表的最后面，否則會引發(fā)歧義，該省略的參數(shù)不能省略，
如下代碼示例：
// 默認參數(shù)的位置應該是在最后面
function fun(a = 1, b) {
console.log(a, b);
}
// 調(diào)用函數(shù)，傳遞一個參數(shù)
fun(20); // 20 undefined
1.2與解耦賦值配合使用
參數(shù)默認值可以與解構(gòu)賦值的默認值，結(jié)合起來使用。可以通過兩種方式為其設(shè)置默認值。示例代碼如下所示：
function fun([a, b = 5] = [3]) {
console.log(a, b);
}
fun() // 3 5
1.3函數(shù)參數(shù)的作用域
一旦設(shè)置了參數(shù)的默認值，函數(shù)進行聲明初始化時，參數(shù)會形成一個單獨的作用域 。等到初始化結(jié)束，這個作用域就會消失。這種語法行為，在不設(shè)置參數(shù)默認值時，是不會出現(xiàn)的。
示例代碼如下所示：
let x = 5
function fun(y = x) {
x = 10
console.log(y);
}
fun() // 5
2.rest參數(shù)
ECMAScript 2015引入rest參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對象了。rest 參數(shù)搭配的變量是一個數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。
示例代碼如下所示：
// 使用 arguments 對象最傳入的參數(shù)求出最大值
function max1() {
return Math.max.apply(null, arguments)
}
console.log(max1(1, 5, 6, 33, 65, 35, 15)); // 65
// 使用 rest 參數(shù)
function max2(...arg) {
return Math.max(...arg)
}
console.log(max2(1, 5, 6, 33, 65, 35, 15)); // 65
3.箭頭函數(shù)
3.1什么是箭頭函數(shù)
ECMAScript 2015新增了箭頭函數(shù)(又稱胖剪頭函數(shù)), 相比函數(shù)表達式具有較短的語法并以詞法的方式綁定this 。箭頭函數(shù)在大多數(shù)情況下都是匿名的。
箭頭函數(shù)的語法結(jié)構(gòu)如下所示：
// 基本語法結(jié)構(gòu)
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {函數(shù)聲明}
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => 表達式(單一)
// 相當于:(參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {return 表達式}
// 當只有一個參數(shù)時，小可號是可選的
(參數(shù)) => {函數(shù)聲明}
// 或者
參數(shù) => {函數(shù)聲明}
// 沒有參數(shù)應該寫一對小括號
() => {函數(shù)聲明}
// 可以配合 rest 參數(shù)和默認參數(shù)
(參數(shù)1, 參數(shù)2, ...rest) => {函數(shù)聲明}
(參數(shù)1, 參數(shù)2, ..., 參數(shù)N = 默認值N) => {函數(shù)聲明}
箭頭函數(shù)也可以為其定義函數(shù)名，語法結(jié)構(gòu)如下所示：
let funName = (參數(shù)1, 參數(shù)2, ..., 參數(shù)N) => {函數(shù)聲明}
示例代碼如下所示：
let sum = (a, b) => {
return a + b
}
console.log(sum(10, 20)); //30
3.2箭頭函數(shù)的注意事項
箭頭函數(shù)有幾個使用注意點：
- 函數(shù)體內(nèi)的
this對象，就是定義時所在的對象，而不是使用時所在的對象。
示例代碼如下所示：
// ES5 寫法
let fun1 = function () {
console.log(this.id);
}
// ES6 箭頭函數(shù)寫法
let fun2 = () => {
console.log(this.id);
}
let obj1 = {
id: 666,
fun: fun1
}
let obj2 = {
id: 666,
fun: fun2
}
obj1.fun() // 666
obj2.fun() // undefined
由代碼我們可以看出，普通函數(shù)的this是調(diào)用時確定的，而我們的箭頭函數(shù)的this是在定義時就確定了的。
- 不可以當作構(gòu)造函數(shù)，也就是說，不可以使用
new命令，否則會拋出一個錯誤。 - 不可以使用
arguments對象，該對象在函數(shù)體內(nèi)不存在。如果要用，可以用rest參數(shù)代替。
4.函數(shù)的尾調(diào)用
尾調(diào)用是函數(shù)式編程的一個重要概念，本身非常簡單，一句話就能說清楚，就是指某個函數(shù)的最后一步是調(diào)用另一個函數(shù)。
示例代碼如下所示：
let x = (x) => {
return 2 * x
}
let y = function (y) {
return x(y)
}
console.log(y(20)); // 40
到此這篇關(guān)于ECMAscrip新特性之函數(shù)的擴展的文章就介紹到這了,更多相關(guān)ECMAscrip函數(shù)的擴展內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家分享一段使用原生Javascript實現(xiàn)的仿京東淘寶豎排二級導航的代碼，非常的實用，有需要的小伙伴參考下2014-12-12
這篇文章主要介紹了javascript實現(xiàn)復制與粘貼操作,以實例形式講述了javascript實現(xiàn)復制與粘貼操作的實現(xiàn)方法,需要的朋友可以參考下2014-10-10
js傳遞數(shù)組參數(shù)到后臺controller的方法
下面小編就為大家分享一篇js傳遞數(shù)組參數(shù)到后臺controller的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
用JavaScript實現(xiàn)讓瀏覽器停止載入頁面的方法
下面小編就為大家?guī)硪黄肑avaScript實現(xiàn)讓瀏覽器停止載入頁面的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了淺談微信小程序flex布局基礎(chǔ)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了小程序自定義圓形進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
主要是測試了數(shù)組 push()方法與直接相加這兩種在JS引擎上性能的實際處理情況。程序代碼簡單明了，沒什么好解釋的。2009-12-12
某些特殊字符傳入后臺會產(chǎn)生錯誤，可能導致sql注入，所以要想法從根本上攔截，接下來通過本文給大家介紹input 禁止輸入特殊字符的方式，對input 禁止特殊字符知識感興趣的朋友一起看下吧2016-08-08
這篇文章主要介紹了videojs添加自定義組件的方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
JavaScript取得gridview中獲取checkbox選中的值
這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-07-07