聊聊 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= ...
随机推荐
- Jmeter命令行运行配置环境变量
Jmeter命令行运行配置环境变量 在打开jmeter GUI界面时会弹出cmd命令窗口提示:压测时不要用GUI,要用命令行 在cmd命令行里面运行jmeter的话,需要配置jmeter环境变量,下面 ...
- PHP系列 | PHP5.6 安装 endroid/qr-code 遇到的问题
官方库地址:https://packagist.org/packages/endroid/qr-code PHP5.6 的最高版本为:2.5.1 通过composer安装 composer requi ...
- js写评价的星星
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ouqi_qiou/article/det ...
- tomcat请求响应代码分享
NioEndpoint的Poller轮询器持续进行扫描是否有新的event()方法调用后产生新的event配置. 发现后执行AbstractProtocol.class中的process()方法进行处 ...
- 案例:使用BeautifuSoup4的爬虫
使用BeautifuSoup4解析器,将招聘网页上的招聘单位名称存储出来.其他信息可类似爬取即可 # -*- coding:utf-8 -*- from bs4 import BeautifulSou ...
- 使用命令行操控vmware--安装
在虚拟化出现之前,服务器的使用率很低,一般只有15%-20%,其余的资源处于闲置状态,但vmware出现之后,首先,可以充分的利用资源,从而达到节约成本的目的,其次,使得虚机便于维护.一般小型公司使用 ...
- 【C/C++开发】C++实现字符串替换的两种方法
替换字符串replace() erase() //C++ 第一种替换字符串的方法用replace()|C++ 第二种替换字符串的方法用erase()和insert()[ C++string|C++ r ...
- 如何用Docker部署Spring Boot项目
1.idea中安装docker插件: 2.新建DockerFile,内容如下. # 基础镜像使用java FROM java:8 # 作者 MAINTAINER vic <test@163.co ...
- 面试之哈希表leetcode
1 案例1 leetcode-----242 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词. 示例 1: 输入: s = "anagram", t ...
- 解决ViewPager与百度地图滑动冲突
一.问题描述 ViewPager中嵌套百度地图的时候会出现百度地图滑动冲突. 二.期望结果: 滑动地图的时候只有地图滑动,滑动其他区域可以切换viewpager. 三.解决方法 自定义viewpage ...