ES6中的箭頭函數(shù)以及擴(kuò)展

1、回顧

用ES5定義一個(gè)加法函數(shù):

function add(a,b){
    return a+b;
}
console.log(add(1,2));    //3

如果b有默認(rèn)值:(這個(gè)時(shí)候可以只傳一個(gè)參數(shù))

function add(a,b=1){
    return a+b;
}
console.log(add(1));    //2

2、ES6中函數(shù)拋出錯(cuò)誤

function add(a,b=1){
    if(a == 1){
        throw new Error('a is a error');
    }
    return a+b;
}
console.log(add(1));     //Uncaught Error: a is a error

通過(guò)throw new Error,控制臺(tái)可以拋出我們自定義的錯(cuò)誤

3、函數(shù)中的嚴(yán)謹(jǐn)模式

在ES5中,嚴(yán)謹(jǐn)模式'use strict'只能在文件的最上面,相當(dāng)于全局使用,而在ES6中,可以寫(xiě)在函數(shù)中或者是塊級(jí)作用域{}中,如下:

function add(a,b=1){
    'use strict'
    return a+b;
}
console.log(add(1));    //Illegal 'use strict' directive in function with non-simple parameter list

會(huì)報(bào)錯(cuò)是因?yàn)槟J(rèn)值與嚴(yán)謹(jǐn)模式?jīng)_突了,如果在函數(shù)中使用嚴(yán)謹(jǐn)模式,那么函數(shù)的參數(shù)就不能有默認(rèn)值,將默認(rèn)值去掉,程序就可以正常運(yùn)行:

function add(a,b){
    'use strict'
    return a+b;
}
console.log(add(1,2));      //3

4、獲得函數(shù)需要傳遞的參數(shù)

在ES6中,可以通過(guò)函數(shù)名.length的方式獲得函數(shù)需要傳遞的參數(shù):

function add(a,b){
    return a+b;
}
console.log(add.length);      //2

但如果這時(shí)候我們給b一個(gè)默認(rèn)值:

function add(a,b=1){
    return a+b;
}
console.log(add.length);      //1

所以通過(guò)函數(shù)名.length獲得的就是函數(shù)必須要傳的參數(shù)的個(gè)數(shù),(不包括函數(shù)中有默認(rèn)值的參數(shù))

5、箭頭函數(shù)

將上面的加函數(shù)變成箭頭函數(shù):

var add = (a, b) => a+b;
console.log(add(1,2));      //3

如果函數(shù)體只有一句話就可以省略函數(shù)的花括號(hào){},這時(shí)候就相當(dāng)于{return a+b;},如果函數(shù)體里不止有一條語(yǔ)句,那么花括號(hào){}不能省
此外,箭頭函數(shù)中不能使用new,所以,箭頭函數(shù)不能當(dāng)構(gòu)造函數(shù)使用

6、函數(shù)解構(gòu)

①函數(shù)對(duì)對(duì)象的解構(gòu)

let json = {
    a:'字符串a(chǎn)',
    b:'字符串b'
};
function fun({a,b}){
    console.log(a,b);
}
fun(json);      //字符串a(chǎn) 字符串b

通過(guò)該方式,json型的數(shù)據(jù)可以直接傳到函數(shù)中,不用再一次次傳參數(shù)了
②函數(shù)對(duì)數(shù)組的解構(gòu)

let arr = ['值1','值2','值3'];
function fun(a,b,c){
    console.log(a,b,c);
}
fun(...arr);      //值1 值2 值3

通過(guò)對(duì)象擴(kuò)展運(yùn)算符,可以在函數(shù)中傳入數(shù)組,而不用傳入一個(gè)一個(gè)的值

7、ES6中的in

①判斷對(duì)象中是否存在某個(gè)鍵名:

let obj = {
    a:'值a',
    b:'值b'
};
console.log('a' in obj);      //true
console.log('c' in obj);      //false

如果存在,則返回true,否則返回false
②判斷數(shù)組的值是否是空值
在ES5中可以通過(guò)數(shù)組.length的方式看數(shù)組是否有值,但該方法有個(gè)弊端,如下:

let arr = [,,,,,];
console.log(arr.length);    //5

當(dāng)數(shù)組都是空值時(shí),數(shù)組依舊有長(zhǎng)度值
針對(duì)這種情況,在ES6中就可以通過(guò)in的方式來(lái)判斷

let arr = [1,,,,];
console.log(0 in arr);      //true
console.log(1 in arr);      //false

當(dāng)數(shù)組在該位置上不是空值時(shí),會(huì)返回true,如果是空值會(huì)返回false(這里的0和1代表的是數(shù)組的下標(biāo)即索引)

8、數(shù)組遍歷的各種方式

①forEach:

let arr = ['值1','值2','值3'];
arr.forEach((item,index)=>console.log(index, item));
//0 "值1"
//1 "值2"
//2 "值3"

②filter

let arr = ['值1','值2','值3'];
arr.filter((item,index)=>console.log(index, item));
//0 "值1"
//1 "值2"
//2 "值3"

③some

let arr = ['值1','值2','值3'];
arr.some((item,index)=>console.log(index, item));
//0 "值1"
//1 "值2"
//2 "值3"

④map

let arr = ['值1','值2','值3'];
arr.map(item => console.log(item));        //值1 值2 值3
console.log(arr.map(item => 'web'));      //(3) ["web", "web", "web"]

9、數(shù)組轉(zhuǎn)字符串

①tostring()

let arr = ['值1','值2','值3'];
console.log(arr.toString());      //值1,值2,值3

該方法轉(zhuǎn)換時(shí)默認(rèn)用逗號(hào)隔開(kāi)
②join()

let arr = ['值1','值2','值3'];
console.log(arr.join('='));      //值1=值2=值3
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容