2024年最新ES6入门—ES6 对象与类的定义，【深夜思考

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

---

前言

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

本文会简要介绍 ES6 对象和 ES6 类的定义及使用。

---

一、ES6 对象

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

属性简化写法

ES5 我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。

function people(name, age) {

return {

name: name,

age: age,

};

}

以上代码可以简写为：

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() 方法。

示例：

效果如下图所示：

五、Class 表达式

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

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

声明类：

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

示例：

声明对象：

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

name = name;

}

show(){

alert(this.name);

}

};

var person = new Person(‘zhangsan’);

person.show();

声明对象：

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• [外链图片转存中…(img-H4tzQCIP-1715061772299)]