聊聊 ES6 中的箭头函数
首先来两点:
- 当只有一个参数的时候,那么 () 可以省略
- 当只有一个 return 的时候,那么 {} 可以省略
- 当函数体内只有一条语句的时候,那么 {} 也可以省略
下面来几个简单的例子来对比 ES6 和 ES5:
ES5:
window.onload = function () {
alert('abc');
}
ES6:
window.onload = () => {
alert('abc');
}
上面这个例子是最普通的,现在让我们传参比较
ES5:
let show = function (a, b) {
alert(a + b);
}
show(2, 3);
ES6:
let show = (a, b) => {
alert(a + b);
}
show(2, 3);
现在我们来验证一下圆括号可以省的请况
let show = a => {
return a * 2;
}
alert(show(12));
运行结果:
看完了圆括号可以省的情况,现在让我们来验证一下花括号可以省的情况
由于上面这个例子只有一个return ,所以我们还是用这个例子来验证
先来一个错误示范吧(这样会出现语法问题)
let show = a => return a * 2;
alert(show(12));
正确示范:
let show = a => a * 2;
alert(show(12));
这样运行就成功了
上一个例子是有返回值的情况
下面来讨论没有返回值的时候:
函数体内只有一条语句(可以运行):
let show = (a, b) => console.log(a + b);
show(1, 2);
当函数体内有多条语句(现在不加花括号):
let show = (a, b) => a = a.toString(); b = b.toString(); console.log(a + b);
show(1, 2);
运行结果:
这样的话,b = b.toString(); 和 console.log(a + b); 就不是函数体内的语句了,而是 全局代码,所以会显示b 没有定义.
所以有多条语句时,要加 画括号
正确示范(正常运行):
let show = (a, b) => {a = a.toString(); b = b.toString(); console.log(a + b)};
show(1, 2);// => 3
聊聊 ES6 中的箭头函数的更多相关文章
- ES6中的箭头函数
关于函数表达式中的this:自动引用正在调用当前方法的.前的对象1.obj.fun()中的this fun中的this -> obj2.new Fun() Fun中的this -> 正在创 ...
- ES6中的箭头函数与普通函数的区别
箭头函数与普通函数的区别 1.语法上更加简洁.清晰 基本语法: // 关于箭头函数的参数 // 如果箭头函数没有参数,直接写一个括号即可 let fun1 = () => { console.l ...
- ES6中的箭头函数和普通函数有什么区别?
1.普通函数中的this总是指向调用它的那个对象, 箭头函数没有自己的this,他的this永远指向其定义环境,任何方法都改变不了其指向,如call().bind().apply().(正是因为它没有 ...
- JS ES6中的箭头函数(Arrow Functions)使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- es6中的(=>)箭头函数
x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义. 箭头函数有两种格式,一种像上面的,只包含 ...
- ES6中的箭头函数的语法、指向、不定参数
箭头函数的语法 function fn1() { console.log(1); } let fn2 = () => { console.log(2); } fn1()//1 fn2()//2 ...
- ES6中的Generator函数
今天小编发现一个es6中的新概念,同时也接触到了一个新关键字yeild,下面我就简单和大家聊聊es6中的generator函数.大家还可以关注我的微信公众号,蜗牛全栈. 一.函数声明:在functio ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- ES6学习之箭头函数
ES6学习笔记--箭头函数 箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结. 箭头函数长这个样子: let fn = a => a++; // fn 是函数名, a= ...
随机推荐
- 欢迎来到地狱 WriteUp(2019暑假CTF第一周misc)
目录 0707,0708,0709 题目地址:欢迎来到地狱 1.地狱伊始.jpg 1.5地狱之声.wav 2.第二层地狱.docx 3.快到终点了.zip 参考 0707,0708,0709 题目地址 ...
- Thinking In SE
各种编程范式的区别 并发模型 并行架构: 位级(bit-level)并行 指令级(instruction-level)并行 数据级(data)并行 数据级并行 任务级(task-level)并行 -- ...
- em,rem,px的区别,以及实现原理?
px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.em是相对长度单位.相对于当前对象内文本的字体尺寸举个例子:比如说当前容器`font-size:16px;`则`1em`就 ...
- Java基础 switch 简单示例
JDK :OpenJDK-11 OS :CentOS 7.6.1810 IDE :Eclipse 2019‑03 typesetting :Markdown code ...
- Oracle系列一 SQL语句基本概念和学习准备
DML: Data Manipulation Language 数据操纵语言DDL: Data Definition Language 数据定义语言DCL: Data Control Langua ...
- Cache管理机制(System.Web.Caching)
一,System .Web.Caching与缓存工作机制简介 System.Web.Caching是用来管理缓存的命名空间,其父级空间是System.Web,由此可见,缓存通常用于Web网站的开发,包 ...
- Spring cloud微服务安全实战-7-10ELK日志采集架构优化
ELK搭建起来.采集日志,展示.但是这个架构还有一些问题. 可用性的问题,springboot的应用,随着业务的增长会越来越多.logstash压力就会越来越大.大到一定的程度可能就会吧logstas ...
- AES的256位密钥加解密报 java.security.InvalidKeyException: Illegal key size or default parameters 异常的处理及处理工具
一.出现的现象为了数据代码在传输过程中的安全,很多时候我们都会将要传输的数据进行加密,然后等对方拿到后再解密使用.我们在使用AES加解密的时候,在遇到128位密钥加解密的时候,没有进行什么特殊处理:然 ...
- 调用k8s api遇到CERTIFICATE_VERIFY_FAILED的问题解决方法
前言 python3.5.6版本,django1.1.12版本 最近要调用k8s接口,k8s接口的使用方法请参考官网的说明:戳我 调用k8s接口时,遇到 CERTIFICATE_VERIFY_FAIL ...
- iOS - 点击按钮实现简单的复制功能
UIPasteboard使用 基本使用: - (void)copyClick { UIPasteboard *pab = [UIPasteboard generalPasteboard]; pab.s ...