JavaScript ES6的函數(shù)拓展
ES6函數(shù)拓展
函數(shù)的默認(rèn)參數(shù)
之前的寫法:
function count(x, y) { ?? ?return x + y; } count(3);//因為只傳遞了參數(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寫法:
ES6的寫法簡潔易讀,能夠讓其他開發(fā)者快速了解參數(shù)類型,是否可省等信息,也不會對函數(shù)體代碼造成過多負(fù)擔(dān),有利于后期優(yōu)化重構(gòu)
function count(x = 0, y = 0) { ?? ?return x + y; } count(3);
注意事項:
1.使用默認(rèn)參數(shù),在函數(shù)體內(nèi)不能重新命名同名變量
function count(x = 0, y = 0) { ?? ?let x;//報錯 ?? ?const y;//報錯 }
參數(shù)默認(rèn)值不是傳值的,而是每次都重新計算默認(rèn)表達(dá)式的值,也就是說參數(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
錯誤示例:
function fn(x = y, y = 10) { ?? ?console.log(x, y); } fn();//報錯
參數(shù)默認(rèn)值為變量時,如果外部作用域有對應(yīng)變量,那么這個參數(shù)就會指向外部變量(即參數(shù)的值等于外部變量的值)
let w = 10; function fn(x = w) { ?? ?let w = 20; ?? ?return x; } fn();//10
注意:
//在()階段,x已經(jīng)賦值后,再改變w的值,也無法改變x的值 let w = 10; function fn(x = 2) { ?? ?w = 20; ?? ?return x; } fn();//10
reset參數(shù)
ES6引入reset
參數(shù)(形式為…變量名),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對象了
reset參數(shù)搭配的變量是一個數(shù)組,該變量將多余的參數(shù)放入數(shù)組中
類似解構(gòu)賦值,以后就不用call來使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ù)最后一個參數(shù)
function count(...value, a){}//報錯
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ù)體中可以直接書寫表達(dá)式
let count = (x, y) => { ?? ?y = 100; ?? ?x = x * y; ?? ?return x + y; } count(3, 4);//400
()中書寫表達(dá)式,書寫多個短語語句,最后一個“,”之后的值為返回值
let count = (x, y) => (x = 100, y = 10, x + y); count(3, 4);//110
{}中書寫多行語句
//報錯 會將{}識別為函數(shù)體 let count = id => {id: id, name: "yunjin"}; //不會報錯 let count = id => ({id: id, name: "yunjin"});
到此這篇關(guān)于JavaScript ES6的函數(shù)拓展的文章就介紹到這了,更多相關(guān)JavaScript ES6 函數(shù) 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法,有需要的朋友可以參考一下2013-11-11javascript實現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼,使用非常方便,也很實用,推薦給大家。2015-01-01用javascript調(diào)出windows色版的代碼
用javascript調(diào)出windows色版的代碼...2007-07-07Bootstrap 設(shè)置datetimepicker在屏幕上面彈出設(shè)置方法
datetimepicker默認(rèn)是在輸入框下面彈出的,但是遇到輸入框在屏幕下面時,日期選擇框會有一部分在屏幕下面,顯示不了,因此需要能夠從上面彈出,下面小編給大家介紹下Bootstrap 設(shè)置datetimepicker在屏幕上面彈出的設(shè)置方法2017-03-03JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用
這篇文章主要介紹了JavaScript學(xué)習(xí)總結(jié)之正則的元字符和一些簡單的應(yīng)用,需要的朋友可以參考下2017-06-06