ES6语法（三）——对象字面量增强写法

最新推荐文章于 2024-07-28 01:00:00 发布

原创最新推荐文章于 2024-07-28 01:00:00 发布 · 230 阅读

1 ·

CC 4.0 BY-SA版权

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了ES6中属性和函数的增强写法，对比了ES5的传统写法。通过示例代码展示了如何使用ES6的简洁语法创建对象和函数，强调了ES6如何将变量直接作为对象的键值，简化了代码结构。同时，文章讨论了这两种写法在实际应用中的等效性。

1、属性的增强写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
    // const obj = new object()
    // 我们通常使用这用写法：专业术语为对象字面量
    const obj = {
        name: 'kim',
        age: '18',
        eat: function() {
            console.log('开始吃了～～')
        },
        run: function() {
            console.log('开始跑了～～')
        }
    }
    // 1.属性的增强写法
    const name = 'kimtian';
    const age = 18;
    const height = 1.88;

    // ES5的写法
    const es5Obj = {
        name: name,
        age: age,
        height: height
    }
    // ES6的写法
    const es6Obj = {
        name,
        age,
        height
    }
    console.log(es5Obj)
    console.log(es6Obj)
</script>
</body>

ES6会把我们的变量名称作为key，它的常量也就是具体的值作为value。

可以从浏览器执行的结果看出来两种方式打印出来的结果完全一样。

2、函数的增强写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
    // 2、函数的增强写法
    // ES5的写法
    const es5Obj = {
        eat: function() {

        },
        run: function() {

        }
    }
    // ES6的写法
    const es6Obj = {
        eat() {

        },
        run() {

        }
    }
</script>
</body>