函數參數的默認值
// ES6 之前，不能直接爲函數的參數指定默認值，只能採用變通的方法
function func(x){
x = x || 1;
console.log(x);
}
func();
// ES6 做法，代碼簡潔易閱讀
function func(x = 1){ // 注意當 x 爲 undefined 時 x 賦值爲 1
console.log(x);
}
func();
function fun(name = 'xx', age = '18'){
console.log(name, age);
}
fun();
函數參數的解構賦值
沒有函數參數的解構賦值之前，調用函數傳遞參數會出現誤傳的情況，如下：
function func(name, age){
console.log(name, age);
}
func('xx', 17);
func(18, 'xx'); // 誤傳
解構賦值可以方便地將一組參數與變量名對應起來：
function func({name, age}){
console.log(name, age);
}
func(); // 因爲你傳遞的實參是 undefined，所以拋出 TypeError: Cannot destructure property `name` of 'undefined' or 'null'.
func({}); // 這調用不會報錯
function func({name, age} = {}){ // 給函數參數設置默認值
console.log(name, age);
}
func(); // 這裏就可以省略不傳
func({name : 'xx', age : 18});
配置解構賦值指定參數的默認值：
function func({name = 'xx', age = 18} = {}){ // 給函數參數設置默認值，並給解構賦值設置默認參數
console.log(name, age); // xx 18
}
func();
// 01. 調用時，因爲沒有傳遞實參，函數參數的默認值起作用即 {name = 'xx', age = 18} = {}
// 02. 對象解構賦值，因爲傳遞的 {} 空對象，所以解構賦值的默認值起作用，及 name = 'xx', age = 18
rest 參數
用於獲取函數的多餘參數，這樣就不需要使用 arguments 對象了。rest 參數搭配的變量是一個數組，該變量將多餘的參數放入數組中。
注意，rest 參數之後不能再有其他參數（即只能是最後一個參數），否則會報錯。
function func(a, ...values) {
console.log(a);
console.log(values);
}
func(2, 3, 4);
擴展運算符
1）調用函數函數時，若在數組類型的實參前使用 `...` 運算符，那麼數組值元素取出來按順序賦值給函數的參數；
2）可以用來合併數組。
function func(a, b, c) {
console.log(a + b + c);
}
let arr = [1, 2, 3];
func.apply(null, arr); // 以前的做法
func(...arr); // ES6 的做法
let arr1 = [1, 2, 3];
let arr2 = [3, 4, 5];
let arr3 = [...arr1, ...arr2];
console.log(arr3);
箭頭函數
ES6 允許使用“箭頭”（=>）簡化函數的定義。
1）基本使用
定義箭頭函數需注意一下幾點：
- 箭頭函數若有多個形參或者無形參，須使用圓括號，否者可以省略；
- 箭頭函數體有多行語句，須使用花括號，否則可以省略；
- 箭頭函數有返回值，若沒有花括號時，不寫return，反之須寫。
// 無參數無返回
function func1(){
console.log('func1');
}
func1();
let func11 = () => console.log('func11');
func11();
// 無參數有返回
function func2(){
return 'func2';
}
console.log(func2());
let func22 = () => 'func22';
console.log(func22());
// 有參數無返回
function func3(x){
console.log('func3', x);
}
func3(1);
let func33 = x => console.log('func33', x);
func33(2);
// 有參數有返回
function func4(x, y){
let sum = x + y;
return sum + 'func4';
}
console.log(func4(1, 2));
let func44 = (x, y) => {let sum = x + y; return sum + 'func44';};
console.log(func44(1, 2));
2）其他應用
主要用來簡化匿名函數編寫。
let arr = [3, 4, 5];
arr.forEach(function(value, index, array){
console.log(value);
});
// 使用箭頭函數簡化
arr.forEach((value, index, array) => {
console.log(value);
});
3）使用注意
- 箭頭函數沒有自己的作用域，即箭頭函數this都是使用外部非箭頭函數的this；
- 箭頭函數不可以new；
- 箭頭函數不可以使用 arguments 獲取參數列表，可以使用 rest 參數代替。
function func() {
setTimeout(() => {
console.log('id:', this.id); // this 與外部的函數 func 的 this 是一樣的
}, 100);
}
var id = 21;
func.call({ id: 42 });
let func = () => { this.a = 123 };
new func(); // 運行會報錯 TypeError: func is not a constructor
let func = (a, b) => {
console.log(a, b);
console.log(arguments); // 這種方式獲取不到實參列表
}
func(1, 2);
let fun = (...params) => { // 使用 rest 參數代替
console.log(params);
}
fun(1, 2);