前端研习录（38）——ES6 对象扩展讲解及示例分析

---

版权声明

• 本文原创作者：清风不渡
• 博客地址：https://blog.csdn.net/WXKKang

---

  重拾前端记忆，记录学习笔记，现在进入ES6 对象扩展部分

一、对象扩展

  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>清风不渡title>
head>
<body>

    <script>
        //ES6支持在大括号里直接写入变量和函数，作为对象的属性和方法，这样书写起来更加简洁
        //ES5
        var name = "Tom"
        var user1 = {
            name : name,
            age : 18,
            getAge : function(){
                return this.age
            }
        }
        console.log(user1.name);
        console.log(user1.getAge());

        //ES6
        var user2 = {
            name,
            age : 19,
            getAge(){
                return this.age
            }
        }
        console.log(user2.name);
        console.log(user2.getAge());

        //ES5
        //也可以用于函数的返回值简写
        function getXy1(){
            const x = 1;
            const y = 2;
            return{
                x:x,
                y:y
            }
        }
        console.log(getXy1().x,getXy1().y);
        
        //ES6
        function getXy2(){
            const x = 3;
            const y = 4;
            return{
                x,
                y
            }
        }

        console.log(getXy2().x,getXy2().y);

        //也支持将表达式作为对象的属性名，即把表达式放入方括号内
        var name = "frontEnd"
        var user3 = {
            [name] : "HTML,CSS,JavaScript"
        }
        console.log(user3);

        //也支持使用扩展运算符来展开数据
        var num = {a:1,b:2}
        var num1 = {num}
        var num2 = {...num}
        console.log(num1);
        console.log(num2);
    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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

  结果如下：