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。

相关文章

Java中流式并行操作parallelStream的原理和使用方法

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流（parallelStream）的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS
阅读更多...
Java中Redisson 的原理深度解析

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、
阅读更多...
SpringBoot基于注解实现数据库字段回填的完整方案

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代
阅读更多...
一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
Java HashMap的底层实现原理深度解析

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述：HashMap的宏观结构二、核心数据结构解析1. 数组（桶数组）2. 链表节点（Node
阅读更多...
Java AOP面向切面编程的概念和实现方式

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点（如日志、事务）与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么？二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关
阅读更多...
详解SpringBoot+Ehcache使用示例

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储：配置灵活性：编码示例引入依赖：配置ehcache.XML文件：配置
阅读更多...
Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
Java中的.close()举例详解

Java中的.close()举例详解

《Java中的.close()举例详解》.close()方法只适用于通过window.open()打开的弹出窗口,对于浏览器的主窗口,如果没有得到用户允许是不能关闭的,：本文主要介绍Java中的.... 目录当你遇到以下三种情况时，一定要记得使用 .close()：用法作用举例如何判断代码中的 input
阅读更多...
Linux挂载linux/Windows共享目录实现方式

Linux挂载linux/Windows共享目录实现方式

《Linux挂载linux/Windows共享目录实现方式》：本文主要介绍Linux挂载linux/Windows共享目录实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录文件共享协议linux环境作为服务端（NFS）在服务器端安装 NFS创建要共享的目录修改 NFS 配
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2