ES6学习之箭头函数
ES6学习笔记--箭头函数
箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结.
箭头函数长这个样子:
let fn = a => a++; // fn 是函数名, a=>a*a 是函数体
这个函数就类似于:
let fn = function (a) {
return a++;
}
上面的实例就是一个参数的情况,当然也可以没有参数,或者有多个参数
没有参数
// 示例1
let fn = () => 2 + 3;
// 相当于
let fn = function() {
return 2 + 3;
}
//=========我是分割线===========
// 示例2
let fn1 = () => console.log('Hello World!');
// 相当于
let fn1 = function() {
console.log('Hello World!');
}
两个及以上参数
// 示例1
let fn1 = (a, b) => a + b;
// 相当于
let fn1 = function(a, b) {
return a + b;
};
//=========我是分割线===========
// 示例2
let fn2 = (a, b, ...rest) => {
let i, sum = a + b;
for( i = 0; i < rest.length; i++ ){
sum += rest[i];
}
return sum;
}
// 相当于
let fn2 = function(a, b,...rest) {
let i, sum = a + b;
for( i = 0; i < rest.length; i++ ){
sum += rest[i];
}
return sum;
}
说明: 上面的示例2,因为箭头右侧的函数代码块不止一条语句,所以要使用
{ }
(大括号) 包起来,如果需要接收函数的执行结果,则需使用 return 返回,比如下面的情况
let fn = (a, b) => { a + b };
控制台输出:
没有 return ,所有没有返回值
一种特殊情况
由于大括号会被解释为代码块,所以在使用箭头函数时,如果要返回一个对象,则 必须
把这个对象用 ()
包裹起来.
// 错误代码
let fn1 = (a, b) => {
name: a,
age: b
}
console.log(fn1('Jack', 20));
这个是会报错的,正确的应该这样
// 正确的写法
let fn1 = (a, b) => (
{
name: a,
age: b
}
)
箭头函数可以与变量结构结合使用
let personInfo = {
firstname: 'chen',
lastname: 'huigong'
}
let person = ({ firstname, lastname }) => firstname + ' ' + lastname;
console.log(person(personInfo));
// 相当于
let person = function(person) {
return person.firstname + ' ' + person.lastname;
}
console.log(personInfo);
一些注意点
箭头函数在使用的时候有一些注意点.
- 函数体内的 this 对象, 指的是定义时的对象,而不是使用时所在的对象
箭头函数看上去是匿名函数的简写,但是箭头函数和匿名函数有一个特别明显的区别: 箭头函数内部的 this 是词法作用域,由上下文确定,看下面的代码
let person = {
birthday: 1990,
getAge: function() {
let b = this.birthday; // 1990
let fn = function() {
return new Date().getFullYear() - this.birthday; // this 现在指向 window 或 undefined
};
return fn();
}
}
person.getAge(); // NaN
此时,由于fn
里面的 this 不指向 person 自身,所以执行 person.getAge()
就会出现问题
使用箭头函数就解决了这个问题
let person = {
birthday: 1990,
getAge: function() {
let b = this.birthday; // 1990
let fn = () => new Date().getFullYear() - this.birthday; // this 指向 person 对象
return fn();
}
}
person.getAge(); // 27
使用了箭头函数,则以前的 hack 写法就不需要了
let _this = this;
this
指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this
,导致内部的this就是外层代码块
的this.正是因为它没有this,所以也就不能用作构造函数
.
箭头函数是不可以当做
构造函数
的,也就是说,不可以使用new
命令,否则会抛出错误.不可以使用
arguments
对象,该对象在函数体内是不存在的.如果要使用,可以用rest
参数代替.不可以使用
yield
命令,因此箭头函数不能用作Generator
函数.
其他的一些问题
除了this,以下三个变量在箭头函数中也是不存在的,指向外层函数的对应变量: arguments
, super
, new.target
.
function foo() {
setTimeout(() => {
console.log('args:', arguments);
}, 100 )
}
foo(2, 4, 6, 8); // args: [2, 4, 6, 8]
上面代码中,箭头函数内部的变量
arguments
,其实是函数foo
的arguments
变量.另外,由于箭头函数没有自己的this
,所以当然也就不能用call()
、apply()
、bind()
这些方法去改变this的指向.
ES6学习之箭头函数的更多相关文章
- es6学习笔记--箭头函数
基本用法 ES6允许使用“箭头”(=>)定义函数. var f = v => v; 上面的箭头函数等同于: var f = function(v) { return v; }; 如果箭头函 ...
- [js高手之路] es6系列教程 - 箭头函数详解
箭头函数是es6新增的非常有意思的特性,初次写起来,可能会觉得别扭,习惯之后,会发现很精简. 什么是箭头函数? 箭头函数是一种使用箭头( => )定义函数的新语法, 主要有以下特性: 不能通过n ...
- es6学习笔记-async函数
1 前情摘要 前段时间时间进行项目开发,需求安排不是很合理,导致一直高强度的加班工作,这一个月不是常说的996,简直是936,还好熬过来了.在此期间不是刚学会了es6的promise,在项目有用到pr ...
- ES6系列之箭头函数
本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- ES6学习笔记(函数)
1.函数参数的默认值 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log(' ...
- JS ES6中的箭头函数(Arrow Functions)使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 基础语法 (参数1, 参数2, …, 参数N) => ...
- ES6学习笔记(6)----函数的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 函数的扩展 函数的默认值 : ES6可以为函数指定默认值 (1)指定默认值的两种方式 a.函数参 ...
- codewars--js--Reverse or rotate?----es6变量,箭头函数,正则取块
问题描述: 对输入的str按照sz个数进行分块,若一块内所有数字的立方和是偶数,则倒序:否则,向左移动一位.然后将修改过的块整合到一个字符串,作为输出. The input is a string s ...
随机推荐
- [国家集训队2010]小Z的袜子
★★★ 输入文件:hose.in 输出文件:hose.out 简单对比 时间限制:1 s 内存限制:512 MB [题目描述] 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜 ...
- 这个贴子的内容值得好好学习--实例详解Django的 select_related 和 prefetch_related 函数对 QuerySet 查询的优化
感觉要DJANGO用得好,ORM必须要学好,不管理是内置的,还是第三方的ORM. 最最后还是要到SQL.....:( 这一关,慢慢练啦.. 实例详解Django的 select_related 和 p ...
- [codevs 1961]躲避大龙(dfs)
题目:http://dev.codevs.cn/problem/1961/ 分析: 被“SPFA”的标签骗了…… 看了hzwer的博客才知道可以用f[i][0..60]表示每个点每个秒是否可以到.至于 ...
- @Autowired中无法注入RestTemplate的问题
1.在启动类中添加 @Beanpublic RestTemplate restTemplate(){ return new RestTemplate();} 即可解决无法注入RestTemplate的 ...
- java String长度与varchar长度匹配理解(字符和字节长度理解)
java String长度与varchar长度匹配理解(字符和字节长度理解) string中的length()长度,返回的是char的数量,每个char可以存储世界上任何类型的文字和字符,一个char ...
- [Vue @Component] Place Content in Components with Vue Slots
Vue's slots enable you to define where content of a component should land when you define the conten ...
- 如何使用PHP显示在线Word文档
在线生成FlashPaper文档 1 安装 FlashPaper2,最好下载绿色版的FlashPaper软件,如下所示,先点击初始化.bat即开始绿化,然后双击"FlashPrinter.e ...
- LeetCode 970. Powerful Integers (强整数)
题目标签:HashMap 题目让我们找出所有独一的powerful integers 小于bound的情况下. 把 x^i 看作 a:把 y^j 看作b, 代入for loop,把所有的情况都遍历一遍 ...
- 5分钟APIG实战: 使用Rust语言快速构建API能力开放
序言:Rust语言简介 参与过C/C++大型项目的同学可能都经历过因为Null Pointer.Memory Leak等问题“被” 加班了不知道多少个晚上.别沮丧,你不是一个人,Mozilla Fir ...
- linux下的epoll怎样高效处理百万连接
开发高性能网络程序时.windows开发人员们言必称iocp,linux开发人员们则言必称epoll.大家都明确epoll是一种IO多路复用技术,能够很高效的处理数以百万计的socket句柄,比起曾经 ...