一、说明

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. Python中函数参数传递问题【转】

    1. Python passes everything the same way, but calling it "by value" or "by reference& ...

  2. JAVA IO:Scanner类

    使用Scanner类接收输入数据. JAVA提供了专门的输入数据类,此类可以完成BufferedReader类的功能,也可以方便的对输入数据进行验证,此类存放于JAVA.UTILL包中. 常用方法如下 ...

  3. Spring 配置dataSource和sessionFactory

    记得导入dbcp和pool的jar包.   <?xml version="1.0" encoding="UTF-8"?> <beans xml ...

  4. 千万级大数据的Mysql数据库SQL语句优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  5. gitlab 6 安装备忘录

    gitlab 6.2-stable;Ubuntu 13.10;ruby 2.0.0 推荐使用PostgreSQL,MySQL不同版本可能碰到兼容性问题(www.oschina.net/question ...

  6. Spring Boot(五):Spring Boot的启动器Starter大全及自定义Starter

    现有启动器Starter目录 Spring Boot应用启动器基本的一共有44种,具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和 ...

  7. HTTP解读

    使用Telnet工具访问web资源 Windows中没有telnet这一工具,下面在Linux下演示: telnet www.baidu.com 80 Trying 61.135.169.125... ...

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

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

  9. tomcat各目录下的作用

    1.tomcat的主目录下的文件   bin目录主要是用来存放tomcat的命令,主要有两大类,一类是以.sh结尾的(linux命令),另一类是以.bat结尾的(windows命令). 重要: 很多环 ...

  10. C语言指针解说

    指针是C语言的一种数据类型.类似于C中的其它类型,比如int ,char 等.既然指针是一种类型,当我们定义该类型变量.该类型变量就称为指针变量. C中有了指针就有了指向. 指向:指针变量指向本身保存 ...