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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
hdu2241（二分+合并数组）

hdu2241（二分+合并数组）

题意：判断是否存在a+b+c = x，a，b，c分别属于集合A,B,C 如果用暴力会超时，所以这里用到了数组合并，将b,c数组合并成d，d数组存的是b，c数组元素的和，然后对d数组进行二分就可以了 代码如下（附注释）： #include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<que
阅读更多...
电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2