JS高级的学习(一)

JS高级的学习(一)

箭头函数

箭头函数，也是一种函数，写法上：更简洁、灵活

        // 普通函数
        function func1() {
   
            console.log('func1')
        }
        // 普通函数另一种写法
        const func2 = function () {
   
            console.log('func2')
        }
        // 箭头函数 (省略了function，在小括号和花括号之间添加 => )
        const func3 = () => {
   
            console.log('func3')
        }

        func1() // 函数的调用
        func2() // 函数的调用
        func3() // 函数的调用

箭头函数 传递传参

function func1(a) {
   
            console.log(a)
        }
        func1('1')

        // 箭头函数	 传参
        // 如果  只传递一个参数的话  小括号  可以省略: const func2 = a => {}
        // 如果  不传递参数  或者  传递参数  大于  1个的话  小括号不能省略

        // const func2 = a,b => {} // error
        const func2 = (a, b) => {
   
            console.log(a, b)
        }
        func2(2, 3)

箭头函数 返回值

        // 通俗返回值的写法
        const func1 = () => {
   
            return 123
        }
        const num = func1()
        console.log(num) // 123

        // 简洁写法  如果函数只有一行代码 大括号可以省略 同时 这一行的代码运行结果 也会被直接返回
        // 如果你想要省略 大括号   代码就不要换行
        const func2 = (a) => a + 1
        const sum = func2(2)
        console.log(sum)

        const func3 = (a) => console.log(a)

        func3(456)

箭头函数 返回对象

        const func1 = () => 123
        const func2 = () => 'abc'
        const func3 = () => true
        const func4 = () => [1, 2, 34]

        // 如果你的箭头函数 省略大括号的 情境下 想要返回 一个对象  固定语法 添加一个小括号
        const func5 = () => ({
   
            username: '悟空'
        })
        console.log(func1())
        console.log(func2())
        console.log(func3())
        console.log(func4())
        console.log(func5())

函数形参的默认值

        // (msg="大家好")  "大家好" 就是msg的默认值
        // 如果 调用函数的时候 没有传递参数 就使用默认值
        // 如果 传递了参数    就会使用传递的参数 而不会使用 默认值
        const func1 = (msg = '大家好