javascript es6 箭头函数 简介
基本用法
ES6 允许使用“箭头”(=>)定义函数。
var f = v => v;
上面的箭头函数等同于:
var f = function (v) {return v;}
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。
var f = () => 5;//等价于var f = function () {return 5;};var sum = (num1, num2) => num1 + num2;//等价于var sum = function (num1, num2) {return num1 + num2;}
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => {return num1 + num2};
由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。
//不报错var getTmpItem = id => ({id: id, name: 'Tmp'})//报错var getTmpItem = id => {id: id, name: 'Tmp'};
如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。
let fn = () => void doesNotReturn();
箭头函数可以与变量解构结合使用。
const full = ({first, last}) => first + ' ' + last;//等价于const full = function (person) {return person.first + ' ' + person.last;}
箭头函数使得表达更加简洁。
const isEven = n => n % 2 === 0;const square = n => n * n;
上面代码只用了两行,就定义了两个简单的工具函数。如果不用箭头函数,可能就要占用多行,而且还不如现在这样写醒目。
箭头函数的一个用处是简化回调函数。
//正常函数写法[1, 2, 3].map(function (x) {return x * x;});//箭头函数写法[1, 2, 3].map(x => x * x);
另一个例子是
//正常函数写法var result = values.sort(function (a, b) {return a - b;});//箭头函数写法var result = values.sort((a, b) => a - b)
下面是 rest 参数与箭头函数结合的例子。
const numbers = (...nums) => nums;numbers(1,2,3,4,5); //[1,2,3,4,5]const headAndTail = (head,...tail) => [head,tail];headAndTail(1,2,3,4,5); //[1,[2,3,4,5]]
使用注意点
(1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。
(4)不可以使用yield命令,因此箭头函数不能用作Generator函数。
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。正是因为它没有this,所以也就不能用作构造函数。
箭头函数的this
a.箭头函数没有自己的this,其内部的this绑定到它的外围作用域。对象内部的箭头函数若有this,则指向对象的外围作用域。
window.color = "red";
//let 声明的全局变量不具有全局属性,即不能用window.访问
let color = "green";
let obj = {color: "blue",getColor: () => {return this.color;//this指向window}
};
let sayColor = () => {return this.color;//this指向window
};
obj.getColor();//red
sayColor();//red
b.箭头函数无法使用call()或apply()来改变其运行的作用域。
window.color = "red";
let color = "green";
let obj = {color: "blue"
};
let sayColor = () => {return this.color;
};
sayColor.apply(obj);//red
javascript es6 箭头函数 简介相关推荐
- Javascript/ES6箭头函数
Javascript/ES6箭头函数 文章目录 Javascript/ES6箭头函数 一.箭头函数是什么? 二.箭头函数与普通函数的区别 三.箭头函数的使用 1.箭头函数是匿名函数,不能作为构造函数, ...
- JavaScript ES6箭头函数指南
前言 胖箭头函数(Fat arrow functions),又称箭头函数,是一个来自ECMAScript 2015(又称ES6)的全新特性.有传闻说,箭头函数的语法=>,是受到了CoffeeSc ...
- 学习笔记 JavaScript ES6 箭头函数
学习内容: this指向定义时所在的对象,而不是调用时所在的对象 不可以当作构造函数 不可以使用arguments对象 1.this指向定义时所在的对象,而不是调用时所在的对象 先来回顾一下ES5当中 ...
- es6 箭头函数使用_如何使用ES6箭头功能使JavaScript易于阅读
es6 箭头函数使用 Arrow functions are the new fundamental building blocks of building modern web applicatio ...
- [OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=)
[OHIF-Viewers]医疗数字阅片-医学影像-ES6箭头函数(=>) https://www.liaoxuefeng.com/wiki/1022910821149312/103154957 ...
- javascript的箭头函数
javascript的箭头函数 箭头函数的定义 箭头函数(Arrow Function):ES6标准中新增的函数,叫箭头函数的原因是因为它使用了 ' => ' 来进行标识 箭头函数的基础语法 通 ...
- ES6箭头函数中的this指向
1箭头函数中的this (1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this (2)箭头函数中的this指向 :访问上一个作用域的thi ...
- es6 箭头函数 rest参数 扩展运算符
Es6 箭头函数 语法: 普通函数: fn=function(){} 箭头函数: fn=()=>{} 特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call ...
- es6箭头函数_【知识点】ES6箭头函数、箭头函数与普通函数的区别
作者:長安曹公子 文章出处:ES6 - 箭头函数.箭头函数与普通函数的区别 一.基本语法 ES6中允许使用箭头=>来定义箭头函数,具体语法,我们来看一个简单的例子: // 箭头函数 let fu ...
最新文章
- 《数据虚拟化:商务智能系统的数据架构与管理》一 1.11 数据集成的其他方式...
- recv java_用于TCP套接字编程的Recv函数
- jvm执行引擎全解,java解释器即时编译器,全都讲明白
- 在数据仓储的情况下进一步封装数据库基础操作,此版本为异步版本
- 自动装箱自动拆箱java,自动装箱?拆箱?==问题?详解java面试常见的一个问题...
- vscode标记_高效扩展工具让 VS Code 如虎添翼
- ListT.Find用法学习
- Python使用BeautifulSoup爬取网页中主体部分的内容,并导出为pdf格式
- leetcode[94]Binary Tree Inorder Traversal
- Python模拟智能开关设备MQTT接入阿里云物联网平台 - PyCharm paho.mqtt
- 风起云涌、战火通明,2019 年云计算大盘点
- 【Nginx】上传文件的大小限制
- windows开启远程桌面命令
- 「Font」- 设置 Fallback 字体(如果字体 A 中不存在某个字符,则从字体 B 中加载该字符) @20210212
- 水经注万能地图下载器下载的瓦片如何应用到web端的cesium中
- 大数据、智慧城市与智慧交通 (全集)
- 凯文 米特尼克_凯文·米特尼克总结
- NXP iMX8 ARM平台Distro Boot使用
- 简单文本分割器V1.0发布(包括源码)
- 《30而已》烂尾,如果这样卖空山茶,顾佳会逆袭