通常函数的定义方法

var fn = function(...){
......
}
//例如:
var add = function(a,b){
return a+b;
} //或者:
function fn(...){
......
}
//例如:
function add(a,b){
return a+b;
}

简写方法速记

将原函数的“function”关键字和函数名都删掉,并使用“=>”连接参数列表和函数体。

function add(a,b){
return a+b;
}
//简写为:
(a,b)=>{//删掉了function和函数名
return a+b;
} var add = function(a,b){
return a+b;
}
//简写为:
var add = (a,b)=>{ //删掉了function
return a+b;
}

附加规则

  1. 当函数参数只有一个时,括号可以省略;但是没有参数时,括号不可以省略。
  2. 函数体(中括号)中有且只有一行return语句时,中括号及return 关键字可以省略。

新旧函数定义的对比

无参数函数

let fn = function(){
return 'helloWorld';
} //简写为:
let fn = ()=>{//但是没有参数时,括号不可以省略
return 'helloWorld';
}
//根据规则二,简写为:
let fn = ()=>'helloWorld';

一个参数的函数

let fn = function(a){
return a;
} //简写为:
let fn = (a)=>{
return a;
}
//根据规则一,还可以简写为:
let fn = a=>{
return a;
}
//根据规则二,还可以简写为:
let fn = a=>a;

多个参数的函数

let fn = function(a,b){
return a+b;
}
//简写为:
let fn = (a,b)=>{//多于一个参数,圆括号不可省略
return a+b;
}
//根据规则二,还可以简写为:
let fn = (a,b)=>a+b;

函数体代码多于一行

let fn = function(){
console.log('hello');
console.log('world');
return 'helloWorld';
}
//简写为:
let fn = ()=>{
console.log('hello');
console.log('world');
return 'helloWorld';
}

函数返回json对象时

let fn = function(){
return {"a":5};
} //简写为:
//let fn = ()=>{"a":5};这是错误的
//应简写为:
let fn = ()=>({"a":5});//注意{}外的圆括号。

实例

//排序方法1
let arr = [3,6,2,1];
let arr2 = arr.sort(function(a,b){
return a-b;
});
alert(arr2); //排序方法2
let arr3 = [939,23,0,-1,94];
let arr4 = arr3.sort((a,b)=>a-b);
alert(arr4);

ES6新特性-函数的简写(箭头函数)的更多相关文章

  1. ES6新特性三: Generator(生成器)函数详解

    本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...

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

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

  3. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  4. 【转】C++11 标准新特性:Defaulted 和 Deleted 函数

    原文链接http://www.ibm.com/developerworks/cn/aix/library/1212_lufang_c11new/ 本文将介绍 C++11 标准的两个新特性:defaul ...

  5. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  6. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  7. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  8. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  9. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

  10. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

随机推荐

  1. Niagara workbench (Basic )

    1.the basic information about workbench Last saved  station open in the workbench or opened  another ...

  2. postgre dinstinct on()的使用

    意思是DISTINCT ON ( expression [, …] )把记录根据[, …]的值进行分组,分组之后仅返回每一组的第一行. 需要注意的是,如果你不指定ORDER BY子句,返回的第一条的不 ...

  3. echart 标题配置

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. docker 搭建以太坊私有链搭建

    最近区块链,火得不行,身边也有朋友准备玩这个,说是搭了一个星期,没有把环境搭建起来,叫我帮忙看看环境怎么搭建 于是我找到了官方的地址 https://github.com/ethereum/go-et ...

  5. Spring AOP概念理解

    1.我所知道的aop 初看aop,上来就是一大堆术语,而且还有个拉风的名字,面向切面编程,都说是OOP的一种有益补充等等.一下子让你不知所措,心想着:怪不得很多人都和我说aop多难多难.当我看进去以后 ...

  6. numpy的索引-【老鱼学numpy】

    简单的索引值 import numpy as np a = np.arange(3, 15).reshape(3, 4) print("a=") print(a) print(&q ...

  7. numpy array分割-【老鱼学numpy】

    有合并,就有分割. 本节主要讲述如何通过numpy对数组进行横向/纵向分割. 横向/纵向分割数组 首先创建一个6行4列的数组,然后我们对此数组按照横向进行切割,分成3块,这样每块应该有2行,见例子: ...

  8. pandas处理丢失数据-【老鱼学pandas】

    假设我们的数据集中有缺失值,该如何进行处理呢? 丢弃缺失值的行或列 首先我们定义了数据集的缺失值: import pandas as pd import numpy as np dates = pd. ...

  9. ionic2自定义radio样式

    刚开始以为用的是字体图标,结果翻了代码一看竟然是通过纯css实现的,图标模式用的是ios,代码如下: .radio-ios .radio-checked { margin:; border-radiu ...

  10. eclipse安装Spring的具体步骤

    1.下载spring 官网下载需要jar包放在lib中 本人分享百度云jar 链接:https://pan.baidu.com/s/1iEMwBbTTCxuCNOEdprlGhg 提取码:e7tg 2 ...