JavaScript ES6的函數(shù)拓展
ES6函數(shù)拓展
函數(shù)的默認(rèn)參數(shù)
之前的寫(xiě)法:
function count(x, y) { ?? ?return x + y; } count(3);//因?yàn)橹粋鬟f了參數(shù)x,y的默認(rèn)值為undefined //undefined + 3返回NaN function count(x, y) { ?? ?x = x || 0; ?? ?y = y || 0; ?? ?return x + y; } count(3);//3 function count(x, y) { ?? ?x = x??0; ?? ?y = y??0; ?? ?return x + y; } count(3);//3
ES6寫(xiě)法:
ES6的寫(xiě)法簡(jiǎn)潔易讀,能夠讓其他開(kāi)發(fā)者快速了解參數(shù)類型,是否可省等信息,也不會(huì)對(duì)函數(shù)體代碼造成過(guò)多負(fù)擔(dān),有利于后期優(yōu)化重構(gòu)
function count(x = 0, y = 0) { ?? ?return x + y; } count(3);
注意事項(xiàng):
1.使用默認(rèn)參數(shù),在函數(shù)體內(nèi)不能重新命名同名變量
function count(x = 0, y = 0) { ?? ?let x;//報(bào)錯(cuò) ?? ?const y;//報(bào)錯(cuò) }
參數(shù)默認(rèn)值不是傳值的,而是每次都重新計(jì)算默認(rèn)表達(dá)式的值,也就是說(shuō)參數(shù)默認(rèn)值是惰性求值的
let num = 1; function count(x = num + 1, y = 0) { ?? ?return x; } count();//2 num = 99; count();//100
參數(shù)也可以作為默認(rèn)值,但是要注意順序
正確示例:
function fn(x = 10, y = x) { ?? ?console.log(x, y); } fn(20);//20 20 fn();//10 10
錯(cuò)誤示例:
function fn(x = y, y = 10) { ?? ?console.log(x, y); } fn();//報(bào)錯(cuò)
參數(shù)默認(rèn)值為變量時(shí),如果外部作用域有對(duì)應(yīng)變量,那么這個(gè)參數(shù)就會(huì)指向外部變量(即參數(shù)的值等于外部變量的值)
let w = 10; function fn(x = w) { ?? ?let w = 20; ?? ?return x; } fn();//10
注意:
//在()階段,x已經(jīng)賦值后,再改變w的值,也無(wú)法改變x的值 let w = 10; function fn(x = 2) { ?? ?w = 20; ?? ?return x; } fn();//10
reset參數(shù)
ES6引入reset
參數(shù)(形式為…變量名),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對(duì)象了
reset參數(shù)搭配的變量是一個(gè)數(shù)組,該變量將多余的參數(shù)放入數(shù)組中
類似解構(gòu)賦值,以后就不用call來(lái)使arguments
調(diào)用數(shù)組方法了
function count(...values) { ?? ?console.log(values);//[2, 5, 3] ?? ?return values.reduce((acc,curr) => acc + curr); } add(2, 5, 3);//10
reset參數(shù)必須作為函數(shù)最后一個(gè)參數(shù)
function count(...value, a){}//報(bào)錯(cuò)
name屬性
函數(shù)的name
屬性,返回該函數(shù)的函數(shù)名
function count(){} console.log(count.name); //"count" (new Function).name // "anonymous" function foo() {}; foo.bind({}).name // "bound foo" function foo() {}; foo.bind({}).name // "bound foo" (function(){}).bind({}).name // "bound " // "bound " (function(){}).name // ""
箭頭函數(shù)
ES6中規(guī)定可以使用“箭頭”(=>)定義函數(shù)
------------正常函數(shù)------------- function count(x, y) { ?? ?return x + y; } ------------箭頭函數(shù)------------- let count =(x, y) => x + y;
函數(shù)體中可以直接書(shū)寫(xiě)表達(dá)式
let count = (x, y) => { ?? ?y = 100; ?? ?x = x * y; ?? ?return x + y; } count(3, 4);//400
()中書(shū)寫(xiě)表達(dá)式,書(shū)寫(xiě)多個(gè)短語(yǔ)語(yǔ)句,最后一個(gè)“,”之后的值為返回值
let count = (x, y) => (x = 100, y = 10, x + y); count(3, 4);//110
{}中書(shū)寫(xiě)多行語(yǔ)句
//報(bào)錯(cuò) 會(huì)將{}識(shí)別為函數(shù)體 let count = id => {id: id, name: "yunjin"}; //不會(huì)報(bào)錯(cuò) let count = id => ({id: id, name: "yunjin"});
到此這篇關(guān)于JavaScript ES6的函數(shù)拓展的文章就介紹到這了,更多相關(guān)JavaScript ES6 函數(shù) 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS沙箱繞過(guò)以及競(jìng)爭(zhēng)條件型漏洞復(fù)現(xiàn)
沙箱繞過(guò)"是指攻擊者利用各種方法和技術(shù)來(lái)規(guī)避或繞過(guò)應(yīng)用程序或系統(tǒng)中的沙箱,本文主要介紹了JS沙箱繞過(guò)以及競(jìng)爭(zhēng)條件型漏洞復(fù)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法,有需要的朋友可以參考一下2013-11-11JS獲取屏幕高度的簡(jiǎn)單實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇JS獲取屏幕高度的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼,使用非常方便,也很實(shí)用,推薦給大家。2015-01-01用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...2007-07-07Bootstrap 設(shè)置datetimepicker在屏幕上面彈出設(shè)置方法
datetimepicker默認(rèn)是在輸入框下面彈出的,但是遇到輸入框在屏幕下面時(shí),日期選擇框會(huì)有一部分在屏幕下面,顯示不了,因此需要能夠從上面彈出,下面小編給大家介紹下Bootstrap 設(shè)置datetimepicker在屏幕上面彈出的設(shè)置方法2017-03-03JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡(jiǎn)單的應(yīng)用
這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡(jiǎn)單的應(yīng)用,需要的朋友可以參考下2017-06-06JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)數(shù)組去重的方法,涉及javascript數(shù)組的遍歷、判斷及賦值操作,代碼非常簡(jiǎn)單易懂,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03