es6 学习记录

最新推荐文章于 2024-07-15 14:11:16 发布

Drizzlejj

最新推荐文章于 2024-07-15 14:11:16 发布

阅读量97

点赞数

文章标签： javascript elementui vue.js

本文链接：https://blog.csdn.net/Drizzlejj/article/details/125084409

版权

es6 箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var fn1 = function(){console.log('我是 fn1 函数')}
        fn1()
        var fn2 = () => {console.log('我是 fn2 函数')}
        fn2()

        /*
        箭头函数的特殊之处
        1.箭头函数某些时候可以省略（）
            =>当你的形参只有一个的时候，可以不写（）
        */
       var fn3 = () => {console.log('我没有形参')}
       fn3()
       var fn4 = a => {console.log('我只有一个形参：', a)}
       fn4(100)

       /*
       2.箭头函数某些时候可以省略{}
            =>当你的代码只有一句话的时候，可以不写{}
            =>并且会自动把这一句话的结果当做函数的返回值
        */
       var fn5 = a => console.log('我只有一个形参：',a)
       fn5(200)
       var fn6 = (a, b) => a + b
       console.log(fn6(10, 20))
        /*
        4.箭头函数内没有this
            =>箭头函数内的this就是外部作用域的this
        */
       var obj = {
           fn7: function(){console.log(this)},// this 因为 fn7 函数被 obj调用，所以 this 是obj

           fn8:() => {console.log(this)} // 因为是箭头函数，内部没有this，就是外部作用域的this
       }
       obj.fn7()
       obj.fn8()
    </script>
</body>
</html>

es6 解构赋值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 解构数组
        // 创建一个数组
        var arr = ['hello', 'world']
        // 开始解构
        let [a, b] = arr
        console.log(a)

        // 解构对象
        // 创建一个对象
        var obj = {name:'jack',age:18}
        // 开始解构,解构对象使用 {}
        // 表示定义一个叫做 name  的变量，获取的是 obj 内一个name 成员的值
        var {name,age} = obj
        console.log(name)
        // 起一个别名,相当于定义一个变量，从obj内获取叫做 age 的值
        var {age:a1} = obj // var a = obj.age
        console.log(a1)
    </script>
</body>
</html>

es6 模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var d = new Date().getDay()

        var str = `我是
        这是什么
        今天是本周第 ${d} 天了`
        console.log(str)
    </script>
</body>
</html>

es6 展开运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
    展开运算符：展开数组的 [] 或展开对象的 {}
     */
    var arr = [100,200,300,400]
    console.log(...arr)
    // 复制对象,需要注意书写顺序问题，顺序不一样，结果不一样。再有相同成员的时候。
    var obj = {name: 'jack', age:18, gender:'female'}
    var obj2 ={high:175, ...obj}
    console.log(obj2)
    /*合并数组*/
    var arr1 = [10,20]
    var arr2 = [30,40,50]
    var arr3 = [60,70]
    var arr4 = [80,90]
    var arr5 = [...arr1, ...arr2, ...arr3, ...arr4]
    console.log(arr5)
    /*给函数传递参数*/
    var max = Math.max(...arr5)
    console.log(max)
    </script>
</body>
</html>

es6 类语法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var Person = function(name, age){
            this.name = name
            this.age = age
        }
        // 原型上添加的方法是为了给实例使用
        Person.prototype.sayHi = function(){console.log('hello world')}
        // 书写静态属性和方法
        Person.a = 100
        Person.go = function(){console.log('跑起来飞快')}
        var p1 = new Person('jack', 12)
        console.log(p1)
        p1.sayHi()
        console.log(Person.go())
        
        // 类的书写 必须和 new 关键字连用，不然会报错
        // 先按照 ES5 的构造函数体书写
        class People {
            constructor (name, age){
                this.name = name
                this.age = age
            }
            // 直接书写原型上的方法
            sayH(){console.log('hi world')}
            // 书写静态属性和方法
            static a = 100
            static go = function(){console.log('running fast')}
        }
        var p2 = new People('bob', 13)
        console.log(p2)
        p2.sayH()
        People.go()
        console.log(People.a)

    </script>
</body>
</html>

es6 语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 

        ES6以前我们定义变量使用var关键字
        ES6新增了两个定义变量的关键字
            let   =>  定义变量 
            const   => 定义常量（特殊的变量）
    
    区别：

    var会进行预解析
        let/const不会进行预解析

    var可以声明两个重名的变量
        let/const不能定义重名变量

    var没有块级作用域
        let/const有块级作用域

     -->
     <script>
         /*
        var会进行预解析
            let/const不会进行预解析
        */
        console.log(num)  // undefined
       var num = 100
       console.log(num)     // 100

       // console.log(num2)    // 定义之前使用 let声明的变量会报错
       let num2 = 200
       console.log(num2)

    //    console.log(num3)    // 定义之前使用 const声明的变量会报错

       const num3 = 300
       console.log(num3)

       // 2. 重复变量名
       var n1 = 100
       var n1 = 200
       console.log(n1)

    //    let n2 = 100
    //    let n2 = 200
    //    console.log(n2)   会报错

        //3. 块级作用域
        // 任何一个可以执行代码段的{}都会限制该变量的使用范围
        if (true){
            var num = 100
            console.log(num)
        }
        console.log(num)

        if (true){
            // 因为这个 num 使用 let 关键字定义的
            // 所以只能在这个if 的{}内使用
            let num = 100
            console.log(num4)
        }
        console.log(num4)
     </script>
     <!-- 
        let与const的区别

            let可以定义变量的时候不进行赋值
                let num
                console.log(num)
                num = 100
                console.log(num)
            const在定义的时候必须赋值
                const num
                console.log(num)  // 会报错
                num = 100
                console.log(num)


            let定义的变量可以被修改
                let num = 100
                console.log(num)  // 100
                num = 200
                console.log(num)    // 200

            const定义的常量一经赋值不能被修改
                const num = 100
                console.log(num)  // 100
                num = 200
                console.log(num)    // 会报错
      -->
</body>
</html>