JavaScript并不完美之箭头函数相关(二)

306 阅读2分钟

这是我参与11月更文挑战的第4天,活动详情查看:2021最后一次更文挑战

前文学到 JavaScript 的关于数值存储的一个小 "bug", 今天继续来学习 JavaScript 中的神奇现象.

JavaScript 并不完美~ 但并不影响它运行起来, 并被广泛使用运行在浏览器中.

来看看一些 JavaScript 中的神奇之处:

JavaScript 迷之神奇--箭头函数和表达式

在 JavaScript这普通函数可以使用关键字 function 来声明, 而在ES6之后就可以使用箭头函数的方便书写方法了:

// 使用书写语法:
let arrowFn = (args) => {
  let { arg1, arg2...} = args
  // ... 具体逻辑操作
}

下面来看下官方定义:

箭头函数 + 表达式

官方文档: 箭头函数 | MDN :

箭头函数表达式 的语法比 函数表达式 更简洁,并且没有自己的thisargumentssupernew.target。 箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。

先来下下面的代码输出是什么?

// 这里注意箭头 后面跟的括号类型, 则会解析成不同结果

((name) => [ name ])('小阿天') /// ['小阿天']

((name) => { name })('小阿天') 

根据第一行, 箭头函数返回一个数组, 数组元素为传入的参数: name. 那么我们推测第二行应该返回一个对象(这里对象的属性和属性值相同, 简写 name 省略了): { name: '小阿天' }

[答案]: Chrome 控制台真实返回什么??来看看答案吧!

image

第二行返回 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