1. ES2015中的箭头函数

JavaScript有一级函数的特性,也就是说,函数像其他值一样可以当成参数传来传去。

var result = [1,2,3].reduce(function(total, current){
return total + current;
}, 0) //6;

使用箭头函数改造一下:

var result = [1,2,3].reduce((totoal, current) => total + current, 0);
console.log(result);

再看几个例子:

var even = [3,1,16,17,29].filter(el => !(el % 2));
console.log(even);
var sorted = data.sort((a, b) => {
var diff = a.price - b.price;
if(diff != 0){
return diff;
}
return a.total - b.total;
})

1.1. 箭头函数的执行上下文

箭头函数有一个非常重要的特性,就是其执行上下文(也就是代码中的this)指向为外层代码,例如:

function MyComponent(){
this.age = 26;
setTimeout(() => {
this.age += 1;
console.log(this.age);
}, 100);
}
new MyComponent(); // 27 in 100ms.

在Angular2中这一特性非常有用,对于特定的Component来说,箭头函数所绑定的上下文就是Component的实例。如果我们把MyComponent定义为Angular2中的组件,就可以使用age属性用来进行数据绑定。

002.ES2015和ES2016新特性--箭头函数.md的更多相关文章

  1. 003.ES2015和ES2016新特性--类.md

    JavaScript使用的是基于原型的OO模型,用对象字面量或者函数来实例化对象,用原型链来实现继承. 这样对于数据传统C++.Java的OO范式的开发者来说,会感到比较困惑,于是从ES2015开始逐 ...

  2. 004.ES2015和ES2016新特性--块级作用域变量

    其基本原理就是JavaScript的作用域链,下面以对比的方式来展示一下函数级作用域和块级作用域. 函数级作用域 var fns = []; for (var i = 0; i < 5 ; i+ ...

  3. ES6新特性箭头函数和常用function()对比

    // 无参 var fn1 = function() {} var fn1 = () => {} // 单个参数 var fn2 = function(a) {} var fn2 = a =&g ...

  4. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  5. 【C++11】新特性——Lambda函数

    本篇文章由:http://www.sollyu.com/c11-new-lambda-function/ 文章列表 本文章为系列文章 [C++11]新特性--auto的使用 http://www.so ...

  6. ES6新特新之箭头函数使用细节

    <=这个大家都知道是小于等于,那么=>是什么呢?今天我们就来探究一下ES6的新特新-----胖箭头函数. 其他语言的函数定义都是很简洁的,但是为什么javaScript的就那么复杂呢?还必 ...

  7. 005.ES2016新特性--装饰器

    装饰器在设计阶段可以对类和属性进行注释和修改,在Angular2中装饰器非常常用,可以用来定义组件.指令以及管道,并且可以与框架提供的依赖注入机制配合使用. 从本质上上讲,装饰器的最大作用是修改预定义 ...

  8. C++ 11 新特性:函数声明auto

    1.概览 1.1 函数名中的箭头,用来表明函数的return type,其使用在函数的返回类型需要通过模板参数进行推导,使用在decltype()和declval()不方便的场景 2.正文 c++ 中 ...

  9. hive新特性reflect函数介绍

    reflect函数可以支持在sql中调用java中的自带函数,秒杀一切udf函数. 使用案例1:所有记录执行相同的java内置函数 hive中建一张表test_udf:column1(int),col ...

随机推荐

  1. nodejs中require的路径是一个文件夹时发生了什么

    node中使用require的时候如果路径是一个文件夹时,或者特殊的情况require('..');require('.'); 这是node实战这本书里说的情况,但是我在node6.9版本中发现不完全 ...

  2. javascript系列-class2.javascript 基本使用

    欢迎加入前端交流群来py: 转载请标明出处!     逻辑运算             一门计算机语言,编程的核心在于逻辑思想,当我们在编写程序的时候,逻辑是否通顺,是能否正确写出程序的关键,可以说如 ...

  3. calender怎么获取每周的周日(给每周的周日特定时间点设置定时)

    获取每周的周日 //如果是周日,特殊处理.老外的周日-周六为一周 calendarTemp.add(Calendar.WEEK_OF_MONTH,1); calendarTemp.set(Calend ...

  4. .net垃圾回收-原理浅析

    本文引自:http://www.cnblogs.com/wilber2013/p/4357910.html 在开发.NET程序过程中,由于CLR中的垃圾回收(garbage collection)机制 ...

  5. Core Java(一)

    一. 绪 1.软件:按照特定顺序组织的计算机数据和指令的集合. 软件开发:借助开发工具与计算机语言制作软件 2.计算机语言:用于人与计算机通讯的语言 分为机器语言,汇编语言,高级语言 高级语言分为编译 ...

  6. Android ViewPager系列之ViewPager一屏显示多个子页面

    ViewPager一屏显示多个子页面,常见的有两种形式: 1.当前展示的页面右侧显示一部分下个页面的内容 2.当前页面居中,左右两边分别显示上一个页面.下一个页面 第 1 种表现形式的实现代码 其实这 ...

  7. 改变GridView中列的宽度

    <asp:TemplateField HeaderText="规格型号" HeaderStyle-Width="24%">

  8. yaml文件结构

    VERSION: 1.0.0.1            --指定控制文件schema的版本DATABASE: db_name           --指定连接数据库的名字,如果没有指定,由环境变量$P ...

  9. ASP调用WebService转化成JSON数据,附json.min.asp

    首先定义SOAP数据,然后创建HTTP对象,然后使用POST提交,获取状态码为200,就说明调用成功,再进行下一步操作…… <!--#Include virtual="/Include ...

  10. 大神js总结

    http://www.cnblogs.com/tylerdonet/p/5543813.html http://www.codesec.net/list/8/