ES6新特性-函数的简写(箭头函数)
通常函数的定义方法
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;
}
附加规则
- 当函数参数只有一个时,括号可以省略;但是没有参数时,括号不可以省略。
- 函数体(中括号)中有且只有一行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新特性-函数的简写(箭头函数)的更多相关文章
- ES6新特性三: Generator(生成器)函数详解
本文实例讲述了ES6新特性三: Generator(生成器)函数.分享给大家供大家参考,具体如下: 1. 简介 ① 理解:可以把它理解成一个函数的内部状态的遍历器,每调用一次,函数的内部状态发生一次改 ...
- ES6新特性(函数默认参数,箭头函数)
ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式: 从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...
- ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring
接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...
- 【转】C++11 标准新特性:Defaulted 和 Deleted 函数
原文链接http://www.ibm.com/developerworks/cn/aix/library/1212_lufang_c11new/ 本文将介绍 C++11 标准的两个新特性:defaul ...
- ES6新特性简介
ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...
- 前端学习笔记 --ES6新特性
前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- 必须掌握的ES6新特性
ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
随机推荐
- WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!问题
➜ web_develop git:(master) ✗ ssh root@172.16.146.143@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ ...
- Apache访问日志记录用户的每一个请求
我们使用的是/usr/local/apache2.4/conf/extra/httpd-vhosts.conf配置文件下的第二段配置,它的日志在/usr/local/apache2.4/logs/下面 ...
- git操作:WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! (警告:远程主机标识已更改!)
问题背景: 前几日,把云服务器系统由centos改成Ubuntu之后,重新搭建的git服务器环境. 问题描述: 从本机不能clone远程git仓库. 报错如下: @@@@@@@@@@@@@@@@@@@ ...
- css常用布局
1.一列布局 html: <div class="header"></div> <div class="body">< ...
- CSS文字溢出处理问题
单行省略 div { white-space:nowrap; //断行处理:无断行 text-overflow:ellipsis; //文字溢出处理:省略号 overflow:hidden; //溢出 ...
- Mouse w/o Borders实现两台主机共用一套键鼠方法及问题处理
因为经常遇到同时用到实验室配备的主机和自己的笔记本同时使用的场景,两台设备需要切换两套键鼠很麻烦,这里介绍一个微软开发的一个免费软件Microsoft Garage Mouse without Bor ...
- JTS相关资料和示例
示例 JTS基本概念和使用 JTS Geometry之间的关系 JTS algorithm package
- Caused by: java.util.concurrent.RejectedExecutionException: Thread pool is EXHAUSTED! Thread Name:
异常引发的问题: 线程模型 如果事件处理的逻辑能迅速完成,并且不会发起新的 IO 请求,⽐如只是在内存中记个标识,则直接在 IO 线程上处理更快,因为减少了线程池调度. 但如果事件处理逻辑较慢,或者需 ...
- 简单的3d变换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- HttpHandler和ashx使用Session 出现未初始化异常
原因: HttpHandler和ashx要实现IRequiresSessionState接口才能访问Session信息 接口IRequiresSessionState: 指定目标 HTTP 处理程序需 ...