ES6 箭头函数理解
来源:互联网 发布:生产流程优化的阶段 编辑:程序博客网 时间:2024/05/21 05:18
你看懂“箭头函数”了么?
ES6 允许使用“箭头”(=>)定义函数。如果了解 Java 的 Lambda 表达式,回过头来理解 ES6 的箭头函数,就非常好理解了。
参考之前分享的《 Java8 特性详解(一) Lambda 》的讲解流程,我们在看下 ES6 的内容吧。
从改造开始
首先,我们从一个例子开始,在 ES5 中,我们一般是这么书写的。
var sum1 = function(num1, num2) { return num1 + num2;};
那么,改造成箭头函数,它是什么样子呢?
var sum2 = (num1, num2) => { return num1 + num2;};
小括号内的参数列表和花括号内的代码被 => 分隔开了。这个就是箭头函数的魅力,箭头函数使得表达更加简洁,从而简化了我们的代码。
如果一个表达式的代码块, 只是 return 后面跟一个表达式,那么还可以进一步简化。
var sum3 = (num1, num2) => num1 + num2;
如果某个方法只含有一个参数。
console.info("=> ES5 写法");var curf1 = function(v) { return v;};
我们甚至可以省略小括号。
console.info("=> ES6 写法");var curf2 = v => v;
如果某个方法没有参数。
console.info("=> ES5 写法");var f1 = function() { return "梁桂钊";};
我们仍可以提供一对空的小括号,如同不含参数的方法。
console.info("=> ES6 写法");var f2 = () => "梁桂钊";
这里,补充一个例外,如果箭头函数直接返回一个对象,必须在对象外面加上括号。
console.info("=> ES5 写法");var f3 = function() { return { real_name: "梁桂钊", nick_name: "LiangGzone" }};console.log(f3());console.info("=> ES6 写法");var f4 = () => ({real_name: "梁桂钊",nick_name: "LiangGzone"});console.log(f4());
关于解构
我们还可以使用到 ES6 解构赋值特性。ES5 写法,之前是这样的。
var f5 = function(person) { return person.first + ' ' + person.last;}
使用到 ES6 解构赋值特性后,就更加好理解了。
const f6 = ({ first, last }) => first + ' ' + last;
说说案例
列举两个摘自阮一峰的《ECMAScript 6 入门》的案例。
回调函数
我们经常使用回调函数,之前的常规的做法。
console.info("=> ES5 写法");var x1 = [1,2,3].map(function (x) { return x * x;});console.info(x1);
那么,现在我们可以进行改造。
console.info("=> ES6 写法");var x2 = [1,2,3].map(x => x * x);console.info(x2);
rest参数结合
没有使用箭头函数,之前,我们的代码可能长这样子。
console.info("=> ES5 写法");var x3 = function(...nums){ return nums;}console.info(x3(512, 1024));
那么,现在我们可以进行改造。
console.info("=> ES6 写法");var x4 = (...nums) => nums;console.info(x4(512, 1024));
阅读全文
0 0
- ES6 箭头函数理解
- 深入理解ES6箭头函数中的this
- 深入理解ES6箭头函数的this
- ES6 中的箭头函数
- ES6 箭头函数 柯里化
- ES6箭头函数=>
- es6箭头函数
- ES6箭头函数
- ES6箭头函数小结
- es6箭头函数
- ES6 箭头函数
- es6的箭头函数
- es6箭头函数
- es6箭头函数
- 浅谈ES6箭头函数
- es6箭头函数
- es6之箭头函数
- ES6中的箭头函数
- 在php中如何实现cookie即时生效,不用刷新就可以使用
- 常用数字滤波算法
- 利率计算
- 《UNIX网络编程 卷1》 笔记: 使用select函数的单进程TCP回射服务器程序
- 【JavaWeb-28】Maven仓库、目录结构、命令和生命周期、添加jar包和插件
- ES6 箭头函数理解
- ObjectARX编程(七) -------符号表操作的总结
- 水池数目
- Qt中的读写锁
- swiper点击分页器后图片就不能轮播了
- mysql、nginx、php-fpm、php配置优化
- mybatis传参数
- org.jivesoftware.smack_2.2.1的api
- 收藏:优秀的个人博客