ES6 函式的擴充套件

2022-07-30 21:21:09 字數 2660 閱讀 4790

### 1.函式引數的預設值

##### 基本用法

~~~js

function log(x, y = 'world')

log('hello') // hello world

log('hello', 'china') // hello china

log('hello', '') // hello 比es5簡潔的多

function point(x = 0, y = 0)

const p = new point();

p // es6 的寫法還有兩個好處:首先,閱讀**的人,可以立刻意識到哪些引數是可以省略的,不用檢視函式體或文件;其次,有利於將來的**優化,即使未來的版本在對外介面中,徹底拿掉這個引數,也不會導致以前的**無法執行。

~~~**注意**

引數變數是預設宣告的,所以不能用`let`或`const`再次宣告 會報error

使用引數預設值時,函式不能有同名引數。

引數預設值不是傳值的,而是每次都重新計算預設值表示式的值

~~~js

let x = 99;

function foo(p = x + 1)

foo() // 100

x = 100;

foo() // 101

~~~##### 函式的length屬性

就是沒有預設值的引數的個數

##### 作用域

一旦設定了引數的預設值,函式進行宣告初始化時,引數會形成乙個單獨的作用域(context)。等到初始化結束,這個作用域就會消失。這種語法行為,在不設定引數預設值時,是不會出現的。

### 2.rest引數

es6 引入 rest 引數(形式為`...變數名`),用於獲取函式的多餘引數,這樣就不需要使用`arguments`物件了。rest 引數搭配的變數是乙個陣列,該變數將多餘的引數放入陣列中。

arguments ---當實參個數多於形參個數時通過arguments 訪問

~~~js

function add(...values)

return sum;

}add(2, 5, 3) // 10

// arguments變數的寫法

function sortnumbers()

// rest引數的寫法

const sortnumbers = (...numbers) => numbers.sort();

~~~#### 3.函式的name屬性

~~~js

var f = function () {};

// es5

f.name // ""

// es6

f.name // "f"

~~~如果將乙個匿名函式賦值給乙個變數,es5 的`name`屬性,會返回空字串,而 es6 的`name`屬性會返回實際的函式名。

`function`建構函式返回的函式例項,`name`屬性的值為`anonymous`。

`bind`返回的函式,`name`屬性值會加上`bound`字首。

~~~js

(new function).name // "anonymous"

function foo() {};

foo.bind({}).name // "bound foo"

(function(){}).bind({}).name // "bound "

~~~#### 5.箭頭函式

~~~js

var f = v => v;

// 等同於

var f = function (v) ;

//如果箭頭函式不需要引數或需要多個引數,就使用乙個圓括號代表引數部分。

var f = () => 5;

// 等同於

var f = function () ;

var sum = (num1, num2) => num1 + num2;

// 等同於

var sum = function(num1, num2) ;

// 如果箭頭函式的語句多於一句就用花括號 並且使用return語句返回。

var sum = (num1, num2) =>

//直接返回乙個物件時,必須在物件外面加上圓括號

// 報錯

let gettempitem = id => ;

// 不報錯

let gettempitem = id => ();

~~~**箭頭函式有幾個使用注意點。**

(1)函式體內的`this`物件,就是定義時所在的物件,而不是使用時所在的物件。

(2)不可以當作建構函式,也就是說,不可以使用`new`命令,否則會丟擲乙個錯誤。

(3)不可以使用`arguments`物件,該物件在函式體內不存在。如果要用,可以用 rest 引數代替。

(4)不可以使用`yield`命令,因此箭頭函式不能用作 generator 函式。

上面四點中,第一點尤其值得注意。`this`物件的指

**箭頭函式的this指向**

`this`物件的指向是可變的,但是在箭頭函式中,它是固定的。

`this`指向的固定化,並不是因為箭頭函式內部有繫結`this`的機制,實際原因是箭頭函式根本沒有自己的`this`,導致內部的`this`就是外層**塊的`this`。正是因為它沒有`this`,所以也就不能用作建構函式。

ES6 函式擴充套件

函式在js裡是相當重要的一部分了,es6裡也新增了一些函式方法,來看一下 test hello hello world test hello kill hello kill es6增加了函式引數預設值,可以直接在宣告引數的同時賦預設值,但是也可以後面重新賦值 test2 kill 括號內有引數x時,...

ES6函式擴充套件

函式引數的預設值 在es5中,我們想給函式乙個預設值,需要這樣寫 function add x,y 在es6中 可以這樣寫 function add x,y ss add dd ddss add ss dd ssdd add dd dd我們只需要在引數上直接寫上我們想要的預設值就好了。當我們給函式乙...

ES6函式擴充套件

function fun a,b world fun hello 輸出helloworld let a aa function fun a,b a fun bb function fun arg fun 1,2,3,4,1 語法 param param 對應函式 function 沒有引數 乙個引數...