[JavaScript]ECMA-6 箭头函数
概述
箭头函数的作用是为Js提供一种函数的简写方法,箭头函数作用域内不包含this
, arguments
, super
, or new.target,并且不能用于对象的构造函数;
基本语法
[(][params][)] => [(][{]statements[}][)]
- 参数:
参数可有可无,但是无参数的时候必须带括号
() => { statements }
支持Rest parameters 和 default parameters
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
statements }
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); //
- 表达式
表达式方面大致可分为两类;
一类是接圆括号的:
这类表达式只能编写一条语句,不支持分号,下面这个例子是错误的:
var f = () => (a = "1";b = "2";a+b);
同时元括号默认返回这个唯一语句执行后的值,并不需要带return关键值:
var f = () => (a = "abc";);
console.log(f());//abc var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(m => m.length));//8, 6, 7, 9 ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
var f = () => (rest.d);
console.log(f());//40
因为只有一条表达式所以元括号也是可以省略的
var f = () => a = "abc";
console.log(f());//abc
第二类是接大括号的:
这一类跟圆括号的差异就是它可以支持多条表达式,但是需要返回值时,必须接return:
var f = () => {
var a = 1;
var b = 2;
return a+b;
}
console.log(f());//
结论
花式玩法:
var f = ({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}) => ({a: a, b: b, rest: rest});
console.log(f());
Js语法确实是天马行空.
[JavaScript]ECMA-6 箭头函数的更多相关文章
- JavaScript 基础(七) 箭头函数 generator Date JSON
ES6 标准新增了一种新的函数: Arrow Function(箭头函数). x => x *x 上面的箭头相当于: function (x){ return x*x; } 箭头函数相当于匿名函 ...
- JavaScript中的箭头函数
1.定义 箭头函数相当于匿名函数,并且简化了函数定义.箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了.还有一种可以包含多条语句,这时候就不能省略{ ... ...
- javascript 使用 匿名 箭头函数 this的变化
处理html 页面 <body> <div class="main"> <div class="up"> <div c ...
- JavaScript中的普通函数和箭头函数
最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- JS中的普通函数和箭头函数
最近被问到了一个问题: >javaScript 中的箭头函数 (=>) 和普通函数 (function) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答 ...
- [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)
[原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...
- 深入理解JavaScript中的箭头
箭头函数可以使我们的代码更加简洁,如下: var sum = (a,b) => a+b; JavaScript 充满了我们需要编写在其他地方执行的小函数的情况. 例如: arr.forEach( ...
- 轻松学习 JavaScript——第 6 部分:JavaScript 箭头函数
JavaScript箭头函数是ECMAScript 6中引入的编写函数表达式的一种简便方法.通常,在JavaScript中,可以通过两种方式创建函数: 函数语句. 函数表达式. 可以如下所示创建函数语 ...
- 【javascript】箭头函数
ES6标准新增了一种新的函数:Arraw Function(箭头函数). x => x * x 这个函数相当于 function (x){ return x * x; } 题外话:user st ...
- JavaScript学习笔记(十二)——箭头函数(Arrow Function)
在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...
随机推荐
- .netcore 读取ansi编码
public class FileHelper { //根据文件自动觉察编码并输出内容 public static string GetText(string path) { StringBuilde ...
- CSS3基础入门03
CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...
- [BJOI2019]奥术神杖(分数规划,动态规划,AC自动机)
[BJOI2019]奥术神杖(分数规划,动态规划,AC自动机) 题面 洛谷 题解 首先乘法取\(log\)变加法,开\(c\)次根变成除\(c\). 于是问题等价于最大化\(\displaystyle ...
- [mooc]open course on github
来自多位GitHub网友在GitHub分享的几组学习课程项目, 学习课程包含清华,北大,浙大,中科大,上海交大, 等中国多所名校的英语,AI高数,人工智能等课程以及一些讲义考题. 如果你想了解这些大学 ...
- Docker 入门篇
Docker 简介 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 更快速的启动时间 一致的运行环境 持续交付和部署 更轻松的迁移 更轻松的维护和 ...
- ORM表相关操作
一般操作 看专业的官网文档,做专业的程序员! 必知必会13条 > all(): 查询所有结果 > filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 > get( ...
- 大规模使用 Apache Kafka 的20个最佳实践
必读 | 大规模使用 Apache Kafka 的20个最佳实践 配图来源:书籍<深入理解Kafka> Apache Kafka是一款流行的分布式数据流平台,它已经广泛地被诸如New Re ...
- (十三)事件分发器——event()函数,事件过滤
事件分发器——event()函数 事件过滤 事件进入窗口之前被拦截 eventFilter #include "mywidget.h" #include "ui_mywi ...
- (模拟 打好基础)nyoj1363-计划日
1363-计划日 内存限制:256MB 时间限制:3000ms 特判: No通过数:21 提交数:79 难度:1 题目描述: 为什么花那么多时间.精力还是学不好学不通,如何把握各科目的重难点,期中和期 ...
- 对filter的初步认识
Filter 技术是servlet 2.3 新增加的功能.servlet2.3是sun公司 于2000年10月发布的,它的开发者包括许多个人和公司团体,充分体现了sun公司所倡导的代码开放性原则.在 ...