JavaScript 类和对象创建对象的四种方式操作对象操作对象删除属性修改属性查看属性值遍历对象对象数组

本文链接：https://blog.csdn.net/ndjziskwkhdh/article/details/139551419

类和对象

什么是对象？

现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是 “对象”。

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。对象是由属性和方法组成的。

属性：事物的特征，在对象中用变量来表示（常用名词）
方法：事物的行为，在对象中用函数来表示（常用动词）

创建对象的四种方式

在 JavaScript 中，现阶段我们可以采用四种方式创建对象（object）：

利用字面量创建对象
利用new Object 创建对象
利用构造函数创建对象
利用class创建对象

方式1：利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示

键：相当于属性名
值：相当于属性值，可以是任意类型的值

示例：对象定义

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {
    <span style="color:#aa5500">//对象的属性</span>
    <span style="color:#000000">uname</span>: <span style="color:#aa1111">'武松'</span>,
    <span style="color:#000000">age</span>: <span style="color:#116644">18</span>,
    <span style="color:#000000">gender</span>: <span style="color:#aa1111">'男'</span>,
    
    <span style="color:#aa5500">//对象的方法</span>
    <span style="color:#000000">sayHi</span>: <span style="color:#770088">function</span>() {
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'你好'</span>)
    }
}</span></span>

对象的调用

对象里面的属性调用：对象.属性名，这个小点 . 就理解为 “的”
对象里面属性的另一种调用方式：对象[ '属性名' ] ，注意花括号里面的属性必须加引号
对象里面的方法调用：对象.方法名() ，方法名后面必须加括号

示例：对象调用

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#000000">console</span>.<span style="color:#000000">log</span>( <span style="color:#000000">obj</span>.<span style="color:#000000">uname</span> )  <span style="color:#aa5500">// 调用名字属性</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>( <span style="color:#000000">obj</span>[<span style="color:#aa1111">'gender'</span>] ) <span style="color:#aa5500">// 调用性别属性</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">sayHi</span>() <span style="color:#aa5500">// 调用 sayHi 方法属性，后面必须加括号</span></span></span>

方式2：利用 new Object 创建对象

示例：创建对象

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Object</span>()
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'武松'</span>  <span style="color:#aa5500">// 利用等赋值的方法 添加对象的属性和方法</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">sayHi</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>() {
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#aa1111">'你好'</span>)
}</span></span>

方式3：利用构造函数创建对象

构造函数：是一种特殊的函数，是ES5中创建类的一种方式。

构造函数主要用来初始化对象，即为对象成员变量赋初始值
它总与new运算符一起使用
我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个构造函数里面
构造函数相当于类，在创建对象时可以复用，即每new一次就创建一个对象，这一点相比前两种创建对象的方式更好写

语法：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">function</span> <span style="color:#0000ff">构造函数名</span>() {
   <span style="color:#770088">this</span>.<span style="color:#000000">属性</span> <span style="color:#981a1a">=</span> <span style="color:#000000">值</span>
   <span style="color:#770088">this</span>.<span style="color:#000000">方法</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>() {}
}
<span style="color:#770088">let</span> <span style="color:#0000ff">对象名</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">构造函数名</span>()</span></span>

定义构造函数相当于定义了类
构造函数名字首字母大写
构造函数不需要 return 就可以返回结果
调用构造函数必须使用 new
属性和方法前面必须添加 this

new关键字

new 在执行时会做四件事情：

在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法。
返回这个新对象（所以构造函数里面不需要return）。

