JavaScript学习-箭头函数

278 阅读2分钟

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

前面更文我们学习了JavaScript 中的 【JavaScript 学习-特殊符号-位运算符】、【JavaScript 学习-逻辑运算符-短路了?】 本文来学习 JavaScript 箭头函数

JavaScript 中的箭头函数

箭头函数 是函数的另一种表示方法, 这看起来和其他表示方法非常的不同. 定义一个普通函数的关键字 function 被箭头函数用 一个由等于号=和大于号> 组成的箭头=>所代替, 故称箭头函数.

而运算符 大于或等于 写作为(>=)/ 小于或等于(<=), 这样箭头函数这样的写法的和这两个运算符很容易弄混淆, 所以老道在书中写到"为了在打字上偷个小懒,不值得"

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

function 定义一个普通函数

// 关键字 function 普通方法定义一个函数
const fn = function (base = '参数', args = '可以有多个参数') {
  const args = [...arguments]
  console.log(args, arguments, arguments.length)
}

箭头函数 定义一个函数

箭头位于参数列表(传递的多个参数)之后, 箭头后面跟着函数体, 可以理解为: 什么条件(参数列表)产生了什么效果(函数体).

看一个简单的例子:

// 定义一个变量用于遍历
const myArticles = [
  'JavaScript 学习-特殊符号-位运算符',
  'JavaScript学习-逻辑运算符-短路了?',
  '逻辑运算符或"||" ',
  '逻辑运算符与"&&"',
]

console.log(myArticles.map((article) => article.length))
// 箭头函数一个参数可以省略括号, 自动格式化的还是给加上了.

这里的箭头函数, 传递一个参数就是遍历 myArticles 的子元素, 输出这个元素的长度 length