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

结果如下：

在这里插入图片描述

相关阅读:
西交软件915历年真题_编程题汇总与分析
Docker搭建RabbitMQ+HAProxy
一、特征工程
计算机毕业设计之java+springboot基于vue的地方美食分享网站
宇视科技通过stm32叠加字符串
hadoop生态圈面试精华之zookeeper（三）
SpringCloud Alibaba【一】简单介绍
sql分析（查询截取分析做sql优化）
Excel如何复制一摸一样的表格或建立副本
跟我一起写个虚拟机 .Net 7（三）- 安装LC-3 模拟器和编译器

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