es6 箭头函数的基本用法

学习箭头函数的方法

  箭头函数作为 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

  还有更多案例，这里将不再一一列出。

---

谢谢关注，欢迎点赞：）