示例：创建对象

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//定义Person构造函数，也就是Person类</span>
<span style="color:#770088">function</span> <span style="color:#0000ff">Person</span>(<span style="color:#0000ff">name</span>,<span style="color:#0000ff">age</span>){
    <span style="color:#770088">this</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">name</span>
    <span style="color:#770088">this</span>.<span style="color:#000000">age</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">age</span>
    <span style="color:#770088">this</span>.<span style="color:#000000">sayHello</span> <span style="color:#981a1a">=</span> <span style="color:#770088">function</span>(){
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#ff5500">`我叫${</span><span style="color:#770088">this</span>.<span style="color:#000000">name</span><span style="color:#ff5500">}，我今年岁${</span><span style="color:#770088">this</span>.<span style="color:#000000">age</span><span style="color:#ff5500">}`</span>)
    }
}
<span style="color:#aa5500">//实例化person对象</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">person</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Person</span>(<span style="color:#aa1111">"林冲"</span>,<span style="color:#116644">30</span>)

<span style="color:#aa5500">//调用person对象的属性</span>
<span style="color:#000000">person</span>.<span style="color:#000000">age</span> <span style="color:#981a1a">=</span> <span style="color:#116644">32</span>

<span style="color:#aa5500">//调用person对象的方法</span>
<span style="color:#000000">person</span>.<span style="color:#000000">sayHello</span>() <span style="color:#aa5500">//输出 我叫林冲，我今年岁30</span></span></span>

方式4：利用class创建对象

关于类class：

class是ES6中提供的关键字，用来定义类，在写法上更简洁、语义化更强。

示例：使用class重构方式3中的类Persoin

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//定义类Person</span>
<span style="color:#770088">class</span> <span style="color:#0000ff">Person</span>{
    <span style="color:#aa5500">//构造函数，constructor是固定写法，name和age是构造函数的参数就</span>
    <span style="color:#000000">constructor</span>(<span style="color:#0000ff">name</span>,<span style="color:#0000ff">age</span>) {
        <span style="color:#770088">this</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">name</span> <span style="color:#aa5500">//必须用this定义name属性，并赋值</span>
        <span style="color:#770088">this</span>.<span style="color:#000000">age</span> <span style="color:#981a1a">=</span> <span style="color:#0055aa">age</span>   <span style="color:#aa5500">//必须用this定义age属性，并赋值</span>
    }
    <span style="color:#aa5500">//定义方法sayHello</span>
    <span style="color:#000000">sayHello</span>(){
        <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#ff5500">`我叫${</span><span style="color:#770088">this</span>.<span style="color:#000000">name</span><span style="color:#ff5500">}，我今年岁${</span><span style="color:#770088">this</span>.<span style="color:#000000">age</span><span style="color:#ff5500">}`</span>)
    }
}
<span style="color:#aa5500">//创建对象person</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">person</span> <span style="color:#981a1a">=</span> <span style="color:#770088">new</span> <span style="color:#000000">Person</span>(<span style="color:#aa1111">'林冲'</span>,<span style="color:#116644">30</span>)
<span style="color:#aa5500">//person对象调用方法sayHello()</span>
<span style="color:#000000">person</span>.<span style="color:#000000">sayHello</span>() <span style="color:#aa5500">//输出 我叫林冲，我今年岁30</span></span></span>

操作对象

添加属性

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {}       <span style="color:#aa5500">//准备一个对象</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)   <span style="color:#aa5500">// {}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"武松"</span>  <span style="color:#aa5500">//增加属性</span>
<span style="color:#000000">obj</span>[<span style="color:#aa1111">'age'</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>    <span style="color:#aa5500">//增加属性</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>  <span style="color:#aa5500">//增加属性</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)   <span style="color:#aa5500">//{name: '武松', age: 18, gender: '男'}</span></span></span>

删除属性

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {}
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)       <span style="color:#aa5500">// {}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"武松"</span>
<span style="color:#000000">obj</span>[<span style="color:#aa1111">'age'</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)      <span style="color:#aa5500">//{name: '武松', age: 18, gender: '男'}</span>
<span style="color:#770088">delete</span> <span style="color:#000000">obj</span>.<span style="color:#000000">name</span>       <span style="color:#aa5500">//删除属性</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)      <span style="color:#aa5500">//{age: 18, gender: '男'}</span></span></span>

