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. 26.boost文件库

    #define _CRT_SECURE_NO_WARNINGS #include <boost/filesystem/operations.hpp> #include <boost/ ...

  2. Array数组的排序与二分查字法

    import java.util.Arrays; public class sort { public static void main(String[] args) { // TODO 自动生成的方 ...

  3. Ubantu 14.04下安装高版本cmake

    Ubantu14.04 下自带的cmake版本比较低(默认为2.8),这里我们从源码编译高版本cmake: 先卸载电脑上安装的cmake (如何已安装的话): sudo apt-get autorem ...

  4. RelativeLayout.addRule()方法

    RelativeLayout.addRule()方法 通过LayoutParams的 addRule方法来额外的添加别的规则了,android.widget.RelativeLayout.Layout ...

  5. Swift 4.0:访问级别(访问控制)

    基础篇 注: 下文中所提及的类和类型为Class, Enum和Struct Swift中的访问级别有以下五种: open: 公开权限, 最高的权限, 可以被其他模块访问, 继承及复写. public: ...

  6. ActiveMQ学习笔记(11)----ActiveMQ的动态网络连接

    1. 多播协议multicast ActiveMQ使用Multicast协议将一个Service和其他的Broker是我Service里连接起来.IP Multicast是一个被用于网络中传输数据到其 ...

  7. 3ds Max 2018 在安装后无法启动或出现不稳定

    问题: 安装 3ds Max 2018 后,软件无法正常启动,或在打开后不久出现不稳定和崩溃. 原因: 有多种原因可能会导致这些错误: ▪ 3ds Max.Windows 更新和 ProSound.d ...

  8. Ini配置文件操作

    package cn.com.szhtkj.util; import java.io.File; import java.io.FileOutputStream; import java.io.IOE ...

  9. js得到区域长宽

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  10. wepy框架的API的预加载$preload这功能阔以喔

    优势:比 url 传递.或是 storage .或是 globalData 更方便 1:如 url 不能直接传一个 Object 要传的又要序列化与反序列化操作,麻烦(普通的单个变量还是挺便捷简单实在 ...