箭头函数,箭头函数的this,解构赋值,解构赋值的逆用法

箭头函数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function text1 (x) {
            return x+4
        }

        var text2 = function (x) {
            return x+4
        }

        // ES6里可以食用箭头来定义函数
        const text3 = (x) => {
            return x+4
        }
        // 如果箭头函数只有一个参数,那么小括号可以不写,多个参数就必须写小括号
        const text4 = x => {
            return x+4
        }
        // 如果函数里只有一句话,而且这句话就是return,这个时候大括号以及return关键字都可以省略
        var text5 = x => x+4
        // 如果返回值是一个对象,那么要加一堆小括号避免歧义
        const text6 = num =>({
            price:num
        })
        console.log(text1(4))
        console.log(text2(4))
        console.log(text3(4))
        console.log(text4(4))
        console.log(text5(4))
        console.log(text6(4))
    </script>
</body>
</html>



箭头函数的this


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // const obj = {
        //     name: 'zhangsan',
        //     say: function(){
        //         // 一秒之后打印zhangsan
        //         // 这里的this指向obj,所以我可以在这里把this存下来,这样我的常量_this就永远都指向obj了
        //         const _this = this
        //         setInterval(function(){
        //             // 像这种没有明确指向的匿名函数this统一指向window
        //             console.log(this) // window
        //             console.log(_this) // obj
        //             console.log(this.name) // 空字符串
        //             console.log(_this.name) // zhangsan
        //         },1000)
        //     }
        // }
        // obj.say()

        const obj = {
            name: 'zhangsan',
            say: function () {
                setTimeout(() => {
                    // 箭头函数没有自己的this
                    console.log(this) // obj
                    console.log(this.name) // zhangsan
                }, 1000)
            }
        }
        obj.say()

        // 1、如果你希望this指当前对象,那么就用普通函数
        // 2、如果你希望this指向外层对象,用箭头函数
        // 3、如果内层外层都要,用普通函数,this指内层
        //    在外层声明一个变量把外层this存下来,比如 const _this = this,_this指外层
    </script>
</body>

</html>



解构赋值



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var arr = [4, 3, 7, 9]
        // var a = arr[0]
        // var b = arr[1]

        // 把数组里的元素按顺序赋值给四个变量
        // 如果解构的变量少于数组元素,那么就只解构前几个元素
        // 如果解构的变量多于数组元素,那么多余的变量就是undefined
        var [a, b, c, d, e] = arr
        console.log(a)
        console.log(b)
        console.log(c)
        console.log(d)
        console.log(e)

        // 对象是无序的,没有length属性
        var obj = {
            username: 'lisi',
            age: 20,
            gender: 'male',
            say: function () {
                console.log(this.age)
            }
        }

        // 对象的解构是按照属性名来解构的,也就是说声明的变量要对应对象里的属性名,才能拿到属性值
        // 如果去解构一个对象里不存在的属性,得到undefined
        var { gender,age,aaa,say } = obj // var age = obj.age
        console.log(age) // 20
        console.log(gender) // male
        console.log(aaa)  // undefined
        // say是解构出来的一个全局函数了,可以直接调用了,相当于var say = obj.say
        say()
    </script>
</body>

</html>



解构赋值的逆用法



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var age = 20
        var username = 'list'
        var gender = 'male'

        // var obj = {
        //   age: age,
        //   username: username,
        //   gender: gender
        // }

        // ES6里面可以简写
        var obj = {
            age,
            username,
            gender
        }
        console.log(obj)
    </script>
</body>

</html>

你可能感兴趣的:(箭头函数,箭头函数的this,解构赋值,解构赋值的逆用法)