修改属性

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {}
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)          <span style="color:#aa5500">// {}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"武松"</span>
<span style="color:#000000">obj</span>[<span style="color:#aa1111">'age'</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)          <span style="color:#aa5500">//{name: '武松', age: 18, gender: '男'}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'行者武松'</span>      <span style="color:#aa5500">//修改属性</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>)          <span style="color:#aa5500">//{name: '行者武松', age: 18, gender: '男'}</span></span></span>

查看属性值

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {}
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>) <span style="color:#aa5500">// {}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"武松"</span>
<span style="color:#000000">obj</span>[<span style="color:#aa1111">'age'</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>.<span style="color:#000000">name</span>)        <span style="color:#aa5500">//武松  查看属性值</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>.<span style="color:#000000">age</span>)         <span style="color:#aa5500">//18    查看属性值</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>[<span style="color:#aa1111">'gender'</span>])   <span style="color:#aa5500">//男    查看属性值</span></span></span>

遍历对象

for...in 语句用于对数组或者对象的属性进行循环操作。

语法：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">for</span> (<span style="color:#000000">变量</span> <span style="color:#770088">in</span> <span style="color:#000000">对象</span>) {
    <span style="color:#aa5500">// 代码块</span>
}</span></span>

示例：

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">obj</span> <span style="color:#981a1a">=</span> {}
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">obj</span>) <span style="color:#aa5500">// {}</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">name</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">"武松"</span>
<span style="color:#000000">obj</span>[<span style="color:#aa1111">'age'</span>] <span style="color:#981a1a">=</span> <span style="color:#116644">18</span>
<span style="color:#000000">obj</span>.<span style="color:#000000">gender</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'男'</span>

<span style="color:#770088">for</span> (<span style="color:#770088">let</span> <span style="color:#0000ff">v</span> <span style="color:#770088">in</span> <span style="color:#000000">obj</span>) {
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#0055aa">v</span> <span style="color:#981a1a">+</span> <span style="color:#aa1111">"="</span> <span style="color:#981a1a">+</span> <span style="color:#000000">obj</span>[<span style="color:#0055aa">v</span>])  
}</span></span>

{}

name=武松 age=18 gender=男

对象数组

数组的值是对象，称为对象数组。

使用场景：在开发中对象数组使用非常频繁，例如分页查询数据中，当前页的所有行是一个数组，数组中每一个元素是一行，一行就是一个对象，此时就需要使用对象数组。

需求：分页显示第一页数据

每页显示三个学生
每个学生有姓名和成绩

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#aa5500">//定义对象数组</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">stus</span> <span style="color:#981a1a">=</span>[
        {<span style="color:#000000">name</span>:<span style="color:#aa1111">"李逵"</span>,<span style="color:#000000">score</span>:<span style="color:#116644">78</span>},
        {<span style="color:#000000">name</span>:<span style="color:#aa1111">"戴宗"</span>,<span style="color:#000000">score</span>:<span style="color:#116644">87</span>},
        {<span style="color:#000000">name</span>:<span style="color:#aa1111">"施恩"</span>,<span style="color:#000000">score</span>:<span style="color:#116644">80</span>}
    ];
<span style="color:#aa5500">//显示对象数组元素</span>
<span style="color:#770088">for</span>(<span style="color:#770088">let</span> <span style="color:#0000ff">i</span><span style="color:#981a1a">=</span><span style="color:#116644">0</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a"><</span><span style="color:#000000">stus</span>.<span style="color:#000000">length</span>;<span style="color:#0055aa">i</span><span style="color:#981a1a">++</span>){
    <span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#ff5500">`姓名:${</span><span style="color:#000000">stus</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">name</span><span style="color:#ff5500">}，成绩:${</span><span style="color:#000000">stus</span>[<span style="color:#0055aa">i</span>].<span style="color:#000000">score</span><span style="color:#ff5500">}`</span>)
}</span></span>