學習箭頭函式的方法

  箭頭函式作為 ES6 關於函式擴充套件方面的一大特性，其實是很好了解和掌握的，即通過對比 ES6 和 ES5 規範下函式的寫法上的區別便可快速入手。

案例展示

  例一（無引數並返回簡單資料型別的函式）：

//es6的箭頭函式
let fn = () => 'hello world';
console.log(fn()); //hello world

//等價於es5的
var fn = function () {
    return 'hello world'
}
console.log(fn()); //hello world

  例二（只含一個引數的函式）：

//es6的箭頭函式
let fn = (num) => num * 2;
console.log(fn(5)); //10

//或者
let fn = num => num * 2;
console.log(fn(5)); //10

//-------------------

//等價於es5的
var fn = function (num) {
    return num * 2;
}

console.log(fn(5)); //10

  例三（多引數函式）：

//es6的箭頭函式
let fn = (a, b, c) => a + b + c;
console.log(fn(1, 3
 
, 5)); //9

//-------------------

//等價於es5的
var fn = function (a, b, c) {
    return a + b + c;
}

console.log(fn(1, 3, 5)); //9

  例四（返回結果為物件）：

//es6的箭頭函式
let fn = () => ({
    name: 'loushengyue',
    age: 30,
});
console.log(fn()); //{ name: 'loushengyue', age: 30, }

//-------------------

//等價於es5的
var fn
 
 = function () {
    return {
        name: 'loushengyue',
        age: 30,
    };
}

console.log(fn()); //{ name: 'loushengyue', age: 30, }

  例五（無返回值函式）：

//es6的箭頭函式
let fn = () => {
    console.log('hello world.')
};
fn() //hello world.

//-------------------

//等價於es5的
var fn = function () {
    console.log('hello world.')
}

fn(); //hello world.

  例六（無確定引數個數的函式）：

//es6的箭頭函式
let fn = (...arg) => {
    return arg.map(item => item * 2);
};
console.log(fn(1, 3, 5, 7)); //[2, 6, 10, 14]
console.log(fn(2, 9)); //[4, 18]

//-------------------

//等價於es5的
var fn = function () {
    var arr = [];
    for (var i = 0, n = arguments.length; i < n; i++) {
        arr[i] = arguments[i] * 2;
    }
    return arr;
}

console.log(fn(1, 3, 5, 7)); //[2, 6, 10, 14]
console.log(fn(2, 9)); //[4, 18]

  例七（陣列解構賦值的函式）：

//es6的箭頭函式
let fn = ([a, b]) => {
    return a * b;
};
console.log(fn([2, 5])); //10
console.log(fn([2, 9])); //18

//-------------------

//等價於es5的
var fn = function (arr) {
    return arr[0] * arr[1];
}

console.log(fn([2, 5])); //10
console.log(fn([2, 9])); //18

  例八（物件解構賦值的函式）：

//es6的箭頭函式
let fn = ({ price, num }) => {
    return price * num;
};
console.log(fn({ name: 'fushi', price: 10, num: 5, })); //50

//-------------------

//等價於es5的
var fn = function (obj) {
    return obj.price * obj.num;
}

console.log(fn({ name: 'fushi', price: 10, num: 5, })); //50

  例九（帶預設引數的物件解構賦值的函式）：

//es6的箭頭函式
let fn = ({ price = 10, num = 5 } = {}) => {
    return price * num;
};

console.log(fn()); //50
console.log(fn({ name: 'fushi', price: 8, })); //40
console.log(fn({ name: 'fushi', price: 7, num: 4, })); //28

//-------------------

//等價於es5的
var fn = function (obj) {
    obj = obj || {}
    obj.price = obj.price || 10
    obj.num = obj.num || 5
    return obj.price * obj.num;
}

console.log(fn()); //50
console.log(fn({ name: 'fushi', price: 8, })); //40
console.log(fn({ name: 'fushi', price: 7, num: 4, })); //28

  還有更多案例，這裡將不再一一列出。

謝謝關注，歡迎點贊：）