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

2024-06-08 23:12
文章标签 java 遍历 数组 查看 操作 script 对象 方式 删除 属性 修改 四种 创建对象

本文主要是介绍JavaScript 类和对象 创建对象的四种方式 操作对象 操作对象 删除属性 修改属性 查看属性值 遍历对象 对象数组，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

类和对象

什么是对象？

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

在 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 在执行时会做四件事情：

  1. 在内存中创建一个新的空对象。

  2. 让 this 指向这个新的对象。

  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。

  4. 返回这个新对象（所以构造函数里面不需要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>

这篇关于JavaScript 类和对象 创建对象的四种方式 操作对象 操作对象 删除属性 修改属性 查看属性值 遍历对象 对象数组的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1043583。

相关文章

Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
SpringBoot+Docker+Graylog 如何让错误自动报警

SpringBoot+Docker+Graylog 如何让错误自动报警

《SpringBoot+Docker+Graylog如何让错误自动报警》SpringBoot默认使用SLF4J与Logback,支持多日志级别和配置方式,可输出到控制台、文件及远程服务器,集成ELK... 目录01 Spring Boot 默认日志框架解析02 Spring Boot 日志级别详解03 Sp
阅读更多...
java中反射Reflection的4个作用详解

java中反射Reflection的4个作用详解

《java中反射Reflection的4个作用详解》反射Reflection是Java等编程语言中的一个重要特性,它允许程序在运行时进行自我检查和对内部成员（如字段、方法、类等）的操作,本文将详细介绍... 目录作用1、在运行时判断任意一个对象所属的类作用2、在运行时构造任意一个类的对象作用3、在运行时判断
阅读更多...
java如何解压zip压缩包

java如何解压zip压缩包

《java如何解压zip压缩包》：本文主要介绍java如何解压zip压缩包问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解压zip压缩包实例代码结果如下总结java解压zip压缩包坐在旁边的小伙伴问我怎么用 java 将服务器上的压缩文件解压出来，
阅读更多...
SpringBoot中SM2公钥加密、私钥解密的实现示例详解

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具
阅读更多...
Spring WebFlux 与 WebClient 使用指南及最佳实践

Spring WebFlux 与 WebClient 使用指南及最佳实践

《SpringWebFlux与WebClient使用指南及最佳实践》WebClient是SpringWebFlux模块提供的非阻塞、响应式HTTP客户端,基于ProjectReactor实现,... 目录Spring WebFlux 与 WebClient 使用指南1. WebClient 概述2. 核心依
阅读更多...
Mysql实现范围分区表(新增、删除、重组、查看)

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型（范围、哈希、列表、键值）,主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区（Range Partitioning1、新建分区表：2、分
阅读更多...
SQL Server配置管理器无法打开的四种解决方法

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一：桌面图标进入方法二：运行窗口进入检查版本号对照表php方法三：查找文件路径方法四：检查 S
阅读更多...
Spring Boot @RestControllerAdvice全局异常处理最佳实践

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理？二、核心注解解析1. @RestControllerAdvice2
阅读更多...
Spring IoC 容器的使用详解(最新整理)

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2