ES6学习(五) -- 箭头函数

作用

函数目的指向性更强，可读性更好，简化代码，提升开发效率

特点

不用写function关键字；
只能作为函数使用不能new，没有原型；
参数不能重复命名；
返回值可以不写return，但有时需要配合{}；
内部arguments this由定义时外围最接近一层的非箭头函数的arguments和this决定其值；

使用

常规使用

var sum = (a, b) => {return a + b;
}console.log(sum(10, 20)) // 输出 30
复制代码

不写return

var sum = (a, b) => {a + b;
}console.log(sum(10, 20)) // 输出 undefind
复制代码

不写return且返回正常值

var sum = (a, b) => a + b;
console.log(sum(10, 20)) // 输出 30
复制代码

箭头函数和对象

当想用箭头函数将参数返回一个对象时

let sum = (a, b) => {a: a,b: b
}
console.log(sum(10, 20))
复制代码

会发现报错了，但如果返回数组就不会报错，这是因为对象的{}被识别为function() {}中的大括号。所以若想使用箭头函数返回对象，可以使用圆括号：

let sum = (a, b) => ({a: a,b: b
})
console.log(sum(10, 20)); // 输出 {a: 10, b: 20}
复制代码

扩展小练习

function sum (x) {return function (y) {return function(z) {return x + y + z;}}
}
var sum1 = sum(1);
var sum2 = sum1(2);
console.log(sum2(3)); // 输出6
复制代码

函数sum可读性差，繁琐易错，使用箭头函数怎么写呢？

第一步，将所有function换成=>

let sum = (x) => {return (y) => {return (z) => {x + y + z;}}
}
复制代码

第二步，去掉return

let sum = (x) => (y) => (z) => x + y + z;
复制代码

第三部，当箭头函数只有一个参数的时候，参数的括号可以去掉

let sum = x => y => z => x + y + z;
console.log(sum(1)(2)(3)); // 输出6
复制代码

注意事项

箭头函数的参数不可以是相同的变量

var sum1 = function (a, a) {console.log(a)
}
复制代码

不报错。

let sum = (x, x) => {console.log(x)
}
复制代码

报错：

未完待续

转载于:https://juejin.im/post/5d1db16b6fb9a07ea9448db0

ES6学习(五) -- 箭头函数相关推荐

ES6学习（箭头函数详解）
箭头函数(Arrow Function) 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名 ...
北妈每日一学：ES6语法之箭头函数（附免费学习资料）
北妈每日一学 <北妈每日一学> 北妈每日一学用最短的篇幅 ,最好的排版,最简洁的例子和大家一起学习.总结.入坑. 今天来学风靡网络的- es6箭头函数 ES6 简介 ECMAScript ...
ES6特性：箭头函数转换，闭包
箭头函数转换箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象. // ES6写法 var handler = {id: "123456",init: fu ...
JS ES6中的箭头函数（Arrow Functions）使用
转载这篇ES6的箭头函数方便自己查阅. ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法基础语法 (参数1, 参数2, -, ...
ES6函数相关包含箭头函数
转载地址:https://es6.ruanyifeng.com/?search=%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0&x=0&y=0#docs/fu ...
ES6 浅谈箭头函数，双冒号符号
1.箭头函数 ES6 允许使用"箭头"(=>)定义函数. var cat= function (name) { return "tom";}; va ...
撤底理解es6中的箭头函数
本质上是一个函数,是function 是一个被编译层加工过的函数用 babel 编译一下箭头函数看看,如下 //es6 const a = ()=>{ console.log(this) } ...
ES6新语法--箭头函数
箭头函数 /*** 箭头函数:实质就是一个函数固定格式的简写* * 简写的规则* function 改为 => =>读为goesto* 如果只有一个形参,可以省略形参小括号;* 如果有0个 ...
es6 初级之箭头函数
1.先看一个例子: 1 <script> 2 function show() { 3 console.log('aluoha'); 4 } 5 show(); 6 </script& ...