Teng's blog
Shetengteng
2021-11-28

基本语法

# 基本语法

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性

本部分只学习项目开发中涉及到ES6的最少必要知识，方便项目开发中对代码的理解

示例链接

# 声明变量 let

  • var 关键字声明变量没有局部作用域
  • let 关键字声明的变量有局部作用域
    • 在作用域外部使用会报错
<!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 a = 1
            let b = 2
        }
        console.log(a)
        console.log(b) // Uncaught ReferenceError: b is not defined
    </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
  • var变量声明同一个变量可以多次
  • let只能声明一次
<!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 m = 1
        var m = 2
        let n = 1
        let n = 2  // Uncaught SyntaxError: Identifier 'n' has already been declared
        console.log(m)
        console.log(n)
    </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

# 定义常量 const

  • 常量定义后不可修改
  • 常量必须初始化赋值
<!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>
        const PI = 3.1415926
        // 声明之后不可更改
        PI = 3.14 // Uncaught TypeError: Assignment to constant variable.
        console.log(PI)

        // 常量必须初始化 
        const M // Uncaught SyntaxError: Missing initializer in const declaration
    </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

# 解构赋值

  • 解构赋值是对赋值运算符的扩展
  • 是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值
  • 在代码书写上简洁且易读，语义更加清晰明了
  • 方便了复杂对象中数据字段获取
<!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>
        // 解构数组
        // 传统方式
        let a = 1, b = 2, c = 3
        console.log(a, b, c)
        // ES6 方式
        let [x, y, z] = [1, 2, 3]
        console.log(x, y, z)

        // 解构对象
        let user = { name: 'stt', age: 22 }
        // 传统方式
        let name_v = user.name
        let age_v = user.age
        console.log(name_v, age_v)
        // ES6 方式
        // 注意：解构的变量必须是对象中属性，要求名称一致
        let { name, age } = user
        console.log(name, age)
    </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

# 模板字符串 `` ${}

  • 模板字符串相当于加强版的字符串
  • 用反引号 `
    • 可作为普通字符串
    • 可定义多行字符串，可换行
    • 可在字符串中加入变量和表达式
<!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>
        // 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式

        let name = 'stt'
        let age = 22
        let info =`My name is ${name} and 
age is ${age - 1}`
        console.log(info)
    </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

# 声明对象简写

<!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>
        const name = "stt"
        const age = 22

        // 传统方式定义对象
        const user = { name: name, age: age }
        console.log(user)

        // ES6定义对象
        const user2 = { name, age }
        console.log(user2)
    </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

# 对象扩展运算符 ...

  • 简化拷贝
  • 简化合并对象操作
<!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>
        // 对象复制
        let user = { name: "stt", age: 22 }
        let copyUser = { ...user }
        console.log(copyUser)

        // 对象合并
        let age = { age: 22 }
        let name = { name: "stt", age: 23 }
        let mergeUser = { ...name, ...age } // 如果有相同的属性，那么会后添加的相同属性覆盖
        console.log(mergeUser)
    </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

# 箭头函数 =>

  • 箭头函数提供了一种更加简洁的函数书写方式
  • 基本语法是：参数 => 函数体
  • 箭头函数多用于匿名函数的定义
<!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 f = function (a) { return a }
        console.log(f(3))

        // ES6 使用箭头函数定义
        var f2 = a => a
        console.log(f2(4))

        // 如果有多个参数，使用括号
        // 传统方式
        var f3 = function (m, n) { return m + n }
        console.log(f3(1, 2))

        // ES6 使用箭头函数定义
        var f4 = (m, n) => m + n
        console.log(f4(1, 2))
    </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
Last Updated: 2022/01/16, 11:29:51
介绍
介绍

← 介绍→

Theme by Vdoing | Copyright © 2021-2022 Shetengteng | MIT License