目錄

• ES6函式拓展
• 函式的預設引數
• reset引數
• name屬性
• 箭頭函式

ES6函式拓展

函式的預設引數

之前的寫法:

function count(x,y) {
 return x + y;
}
count(3);//因為只傳遞了引數x,y的預設值為undefined
//undefined + 3返回NaN

function count(x,y) {
 x = x || 0;
 y = y || 0;
 return x + y;
}
count(3);//3

function count(x,y) {
 x = x??0;
 y = y??0;
 return x + y;
}
count(3);//3

ES6寫法：

ES6的寫法簡潔易讀，能夠讓其他開發者快速瞭解引數型別，是否可省等資訊，也不會對函式體程式碼造成過多負擔，有利於後期優化重構

function count(x = 0,y = 0) {
 return x + y;
}
count(3);

注意事項：

1.使用預設引數，在函式體內不能重新命名同名變數

function count(x = 0,y = 0) {
 let x;//報錯
 const y;//報錯
}

引數預設值不是傳值的，而是每次都重新計算預設表示式的值，也就是說引數預設值是惰性求值的

let num = 1;
function count(x = num + 1,y = 0) {
 return x;
}
count();//2

num = 99;
count();//100

引數也可以作為預設值,但是要注意順序

正確示例：

function fn(x = 10,y = x) {
 console.log(x,y);
}
fn(20);//20 20
fn();//10 10

錯誤示例:

function fn(x = y,y = 10) {
 console.log(x,y);
}
fn();//報錯

引數預設值為變數時，如果外部作用域有對應變數，那麼這個引數就會指向外部變數（即引數的值等於外部變數的值）

let w = 10;
function fn(x = w) {
 let w = 20;
 return x;
}
fn();//10

注意:

//在()階段,x已經賦值後,再改變w的值,也無法改變x的值
let w = 10;
function fn(x = 2) {
 w = 20;
 return x;
}
fn();//10

reset引數

ES6引入reset引數(形式為…變數名)，用於獲取函式的多餘引數，這樣就不需要使用arguments物件了

reset引數搭http://www.cppcns.com配的變數是一個數組，該變數將多餘的引數放入陣列中

類似解構賦值，以後就不用call來使arguments呼叫陣列方法了

function count(...values) {
 console.log(values);//[2,5,3]
 return values.reduce((acc,curr) => acc + curr);
}
add(2,3);//10

reset引數必須作為函式最後一個引數

function count(...value,a){}//報錯

name屬性

函式的name屬性，返回該函式的函式名

function count(){}
console.log(count.name); //"count"

(new Function).name // "anonymous"

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

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

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

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

箭頭函式

ES6中規定可以使用“箭頭”（=>）定義函式

------------正常函式-------------
function count(x,y) {
 return x + y;
}
------------箭頭函式-------------
let count =(x,y) => x + y;

函式體中可以直接書寫表示式

let count = (x,y) => {
 y = 100;
 x = x * y;
 return x + y;
}
count(3,4);//400

()中書寫表示式，書寫多個短語語句，最後一個“，”之後的值為返回值

let count = (x,y) => (x = 100,y = 10,x + y);
count(3,4);//110

{}http://www.cppcns.com中書寫多行語句

//報錯 會將{}識別為函式體
let count = id => {id: id,name: "yunjin"};

//不會報錯
let count = id => ({id: id,name: "yunjin"});

到此這篇關於 ES6的函式拓展的文章就介紹到這了,更多相關Script ES6 函式 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！