vue-es6语法

learning › vue

分为三个部分：let，const，对象

let和const:使用let和const代替了var，因为var是全局变量。let和const有自己的作用域

  • let： 变量
  • const： 常量

举例：

  1. let
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button type="button" name="button">按钮1</button>
    <button type="button" name="button">按钮2</button>
    <button type="button" name="button">按钮3</button>
    <button type="button" name="button">按钮4</button>
    <button type="button" name="button">按钮5</button>
</body>
<script type="text/javascript">
    <!-- const btn = document.getElementsByTagName('button') -->
    <!-- ES5中使用的var定义的变量为全局变量,没有自己的作用域 -->
    <!-- 所以通过循环监听,此时i的值已经变成了5,所以即使点击的是第一个按钮,也会打印第五个按钮被点击 -->
    <!-- 实际上所有按钮点击都会显示为第五个按钮被点击 -->
    <!-- for (var i = 0 ; i < btn.length; i++){ -->
        <!-- btn[i].addEventListener('click',function(){ -->
            <!-- console.log('第'+ i + '个按钮被点击') -->
        <!-- }) -->
    <!-- } -->


    const btn = document.getElementsByTagName('button')
    <!-- ES6中使用let后,for循环中的每个函数都有了自己的i值,let具有块级作用域 -->
    for (let i = 0 ; i < btn.length; i++){
        btn[i].addEventListener('click',function(){
            console.log('第'+ i + '个按钮被点击')
        })
    }
</script>
</html>
  1. const
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        const name = 'lanzhan'
        console.log(name)
        <!-- const标志name为一个常量,不可以被改变 -->
        <!-- name = 'weiwuxian' -->
        <!-- console.log(name) -->

        <!-- const可以指向一个对象,指定的对象不可以被改变,但是对象的属性可以被改变 -->
        const user = {
            id: 1,
            name: 'lanzhan'
        }
        console.log(user.id)

        <!-- 对象不可以被改变,因为user所指向的内存地址不可被改变 -->
        <!-- user = { -->
            <!-- id: 2, -->
            <!-- name: 'weiwuxian' -->
        <!-- } -->
        <!-- console.log(user.name) -->

        <!-- 对象中的属性可以被改变,因为此时user所指向的内存地址仍然没有变 -->
        user.name = 'weiwuxian'
        console.log(user.name)
    </script>
</body>
</html>

对象增强写法分为三个部分

  • 对象写法
  • 属性写法
  • 函数写法

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
    // 之前创建一个对象的写法
        // const user = new User(){.... }
    // 对象字面量的增强写法
        // const user = {.....}



        const id = 1;
        const name = 'lanzhan';
        const age = 20;
    // 之前获取这些属性值的写法
        // const user = {
        //     id : id,
        //     name : name,
        //     age : age
        // }
    // 对象属性的增强写法
        const user = {
            id,
            name,
            age
        }
        console.log(user)


    // 之前这么写函数
        // const user = {
        //     getname function(){
        //
        //     }
        // }
    // 函数的增强写法
        const user = {
            getname(){

            }
        }

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