JavaScript ES6的函數拓展

Posted on by

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參數搭配的變量是一個數組，該變量將多餘的參數放入數組中

類似解構賦值，以後就不用call來使arguments調用數組方法瞭

function count(...values) {
    console.log(values);//[2, 5, 3]
    return values.reduce((acc,curr) => acc + curr);
}
add(2, 5, 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

{}中書寫多行語句

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

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

到此這篇關於JavaScript ES6的函數拓展的文章就介紹到這瞭,更多相關JavaScript ES6 函數 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：