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 旧标准做比较,说明为什 ...
随机推荐
- XMLHttpRequest.withCredentials 解决跨域请求头无Cookie的问题
查看原文 XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者 ...
- nl命令
nl (Number of Lines) 将指定的文件添加行号标注后写到标准输出.如果不指定文件或指定文件为"-" ,程序将从标准输入读取数据. 选项: -b, --body-nu ...
- Nhibernate 使用 (一)
一:介绍 NHibernate 是一个基于.Net 的针对关系型数据库的对象持久化类库.Nhibernate 来源于非常优秀的基于Java的Hibernate 关系型持久化工具.NHibernate ...
- James Munkres Topology: Theorem 20.4
Theorem 20.4 The uniform topology on \(\mathbb{R}^J\) is finer than the product topology and coarser ...
- jsp中静态include和动态include的区别
jsp中静态include和动态include的区别 动态 INCLUDE 用 jsp:include 动作实现 <jsp:include page="included.jsp&quo ...
- Vue自定义标签
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
- SVN服务器搭建及使用
.SVN(全称Subversion)是优秀的版本控制工具,与微软的TFS相比,有如下优势:开源(免费),支持多种操作系统. 本次我搭建的服务器采用:VisualSVN-Server-3.6.1-x64 ...
- react-native android textinput显示不全的问题
出现的问题 如下图 原因 android 输入框默认带有上下内边距 解决 将Textinput元素样式的垂直内边距设置为0 paddingVertical: 0
- (53)Wangdao.com第七天_JavaScript 强制类型转换
其他进制的数字 二进制 以 0b 开头的 Number 八进制 以 0 开头的 Number 十六进制 以 0x 开头的 Number 注意:无论是多少进制的数字,输出都是十进制 强 ...
- amoeba实现读写分离
amoeba的运行环境依靠java的jdk: 下面执行amoeba的安装不走 # mkdir /usr/local/src/amoeba 上传文件:amoeba-mysql-binary-2.2.0. ...