javascript -- 箭头函数

最新推荐文章于 2024-03-08 15:49:58 发布

hhhhboom

最新推荐文章于 2024-03-08 15:49:58 发布

阅读量172

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/hhhhboom/article/details/130677612

版权

箭头函数比函数表达式更简洁的一种写法使用

场景：箭头函数更适用于那些本来需要匿名函数的地方，写法更简单

<body>
  <script>
    // 箭头函数
    // 1. 基本语法
    // const fn = function () {
    //   console.log('我是函数表达式')
    // }
    // fn()
    // const fn = () => {
    //   console.log('我是箭头函数')
    // }
    // fn()

    // 2. 细节使用
    // 2.1 如果只有一个形参则可以省略小括号,其余个数不能省略，如果没有参数则写空的小括号
    // const sum = (x) => {
    //   console.log(x + x)
    // }
    // sum(2)
    // const sum = x => {
    //   console.log(x + x)
    // }
    // sum(2)

    // 2.2 如果函数体只有一句代码，则可以省略大括号，这句代码就是返回值（省略return）
    // const sum = x => {
    //   return x + x
    // }
    // const sum = x => x + x
    // console.log(sum(5))

    // 2.3 如果返回的是一个对象，则需要用小括号把对象包裹起来
    // const fn = function() {
    //   return {name: '佩奇'}
    // }
    // const fn = () => ({ name: '佩奇' })
    // console.log(fn())

    // 2.4 箭头函数里面没有 arguments，但是有剩余参数
    const fn = (...other) => {
      // console.log(arguments)
      console.log(other)
    }
    fn(1, 2)
  </script>
</body>

用法细节：