ES6新特性（三）函式擴充套件

1.1. 方法的形參可以賦預設值，在呼叫方法時，如果沒有與之對應的實參則使用形參的預設值。

1.2. 賦預設值的形參的後面不能有普通形參（沒有賦預設值的形參）。

1.2.1. 預設值只在沒有傳參或者引數為undefined時使用預設值，如果引數為null,則不適用預設值。

//函式的引數預設值
//賦預設值的形參在普通引數的後面
function method(id,name,age=18,***='男')
method(1,'張三',20);
//賦預設值的形參在普通形參的前面，這種寫法是錯誤的
function method2(id,name,age=18,***)
method2(1,'張三','女');

1.3. 函式引數預設值作用域的問題。

當函式形參預設值是函式中的某個形參，而該形參名與外部所宣告的變數名同名，此時預設值所採用的值是函式中的形參，而不是外部的變數。

//函式形參預設值的作用域問題
let a = 15;
function method(a,b=a)
method(10);

2.1. 剩餘引數的宣告是在函式形參前用三個點，當函式實參數量大於形參數量時，剩餘的實參將放入乙個陣列中，而這個陣列就是剩餘引數。

2.2. 剩餘引數必須是最後乙個形參，否則會編譯報錯。

下列**中的 …name 就是剩餘引數

//剩餘引數（rest引數）
//剩餘引數必須是最後乙個形參
function method(age, ...name)
}method(12,'zhangsan','lisi','wangwu');

2.3. 解構與剩餘引數搭配使用

在下列**中，arr陣列解構給了兩個變數，a變數對應陣列的第乙個元素，剩餘引數b對應後面的所有元素，所以b也是個陣列。

//解構與剩餘引數搭配使用
let arr = [1,2,3,4,5];
let [a,...b] = arr;
console.log(a,b);// a:1 b:[2,3,4,5]

3.1. 擴充套件運算子可以將陣列拆分成以逗號分隔的引數序列。

這裡用console.log()輸出拆分後的陣列，由於console.log()可以接收多個引數，各引數用逗號分隔，而拆分後的陣列是以逗號分隔的引數序列，所以console.log(…arr)實際上就是輸出了拆分後的值，而逗號已經被console.log()解析為分隔符了。

//擴充套件運算子
let arr = [1,2,3,4,5];
//...arr; //1,2,3,4,5
console.log(...arr);// 1 2 3 4 5

3.2. 擴充套件運算子與前面的剩餘運算子的作用正好相反，剩餘運算子是將多個引數合併成乙個陣列，擴充套件運算子是將乙個陣列拆分成以逗號分隔的引數序列。

4.1. 箭頭函式是es6新增的一種簡潔的定義函式的方式，它與普通函式不同，箭頭函式不繫結this。

//箭頭函式與普通函式的區別
let obj = 
} 
let obj2 = 
} 
obj.say();//呼叫箭頭函式
obj2.say();//呼叫普通函式

4.2. 箭頭函式不繫結this,如果在箭頭函式中使用this，它將指向箭頭函式所定義的作用域中的this，也就是說：箭頭函式定義在哪，箭頭函式中的this就指向哪。

在下列**中，obj物件的say方法是乙個箭頭函式，箭頭函式中使用this呼叫age屬性，由於箭頭函式不繫結this，又因為obj 是個物件不是作用域，所以當箭頭函式中使用this關鍵字呼叫age屬性時，呼叫的是外部宣告的全域性變數age，也就是window物件的age。

var age = 10;//全域性變數 age
let obj = 
} 
obj.say();

ES6新特性（三）函式擴充套件

es6新特性 ES6新特性（一）

ES6新特性使用小結（三）

ES6新特性須知

ES6新特性（三） 函式擴充套件

es6新特性 ES6新特性（一）

ES6新特性使用小結（三）

ES6新特性須知

相關推薦

ES6新特性（三）函式擴充套件