ES6新特性之函數(shù)的擴(kuò)展實(shí)例詳解
本文實(shí)例講述了ES6新特性之函數(shù)的擴(kuò)展。分享給大家供大家參考,具體如下:
一、函數(shù)參數(shù)默認(rèn)值
1. ES6允許為函數(shù)的參數(shù)設(shè)置默認(rèn)值,即直接寫(xiě)在參數(shù)定義的后面。
function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello
這種寫(xiě)法有兩個(gè)好處:首先,閱讀代碼的人,可以立刻意識(shí)到哪些參數(shù)是可以省略的,不用查看函數(shù)體或文檔;其次,有利于將來(lái)的代碼優(yōu)化,即使未來(lái)的版本在對(duì)外接口中,徹底拿掉這個(gè)參數(shù),也不會(huì)導(dǎo)致以前的代碼無(wú)法運(yùn)行。
參數(shù)變量是默認(rèn)聲明的,所以不能用let或const再次聲明。否則會(huì)報(bào)錯(cuò)。
2. 參數(shù)默認(rèn)值可以與解構(gòu)賦值的默認(rèn)值,結(jié)合起來(lái)使用。
function foo({x, y = 5}) { console.log(x, y); } foo({}) // undefined, 5 foo({x: 1}) // 1, 5 foo({x: 1, y: 2}) // 1, 2 foo() // TypeError: Cannot read property 'x' of undefined
通常情況下,定義了默認(rèn)值的參數(shù),應(yīng)該是函數(shù)的尾參數(shù)。因?yàn)檫@樣比較容易看出來(lái),到底省略了哪些參數(shù)。如果非尾部的參數(shù)設(shè)置默認(rèn)值,實(shí)際上這個(gè)參數(shù)是沒(méi)法省略的。
指定了默認(rèn)值以后,函數(shù)的length屬性,將返回沒(méi)有指定默認(rèn)值的參數(shù)個(gè)數(shù)。也就是說(shuō),指定了默認(rèn)值后,length屬性將失真。
(function (a) {}).length // 1 (function (a = 5) {}).length // 0 (function (a, b, c = 5) {}).length // 2
二、rest參數(shù)
ES6引入rest參數(shù)(形式為“...變量名”),用于獲取函數(shù)的多余參數(shù),這樣就不需要使用arguments對(duì)象了。rest參數(shù)搭配的變量是一個(gè)數(shù)組,該變量將多余的參數(shù)放入數(shù)組中。
function add(...values) { let sum = 0; for (var val of values) { sum += val; } return sum; } add(2, 5, 3) // 10
上面代碼的add函數(shù)是一個(gè)求和函數(shù),利用rest參數(shù),可以向該函數(shù)傳入任意數(shù)目的參數(shù)。
注意,rest參數(shù)之后不能再有其他參數(shù)(即只能是最后一個(gè)參數(shù)),否則會(huì)報(bào)錯(cuò)。
函數(shù)的length屬性,不包括rest參數(shù)。
三、擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符(spread)是三個(gè)點(diǎn)(...)。它好比rest參數(shù)的逆運(yùn)算,將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。
console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5 [...document.querySelectorAll('div')] // [<div>, <div>, <div>]
四、箭頭函數(shù)
ES6允許使用“箭頭”(=>)定義函數(shù)。箭頭函數(shù)前面是輸入,后面是輸出。inputs => outputs
var f = v => v; //上面的箭頭函數(shù)等同于: var f = function(v) { return v; };
如果箭頭函數(shù)不需要參數(shù)或需要多個(gè)參數(shù),就使用一個(gè)圓括號(hào)代表參數(shù)部分。
var f = () => 5; // 等同于 var f = function () { return 5 }; var sum = (num1, num2) => num1 + num2; // 等同于 var sum = function(num1, num2) { return num1 + num2; };
如果箭頭函數(shù)的代碼塊部分多于一條語(yǔ)句,就要使用大括號(hào)將它們括起來(lái),并且使用return語(yǔ)句返回。
var sum = (num1, num2) => { return num1 + num2; } //由于大括號(hào)被解釋為代碼塊,所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象,必須在對(duì)象外面加上括號(hào)。 var getTempItem = id => ({ id: id, name: "Temp" });
箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。
const full = ({ first, last }) => first + ' ' + last; // 等同于 function full(person) { return person.first + ' ' + person.last; }
箭頭函數(shù)的一個(gè)用處是簡(jiǎn)化回調(diào)函數(shù)。
// 正常函數(shù)寫(xiě)法 [1,2,3].map(function (x) { return x * x; }); // 箭頭函數(shù)寫(xiě)法 [1,2,3].map(x => x * x);
下面是rest參數(shù)與箭頭函數(shù)結(jié)合的例子。
const numbers = (...nums) => nums; numbers(1, 2, 3, 4, 5) // [1,2,3,4,5]
箭頭函數(shù)有幾個(gè)使用注意點(diǎn)。
(1)函數(shù)體內(nèi)的this對(duì)象,就是定義時(shí)所在的對(duì)象,而不是使用時(shí)所在的對(duì)象。
(2)不可以當(dāng)作構(gòu)造函數(shù),也就是說(shuō),不可以使用new命令,否則會(huì)拋出一個(gè)錯(cuò)誤。
(3)不可以使用arguments對(duì)象,該對(duì)象在函數(shù)體內(nèi)不存在。如果要用,可以用Rest參數(shù)代替。
(4)不可以使用yield命令,因此箭頭函數(shù)不能用作Generator函數(shù)。
上面四點(diǎn)中,第一點(diǎn)尤其值得注意。this對(duì)象的指向是可變的,但是在箭頭函數(shù)中,它是固定的。
五、函數(shù)參數(shù)的尾逗號(hào)
ECMAScript 2017將函數(shù)的最后一個(gè)參數(shù)有尾逗號(hào)(trailing comma)。
此前,函數(shù)定義和調(diào)用時(shí),都不允許最后一個(gè)參數(shù)后面出現(xiàn)逗號(hào)。
function clownsEverywhere( param1, param2 ) { /* ... */ }
上面代碼中,如果在param2或bar后面加一個(gè)逗號(hào),就會(huì)報(bào)錯(cuò)。
這樣的話,如果以后修改代碼,想為函數(shù)clownsEverywhere添加第三個(gè)參數(shù),就勢(shì)必要在第二個(gè)參數(shù)后面添加一個(gè)逗號(hào)。這對(duì)版本管理系統(tǒng)來(lái)說(shuō),就會(huì)顯示,添加逗號(hào)的那一行也發(fā)生了變動(dòng)。這看上去有點(diǎn)冗余,因此新的語(yǔ)法允許定義和調(diào)用時(shí),尾部直接有一個(gè)逗號(hào)。
function clownsEverywhere( param1, param2, ) { /* ... */ }
希望本文所述對(duì)大家ECMAScript程序設(shè)計(jì)有所幫助。
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析
- ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
- es6數(shù)組的flat(),flatMap()函數(shù)用法實(shí)例分析
- ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
- ES6中的箭頭函數(shù)實(shí)例詳解
- 關(guān)于ES6箭頭函數(shù)中的this問(wèn)題
- Es6 Generator函數(shù)詳細(xì)解析
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- 淺談ES6新增的數(shù)組方法和對(duì)象
- ES6數(shù)組的擴(kuò)展詳解
- ES6函數(shù)和數(shù)組用法實(shí)例分析
相關(guān)文章
有關(guān)json_decode亂碼及NULL的問(wèn)題
json decode出現(xiàn)中文亂碼,返回null,很多朋友都遇到過(guò)吧,該怎么解決呢?下面小編把解決辦法分享在腳本之家網(wǎng)站上,供大家學(xué)習(xí)2015-10-10在Js頁(yè)面通過(guò)POST傳遞參數(shù)跳轉(zhuǎn)到新頁(yè)面詳解
這篇文章主要給大家介紹了關(guān)于在Js頁(yè)面通過(guò)POST傳遞參數(shù)跳轉(zhuǎn)到新頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08js預(yù)載入和JavaScript Image()對(duì)象使用介紹
為了解決在canvas使用drawImage()時(shí),遇到img對(duì)象來(lái)不及加載的問(wèn)題; 我最終在html文檔加載中,使用了下面"數(shù)組加載圖像的辦法”解決,如果有其他方法,請(qǐng)給予指點(diǎn)!2011-08-08查找頁(yè)面中所有類(lèi)為test的結(jié)點(diǎn)的方法
這篇文章主要介紹了查找頁(yè)面中所有類(lèi)為test結(jié)點(diǎn)的方法,需要的朋友可以參考下2014-03-03THREE.JS使用TransformControls對(duì)模型拖拽的代碼實(shí)例
拖拽是前端實(shí)現(xiàn)中比較常用的一種效果,下面這篇文章主要給大家介紹了關(guān)于THREE.JS使用TransformControls對(duì)模型拖拽的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03JS將指定的某個(gè)字符全部轉(zhuǎn)換為其他字符實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于JS如何將指定的某個(gè)字符全部轉(zhuǎn)換為其他字符的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10JS如何實(shí)現(xiàn)基于websocket的多端橋接平臺(tái)
我們?cè)谡{(diào)試過(guò)程使用的工具有:modheader,postman等,但這些工具都會(huì)存在的問(wèn)題:缺少客戶端里相應(yīng)的設(shè)備信息;即使將cookie信息復(fù)制出來(lái),也是存在過(guò)期的問(wèn)題;多個(gè)設(shè)備之間切換時(shí)不方便;針對(duì)這些存在的問(wèn)題,我基于websocket雙向通信的特點(diǎn),實(shí)現(xiàn)了多端橋接管理平臺(tái)2021-05-05JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析
這篇文章主要介紹了JavaScript 預(yù)解析的4種實(shí)現(xiàn)方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性詳細(xì)解析
這篇文章主要是對(duì)js鼠標(biāo)及對(duì)象坐標(biāo)控制屬性進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12