ECMAScript6箭头函数ArrowFunction"=>"

来源：互联网发布：微信js sdk 分享编辑：程序博客网时间：2024/05/22 08:49

一、说明

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)); //9var f = x => {return x * x;};console.log(f(3)); //9var f = (x) => x * x;console.log(f(3)); //9var f = (x) => {return x * x;};console.log(f(3)); //9

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

var f = (x, y) => x * y;console.log(f(2, 3)); //6var 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()); //undefinedvar f = () => ({name:'mazey'});console.log(f()); //{name: "mazey"}

四、练习代码

<script>var f = () => 9;console.log(f()); //9var f = x => x * x;console.log(f(3)); //9var f = x => {return x * x;};console.log(f(3)); //9var f = (x) => x * x;console.log(f(3)); //9var f = (x) => {return x * x;};console.log(f(3)); //9var f = (x, y) => x * y;console.log(f(2, 3)); //6var 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)); //120var 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); //6var obj = {    name: 'mazey',    f: function(){        var myName = () => this.name; //这里的this指向obj        return myName();    }};console.log(obj.f()); //mazeyvar f = () => {name:'mazey'};console.log(f()); //undefinedvar f = () => ({name:'mazey'});console.log(f()); //{name: "mazey"}</script>

ECMAScript6箭头函数ArrowFunction”=>”

阅读全文

0 0