这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战
前文学到 JavaScript 的关于数值存储的一个小 "bug", 今天继续来学习 JavaScript 中的神奇现象.
JavaScript 并不完美~ 但并不影响它运行起来, 并被广泛使用运行在浏览器中.
来看看一些 JavaScript 中的神奇之处:
JavaScript 迷之神奇--箭头函数和表达式
在 JavaScript这普通函数可以使用关键字 function 来声明, 而在ES6之后就可以使用箭头函数的方便书写方法了:
// 使用书写语法:
let arrowFn = (args) => {
let { arg1, arg2...} = args
// ... 具体逻辑操作
}
下面来看下官方定义:
箭头函数 + 表达式
官方文档: 箭头函数 | MDN :
箭头函数表达式 的语法比 函数表达式 更简洁,并且没有自己的
this,arguments,super或new.target。 箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。
先来下下面的代码输出是什么?
// 这里注意箭头 后面跟的括号类型, 则会解析成不同结果
((name) => [ name ])('小阿天') /// ['小阿天']
((name) => { name })('小阿天')
根据第一行, 箭头函数返回一个数组, 数组元素为传入的参数: name. 那么我们推测第二行应该返回一个对象(这里对象的属性和属性值相同, 简写 name 省略了): { name: '小阿天' }
[答案]: Chrome 控制台真实返回什么??来看看答案吧!
第二行返回 undefined, 这是因为花括号({} )里面的代码被解析为一系列语句,
第二行的 name 被认为是一个标签,而非对象字面量的组成部分。
记住用
params => {object:literal}这种简单的语法返回对象字面量是行不通的。
就如上面第二行一样, 如果要返回一个对象, 可以使用() 括起来:
/// 使用加括号的函数体返回对象字面量表达式:
params => ({name: '小阿天'})
((name) => ({ name }))('小阿天') /// { name: '小阿天' }
这样就可以了.
箭头函数递归
因为箭头函数式没有"名字"的, 可以将箭头函数赋值给一个变量来调用:
const arrRec = (x) => ( x == 0 ? 1 : x * arrRec(x - 1));
console.log(arrRec(5)); // 120