一、说明

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”=>”

ECMAScript6箭头函数ArrowFunction"=>"的更多相关文章

  1. ECMAScript6之箭头函数

    2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 函数作为js语言中的一等公民.自然Es6中推出的箭头函数(=>)也是备受瞩目的.那我们接下来看下传 ...

  2. es6 箭头函数(arrow function) 学习笔记

    箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...

  3. ES6中的箭头函数

    关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...

  4. ES6 箭头函数下的this指向和普通函数的this对比

    首先在网上摘抄借鉴了一段代码, 然后再这段代码里面进行分析,通过比较ES6的箭头函数和普通函数的this指指向, 分析其中的不同之处.下面就是代码片段var name = "window&q ...

  5. es6--之箭头函数

    「箭头函数」是 ECMAScript6 中非常重要的性特性.很多文章都在描述它的上下文透明性以及短语法.新特性必然会带来很多好处,但凡事都有两面性.本篇文章会通过情景引导,让你知晓哪些情景下应该绕过箭 ...

  6. [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  7. ES6 箭头函数中的 this?你可能想多了(翻译)

    箭头函数=>无疑是ES6中最受关注的一个新特性了,通过它可以简写 function 函数表达式,你也可以在各种提及箭头函数的地方看到这样的观点——“=> 就是一个新的 function”. ...

  8. ES6箭头函数与展开运算符

    箭头函数:省去了关键字function和return: eg: reduce=(a,b)=>a+b;//返回a+b的值 redduce=(a,b)=>{console.log(a);con ...

  9. 箭头函数和Buffer对象

    一.箭头函数 普通函数1 var add = function (a, b) { return a + b; } 普通函数2 function add (a, b) { return a + b; } ...

随机推荐

  1. 开源静态分析工具androguard体验

    原文链接:http://blog.csdn.net/xbalien29/article/details/21885297 虽然在windows端免费版的IDA.VTS等工具都可用来静态分析,但相对来说 ...

  2. RabbitMQ快速入门python教程

    摘要:HelloWorld 简介 RabbitMQ:接受消息再传递消息,可以视为一个“邮局”.发送者和接受者通过队列来进行交互,队列的大小可以视为无限的,多个发送者可以发生给一个队列,多个接收者也可以 ...

  3. 36氪Plus消息:贷款组合推荐工具“钱小二”已获数百万天使轮融资

    根据"钱小二"在创业者社区36氪plus上的更新信息,该团队已获得数百万天使轮融资,投资方及投资时间不明. "钱小二"是一个贷款搜索 + 贷款组合推荐平台,目标 ...

  4. centos 7 查看修改时区

    查看时区 date -R 修改时区 # timedatectl list-timezones # 列出所有时区 # timedatectl set-local-rtc 1 # 将硬件时钟调整为与本地时 ...

  5. ace admin 下拉选择Multiple-select组件

    一.组件说明以及API 1.第一个组件是写bootstrap table的主人公 wenzhixin 封装的一个组件—— multiple-select.这个组件风格简单.文档全.功能强大.但是觉得它 ...

  6. kafka快速开始教程

    此教程假设你刚刚开始没有任何 Kafka 或 ZooKeeper 数据.Kafka的控制台脚本在类Unix和Windows平台不同,Windows平台使用bin\windows\\代替bin/,脚本的 ...

  7. 5 月 35 日临近,Google 无法访问,可以使用 Google IP 来解决。

    每年都会有几天那啥,你懂的. 直接使用 Google 的域名访问经常会打不开,而使用 Google 的 IP 就会很顺畅. 使用 Chrome 浏览器我们经常都会在地址栏直接搜索,所以我们只要添加一个 ...

  8. code::blocks怎么设置命令行参数

    Project->Set Program's Arguments...然后在相应的输入框中输入命令行参数

  9. Java 十进制和十六制之间的转化(负数的处理)

    原文: http://www.cnblogs.com/literoad/archive/2013/01/25/2875908.html 在一些情况下,我们需要将数字在十进制和十六制下互相转化. 在Ja ...

  10. springMVC对简单对象、Set、List、Map的数据绑定和常见问题.

    算了,就不粘贴了,到原文去查看吧! springMVC对简单对象.Set.List.Map的数据绑定和常见问题.