ES6學習筆記 —— 函式
阿新 • • 發佈:2022-05-06
一、預設引數
- 使用函式預設引數時,不允許有同名引數。
- 函式引數尾逗號:允許函式最後一個引數有尾逗號。
- 定義了預設值的引數,應該是函式的尾引數,只有在未傳遞引數,或者引數為 undefined 時,才會使用預設引數,null 值被認為是有效的值傳遞。
- 引數預設值不是傳值的,而是每次都重新計算預設值表示式的值。也就是說,引數預設值是惰性求值的。
- 引數變數是預設宣告的,所以不能用
let
或const
再次宣告。
// 報錯,不允許有同名引數 function fn(x,x,y=17){ console.log(y); }
//非尾部的引數設定預設值,這個引數是沒法省略的function f(x = 1, y) { return [x, y]; } f() // [1, undefined] f(2) // [2, undefined] f(, 1) // 報錯
// null不觸發預設值 function fn(x,y=17){ console.log(x,y); } fn(1,null) //1 null //不能用let或const再次宣告 function foo(x = 5) { let x = 1; // error const x = 2; // error }
二、rest引數
- rest 引數搭配的變數是一個數組,該變數將多餘的引數放入陣列中。
- rest引數只能放在引數組的最後,並且有且只有一個不定引數。
- 函式的
length
屬性,不包括 rest 引數。
//rest 引數搭配的變數是一個數組 fn(...values){ console.log(values) } this.fn(1,2) //[1,2] this.fn(1,2,3,4) //[1,2,3,4] // 報錯,rest數只能放在引數組的最後 fn(a, ...b, c) { // ... } //函式的length屬性,不包括 rest 引數 (function(a) {}).length // 1 (function(...a) {}).length // 0 (function(a, ...b) {}).length // 1
三、箭頭函式
- 箭頭函式和普通函式的樣式不同,箭頭函式語法更加簡潔、清晰,箭頭函式是 =>定義函式,普通函式是 function定義函式。
- 箭頭函式不需要引數或需要多個引數,就使用一個圓括號代表引數部分。
- 箭頭函式的程式碼塊部分多於一條語句,就要使用大括號將它們括起來,並且使用
return
語句返回。 - 箭頭函式要返回物件的時候,為了區分於程式碼塊,要用 () 將物件包裹起來。
- 箭頭函式其實是沒有 this 的,箭頭函式中的 this 只取決包裹箭頭函式的第一個普通函式的 this。
- 箭頭函式體中的 this 物件,是定義函式時的物件,而不是使用函式時的物件。
- 不可以當作建構函式,也就是說,不可以對箭頭函式使用
new
- 不可以使用
arguments
物件,該物件在函式體內不存在。如果要用,可以用 rest 引數代替。 - 不可以使用
yield
命令,因此箭頭函式不能用作 Generator 函式。
//1.箭頭函式 var f = v => v; //2.箭頭函式不需要引數或需要多個引數 var f = () => 5; var f = (a,b) => a+b; //3.箭頭函式的程式碼塊部分多於一條語句 var sum = (num1, num2) => { return num1 + num2; } //4.返回一個物件 let getTempItem = id => ({ id: id, name: "Temp" }); //箭頭函式只有一行語句,且不需要返回值 let fn = () => void doesNotReturn(); //6.箭頭函式體中的 this 物件,是定義函式時的物件,而不是使用函式時的物件。 function fn(){ setTimeout(()=>{ // 定義時,this 繫結的是 fn 中的 this 物件 console.log(this.a); },0) } var a = 20; // fn 的 this 物件為 {a: 18} fn.call({a: 18}); // 18
學習網站地址:http://caibaojian.com/es6/destructuring.html