ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
本文實(shí)例講述了ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用。分享給大家供大家參考，具體如下：
在ES6中， 函數(shù)的參數(shù)也可以使用解構(gòu)賦值和默認(rèn)值的設(shè)置，下面我們來看下
在ES6之前設(shè)置函數(shù)默認(rèn)值的寫法
function test(x,y) {
x = x || 12;
y = y || 22;
console.log(x,y);
}
test(); // 12 22
test(1,2) // 1 2
在ES6中給函數(shù)參數(shù)賦默認(rèn)值
function test(x=12, y=22) {
console.log(x,y);
}
test(); // 12 22
test(3,4); // 3 4
ES6中函數(shù)數(shù)組參數(shù)的默認(rèn)值
function test([x=2,y=1]) {
console.log(x, y);
}
test([]); // 2, 1
test([3,4]) // 3 4
test(); // 報(bào)錯(cuò)： Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
解決上述最后一個(gè)錯(cuò)誤：使用默認(rèn)數(shù)組來匹配沒有參數(shù)的情形
function test([x=2,y=1]=[]) {
console.log(x, y);
}
test(); // 2 1
更多應(yīng)用：
function test([x=2,y=1]=[], z=90) {
console.log(x, y, z);
}
test(); // 2 1 90
test(undefined, 80); // 2 1 80
test('', 50); // 2 1 50 正常輸出
// test(null, 80); // 報(bào)錯(cuò)，不能填入null Uncaught TypeError: Cannot read property 'Symbol(Symbol.iterator)' of object
// test(NaN, 60); // 報(bào)錯(cuò)： Uncaught TypeError: undefined is not a function
注意上面函數(shù)參數(shù)可以接受undefined，但不能接受null和NaN
下面則是更復(fù)雜的應(yīng)用
function test([x=2,[y=3,w=4]=[]]=[], z=90) {
console.log(x, y, w, z);
}
test(); // 2 3 4 90
test(undefined, undefined); // 2 3 4 90
test(undefined, 8); // 2 3 4 8
test([5,[]],12); // 5 3 4 12
test([5,[2,6]],12); // 5 2 6 12
注意其中的陷阱：
function test([x,y]=[1,2]) {
console.log(x,y);
}
test(); // 1 2
test([]); // undefined undefined
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- ES6學(xué)習(xí)筆記之字符串、數(shù)組、對(duì)象、函數(shù)新增知識(shí)點(diǎn)實(shí)例分析
- es6數(shù)組的flat()，flatMap()函數(shù)用法實(shí)例分析
- ES6中箭頭函數(shù)的定義與調(diào)用方式詳解
- ES6中的箭頭函數(shù)實(shí)例詳解
- 關(guān)于ES6箭頭函數(shù)中的this問題
- ES6新特性之函數(shù)的擴(kuò)展實(shí)例詳解
- Es6 Generator函數(shù)詳細(xì)解析
- JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
- 淺談ES6新增的數(shù)組方法和對(duì)象
- ES6數(shù)組的擴(kuò)展詳解
- ES6函數(shù)和數(shù)組用法實(shí)例分析
相關(guān)文章
JavaScript實(shí)現(xiàn)表單注冊(cè)、表單驗(yàn)證、運(yùn)算符功能
在本篇文章里我們給大家整理了關(guān)于JavaScript中表單注冊(cè)、表單驗(yàn)證、運(yùn)算符的代碼示例，有興趣的朋友們可以測(cè)試學(xué)習(xí)下。2018-10-10
如何優(yōu)雅地取消 JavaScript 異步任務(wù)
這篇文章主要介紹了如何優(yōu)雅地取消 JavaScript 異步任務(wù)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
音樂播放用的的幾個(gè)函數(shù)...2006-09-09
JavaScript手寫實(shí)現(xiàn)一個(gè)簡(jiǎn)單的快捷鍵庫(kù)
前端開發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來用JavaScript手寫一個(gè)簡(jiǎn)單的快捷鍵庫(kù)吧2024-02-02
這篇文章主要介紹了微信js-sdk上傳與下載圖片接口用法,結(jié)合實(shí)例形式分析了基于上傳圖片接口(uploadImage)和下載圖片接口(downloadImage)針對(duì)圖片操作的相關(guān)技巧,需要的朋友可以參考下2016-10-10
JS基于clipBoard.js插件實(shí)現(xiàn)剪切、復(fù)制、粘貼
這篇文章主要介紹了JS實(shí)現(xiàn)剪切、復(fù)制、粘貼——clipBoard.js 的相關(guān)資料,需要的朋友可以參考下2016-05-05
原生JS實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實(shí)現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
原生JavaScript實(shí)現(xiàn)彈幕組件的示例代碼
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)彈幕組件的示例代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
基于openlayers實(shí)現(xiàn)角度測(cè)量功能
這篇文章主要為大家詳細(xì)介紹了基于openlayers實(shí)現(xiàn)角度測(cè)量功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JS實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成可拖動(dòng)的不同顏色塊示例
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕隨機(jī)生成可拖動(dòng)的不同顏色塊,涉及javascript數(shù)值運(yùn)算與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01