前端研习录（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

结果如下：

在这里插入图片描述

相关阅读:
怎样设置每个月的10号提醒?可每月触发提醒的软件是哪个
大学生抗疫逆行者网页作业感动人物HTML网页代码成品最美逆行者dreamweaver网页模板致敬疫情感动人物网页设计制作
小快轻准，5分钟自助上线，中小型制造企业数字化转型
2个比较经典的PHP加密解密函数分享
Lecture 3 Process Concept（进程概念）
如何提高网站权重
[附源码]JAVA毕业设计商店管理系统（系统+LW）
svn提交规范
FPGA_Vivado软件初次使用流程_超详细
R语言时间序列数据提取：使用xts包的first函数提取时间序列中最前面两周的数据（first 2 week）

原文地址：https://blog.csdn.net/WXKKang/article/details/126432932