ECMAScript6箭头函数ArrowFunction"=>"

一、说明

ECMAScript6可以用箭头"=>"定义函数。x => x * x或(x) => {return x * x;}与匿名函数function(x){return x * x;}相等。

二、示例

2.1 没有参数的箭头函数

var f = () => 9;
console.log(f()); //9

2.2 一个参数的箭头函数

var f = x => x * x;
console.log(f(3)); //9
var f = x => {return x * x;};
console.log(f(3)); //9
var f = (x) => x * x;
console.log(f(3)); //9
var f = (x) => {return x * x;};
console.log(f(3)); //9

2.3 两个或更多参数的箭头函数

var f = (x, y) => x * y;
console.log(f(2, 3)); //6
var f = (x, y , ...more) => {
    var multiply = x * y;
    for(var i = 0; i < more.length; i++){
        multiply *= more[i];
    }
    return multiply;
};
console.log(f(2, 3, 4, 5)); //120

2.4 map/reduce应用

var f = [1, 2, 3].map(x => x * x);
console.log(f); //[1, 4, 9]
var f = [1, 2, 3].reduce((x, y) => x + y);
console.log(f); //6

三、this作用域/返回对象

3.1 this作用域

箭头函数中的this总是指向外层作用域，即使在内层函数里面，所以可以不用写var that = this;。

var obj = {
    name: ‘mazey‘,
    f: function(){
        var myName = () => this.name; //这里的this指向obj
        return myName();
    }
};
console.log(obj.f()); //mazey

3.2 返回对象

因为对象和块的冲突问题，箭头函数返回一个如{name:‘mazey‘}的对象必需用()括起来。

var f = () => {name:‘mazey‘};
console.log(f()); //undefined
var f = () => ({name:‘mazey‘});
console.log(f()); //{name: "mazey"}

四、练习代码

<script>
var f = () => 9;
console.log(f()); //9
var f = x => x * x;
console.log(f(3)); //9
var f = x => {return x * x;};
console.log(f(3)); //9
var f = (x) => x * x;
console.log(f(3)); //9
var f = (x) => {return x * x;};
console.log(f(3)); //9
var f = (x, y) => x * y;
console.log(f(2, 3)); //6
var f = (x, y , ...more) => {
    var multiply = x * y;
    for(var i = 0; i < more.length; i++){
        multiply *= more[i];
    }
    return multiply;
};
console.log(f(2, 3, 4, 5)); //120
var f = [1, 2, 3].map(x => x * x);
console.log(f); //[1, 4, 9]
var f = [1, 2, 3].reduce((x, y) => x + y);
console.log(f); //6
var obj = {
    name: ‘mazey‘,
    f: function(){
        var myName = () => this.name; //这里的this指向obj
        return myName();
    }
};
console.log(obj.f()); //mazey
var f = () => {name:‘mazey‘};
console.log(f()); //undefined
var f = () => ({name:‘mazey‘});
console.log(f()); //{name: "mazey"}
</script>

ECMAScript6箭头函数ArrowFunction”=>”