ES6入门—ES6 对象与类的定义

最新推荐文章于 2024-07-25 09:24:40 发布

2401_84091321

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量362

点赞数 5

分类专栏：程序员文章标签： es6 javascript 前端

本文链接：https://blog.csdn.net/2401_84091321/article/details/138457476

版权

程序员专栏收录该内容

302 篇文章 0 订阅

订阅专栏

本文介绍了JavaScriptES6中的对象合并、模板字符串、类的定义与使用（包括constructor和super关键字）、类表达式以及如何在类中使用super。通过实例演示了这些新特性在实际编程中的应用。

摘要由CSDN通过智能技术生成


function people(name, age) {

  return {

    name,

    age,

  };

}

二、对象合并

=========================================================================

我们可以使用 assign（）将多个对象进行合并，也可以使用扩展的方式将对象合并。

示例：新建一个名为 demo.js 的文件，并在其中输入以下代码：


let name = { name: "lisi" };

let age = { age: 15 };

let sex = { sex: "female" };

var person = { ...name, ...age, ...sex };

console.log(person); // { name:'lisi',age:15,sex:'female' }

在终端输入以下命令：


node demo.js

我们会看到如下图所示的效果：

请添加图片描述

三、ES6 字符串

============================================================================

ES6 新增了模板字符串，可以将表达式嵌入字符串中进行拼接，也可以实现多行字符串或者字符串一行行拼接。用 ${} 来界定。

示例：新建一个名为 demo1.js 的文件，并在其中输入以下代码：


// es5

var name = "zhangsan";

console.log("hello " + name);

// es6

var name2 = "zhangsan";

console.log(`hello ${name2}`); // hello zhangsan

在终端输入以下命令：


node demo1.js

我们会看到如下图所示的效果：

请添加图片描述

四、ES6 类的定义及使用

================================================================================

constructor()

ES6 引入了 class 类的概念，每一个 class 类只有一个 constructor() 方法，用于创建和初始化对象。如果一个类没有指定 constructor() 方法，则会添加默认的 constructor() 方法。

示例：


<html>

  <head></head>

  <body>

    <script>

      class Person {

        constructor(name) {

          this.name = name;

        }

      }

      var person = new Person("zhangsan");

      document.write(person.name);

    </script>

  </body>

</html>

效果如下图所示：

请添加图片描述

五、Class 表达式

==============================================================================

ES6 中的 Class 表达式使得可以使用表达式来声明一个类或者一个对象。

声明类：


var 类名 = class [变量名]{...}

示例：


<html>

    <head></head>

    <body>

        <script>

            // 使用 Class 表达式来声明一个类，Persons 可以在类的内部使用，如果内部不需要使用，可以省略

            var Person = class Persons{

                constructor(name){

                    this.name = name;

                }

                show(){

                    alert(this.name);

                }

            };

            var person = new Person('zhangsan');

            person.show();

        </script>

    </body>

</html>

声明对象：


var 对象名 = new (class {})();

示例：


<html>

  <head></head>

  <body>

    <script>

      // 声明对象 person，并赋初值

      var person = new (class {

        constructor(name) {

          this.name = name;

        }

        show() {

          alert(this.name);

        }

      })("zhangsan");

      person.show();

    </script>

  </body>

</html>

六、super 关键字

==============================================================================

super 可以用在类的继承中，在子类的构造方法中需要使用 super 关键字调用父类的 constructor()。

示例：


<html>

  <head></head>

  <body>

    <script>

      class Person {

        constructor(name) {

          this.name = name;

        }

#  最后

**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**

**深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。**

**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

![img](https://img-blog.csdnimg.cn/img_convert/3a3d9af43fe793eb7bc834e732c14c92.jpeg)

![](https://img-blog.csdnimg.cn/img_convert/b566c62fc238c0cd893432835a5c0d90.png)

![](https://img-blog.csdnimg.cn/img_convert/941f091f16de49aa8701c548da7fc436.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
[外链图片转存中...(img-IKmM7s8Y-1714855196150)]

[外链图片转存中...(img-zW7jkJZ3-1714855196150)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618191877)

**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**

2401_84091321

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ES6入门—ES6 对象与类的定义

ES6 引入了 class 类的概念，每一个 class 类只有一个 constructor() 方法，用于创建和初始化对象。ES6 新增了模板字符串，可以将表达式嵌入字符串中进行拼接，也可以实现多行字符串或者字符串一行行拼接。super 可以用在类的继承中，在子类的构造方法中需要使用 super 关键字调用父类的 constructor()。我们可以使用 assign（）将多个对象进行合并，也可以使用扩展的方式将对象合并。ES6 中的 Class 表达式使得可以使用表达式来声明一个类或者一个对象。
复制链接

扫一扫