当前位置: 首页 > news >正文

网页前端开发之Javascript入门篇(9/9):对象

Javascript对象

什么是对象?
答:其概念跟 Python教程 的字典基本相似,虽然存有一些差异,不过对于目前的教程来讲可以忽略。

下面是对象的语法:

var aaa = {"弓" : "张","木" : "李","文" : "刘"
}
console.log(aaa)

其中
一对大括号 是创建对象的特定语法,其内部的每一行称为一组 键值对
而键值对的左侧存的是右侧存的是此键对应的,中间用 冒号 隔开。
多个键值对之间用 逗号 隔开,最后赋值给一个变量保存即可。

在 Javascript 中,一个对象变量其实是其内置类Object的一个实例(Javascript会自动转换)。
因此它拥有一些类属性类方法,你可以按照实例的语法去读取或调用它们。


注:请在 MinWegPage 上直接在线编写和运行本篇代码,无需安装任何环境。

下面是常见的对象用法:

读取

使用来访问对象中的
其语法是: 对象名 带上一对 中括号 ,里面填入即可。

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };  // 键值对可以缩写在同一行
var value = aaa["弓"];
console.log(value);  // 输出:张

添加键值对

新值 直接赋值给 新键 即可。
即:对象名[新键] = 新值

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出:{'弓': '张', '木': '李', '文': '刘'}
aaa["子"] = "孙";
console.log(aaa);
// 输出:{'弓': '张', '木': '李', '文': '刘', '子': '孙'}

删除键值对/移出键值对

使用 delete 关键字即可。
即:delete 对象名[键]

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出:{'弓': '张', '木': '李', '文': '刘'};
delete aaa["弓"];
console.log(aaa);
// 输出:{'木': '李', '文': '刘'}

修改值/替换值

新值 直接赋值给即可。
即:对象名[键] = 新值

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
console.log(aaa);
// 输出:{'弓': '张', '木': '李', '文': '刘'}
aaa["木"] = "林";
console.log(aaa);
// 输出:{'弓': '张', '木': '林', '文': '刘'}

空对象

📘 示例

var aaa = {};    // 什么都不填,则为一个空的对象
console.log(aaa);  // 输出:{}

遍历

📘 示例

var aaa = { "弓" : "张" , "木" : "李" , "文" : "刘" };
for(key in aaa)
{var value = aaa[key];  // 每循环一次就能读到一个新的keyconsole.log(key, value);
}
// 输出多行:
// 弓 张
// 木 李
// 文 刘

其中
for…in… 是特定语法(意思:从中取得),与while一样也是一种循环控制语句。

先写入for,带上一个 变量名 来存储每次循环取得的键,
再写入in,带上一个要从中读取的 目标内容 (上例中是对象)。

当目标没有内容可再读取时,循环会自动结束。
在 Javascript 中,对象需要此特殊语法才能遍历到其成员。


本篇的练习题如下:

第1题
创建一个对象friends,包含你两个以上朋友的名字作为键,值为他们的年龄。
打印此字典的长度。
第2题
创建一个对象friends,包含你三个朋友的名字作为键,值为他们的年龄。
使用循环打印出每个朋友的名字。
第3题
创建一个对象box,包含你喜欢的三个食物作为键,值为它们的数量。
使用循环打印出每个食物的数量。

请认真完成所有练习题,勤加练习有助于快速提升你的编程能力。
更多练习题在 https://www.min2k.com/course/docs/web-client/object

相关文章:

网页前端开发之Javascript入门篇(9/9):对象

Javascript对象 什么是对象? 答:其概念跟 Python教程 的字典基本相似,虽然存有一些差异,不过对于目前的教程来讲可以忽略。 下面是对象的语法: var aaa {"弓" : "张","木" : "李",&…...

Oracle RAC IPC Send timeout detected问题分析处理

一、报错信息 今天在进行数据库巡检时,在集群节点1发现了IPC相关报错信息: 2024-10-10T10:22:06.84631708:00 IPC Receiver dump detected. Sender instance 2 Receiver pnum 277 ospid 377527 [oraclezxsszpt-sjkfwq1 (PPA6)], pser 124403 2024-10-1…...

QT 实现QMessageBox::about()信息自定义显示

这是我记录Qt学习过程的第四篇心得文章,主要是方便自己编写的应用程序显示“关于信息”,对QMessageBox::about()输入信息进行规范,可以设置应用程序名称,通过定义宏从pro文件获取应用程序版本号,以及编译程序的QT版本、…...

(C++进阶)C++20

目录 一、概述 二、新特性 1. 模块(Modules)功能 2. 概念(Concepts)功能 3. 范围(Ranges)功能 4. 协程(Coroutines)功能 5. 三路比较运算符(Spaceship Operator&a…...

【常用的安装破解版指令】MAC安装破解版软件显示文件损坏时

MAC安装破解版软件显示文件损坏时 复制以下命令粘贴到终端后 sudo xattr -rd com.apple.quarantine 打开Finder(访达),点击左侧的 应用程序,将应用拖进终端中,然后按键盘的回车键(return)&…...

【QT Quick】定时器和线程:定时器Timer

在现代用户界面开发中,动态更新内容、处理定时任务或异步任务是常见的需求,尤其在复杂应用中可能会遇到界面阻塞的问题。在 Qt Quick 中,定时器(Timer)和多线程是两种主要的解决方案,用于避免这种阻塞现象。…...

【NIO基础】NIO(非阻塞 I/O)和 IO(传统 I/O)的区别,以及 NIO 的三大组件详解

目录 1、NIO 2、NIO 和 IO 的区别 1. 阻塞 vs 非阻塞 2. 一个线程 vs 多个连接 3. 面向流 vs 面向缓冲 4. 多路复用 3、Channel & Buffer (1)Channel:双向通道 (2)Buffer:缓冲区 (3)ByteBuffer&#xff…...

HDLBits中文版,标准参考答案 | 3.1.3 Arithmetic Circuits | 算术电路

关注 望森FPGA 查看更多FPGA资讯 这是望森的第 10 期分享 作者 | 望森 来源 | 望森FPGA 目录 1 Half adder | 半加器 2 Full adder | 全加器 3 3-bit binary adder | 3位二进制加法器 4 Adder | 加法器 5 Signed addition overflow | 有符号数的加法溢出 6 100-bit bi…...

网络编程 websocket

1. HTTP 截至 2024 年,HTTP(HyperText Transfer Protocol)已经发展到 HTTP/3 版本。 各个版本的简介: HTTP/0.9(1991年): 最初的 HTTP 版本,非常简单,仅支持 GET 方法…...

【JDK17 | 5】Java 17 深入剖析:新的随机数生成器 API

引言 在 Java 17 中,新的随机数生成器 API 作为一个重要特性被引入,旨在提供更灵活和高效的随机数生成方案。新的 API 不仅支持多种生成算法,还改善了随机数生成的性能,适应了现代开发的需求。在本篇文章中,我们将深入…...

剪切走的照片:高效恢复与预防策略

一、剪切走的照片现象描述 在日常的数字生活中,照片作为记录生活点滴、工作成果的重要载体,其重要性不言而喻。然而,有时我们可能会遇到一种令人头疼的情况:原本打算通过剪切操作将照片移动到另一个位置,却意外地发现…...

基于XGBoost的结核分枝杆菌的耐药性预测研究【多种机器学习】

1. 绪论 目录 1. 绪论 1.1研究背景及意义 1.2国内外研究现状 1.2.1国内研究现状 1.2.2国外研究现状 1.3研究目的 2. 相关技术概念 2.1结核分枝杆菌的耐药性机制 2.2机器学习与系统发育法相结合 2.3XGBoost和随机森林算法的优势和应用 3. 模型设计 3.1数据准备与预…...

【C++差分数组】3229. 使数组等于目标数组所需的最少操作次数|2066

本文涉及知识点 C差分数组 LeetCode3229. 使数组等于目标数组所需的最少操作次数 给你两个长度相同的正整数数组 nums 和 target。 在一次操作中,你可以选择 nums 的任何子数组,并将该子数组内的每个元素的值增加或减少 1。 返回使 nums 数组变为 tar…...

浅谈PyTorch中的DP和DDP

目录 1. 引言2. PyTorch 数据并行(Data Parallel, DP)2.1 DP 的优缺点2.2 DP 实现代码示例 3. PyTorch 分布式数据并行(Distributed Data Parallel, DDP)3.1 DDP 的优缺点3.2 分布式基本概念3.3 DDP 的应用流程3.5 DDP 实现代码示…...

在Windows上利用谷歌浏览器进行视频会议和协作

随着远程工作和在线教育的普及,使用谷歌浏览器在Windows上进行视频会议和协作变得越来越常见。本文将为您提供一个详细的教程,教您如何在Windows上利用谷歌浏览器进行视频会议和协作,同时解决一些常见的问题。(本文由https://goog…...

VMware Fusion 13.6.1 发布下载,修复 4 个已知问题

VMware Fusion 13.6.1 发布下载,修复 4 个已知问题 VMware Fusion 13.6.1 for Mac - 领先的免费桌面虚拟化软件 适用于基于 Intel 处理器和搭载 Apple 芯片的 Mac 的桌面虚拟化软件 请访问原文链接:https://sysin.org/blog/vmware-fusion-13/ 查看最新…...

P9751 [CSP-J 2023] 旅游巴士

P 9751 P9751 P9751 部分分思路 题目要求时间必须是 k k k 的非负整数倍,所以想到了升维。这样就变成了一道分层图最短路的题目。用 BFS 算法可以拿到 A i 0 A_i0 Ai​0 的 35 35 35 分。 满分思路 其实部分分的思路已经很接近正解了,想要拿到满…...

【Linux】man手册安装使用

目录 man(manual,手册) 手册安装: 章节区分: 指令参数: 使用场景: 手册内容列表: 手册查看快捷键: 实例: 仍致谢:Linux常用命令大全(手册) – 真正好用的Linux命令在线查询网站 提供的命令查询 在开头先提醒一下:在 man 手册中退出的方法很简单…...

mysql学习教程,从入门到精通,SQL处理重复数据(39)

1、SQL处理重复数据 使用GROUP BY和HAVING子句删除重复数据(以SQL Server为例)”的背景和原理的详细解释: 1.1、背景 在数据库管理中,数据重复是一个常见的问题。重复数据可能由于多种原因产生,如数据录入错误、数据…...

mapbox解决wmts请求乱码问题

贴个群号 WebGIS学习交流群461555818,欢迎大家 事故现场 如图所示,wmts请求全是乱码,看起来像是将一个完整的请求拆成一个一个的字母了,而且控制台打印map.getStyle() 查看该source发现不出异常 解决办法 此类问题就是由于更…...

Allegro PCB Design GXL (legacy) - 动态网格铜的避让技巧

1. 动态网格铜的基础概念 在PCB设计中,铜皮处理是影响电路性能的关键环节。Allegro PCB Design GXL (legacy)作为业界常用的EDA工具,提供了静态铜和动态铜两种处理方式。静态网格铜就像一块固定形状的铁板,不会自动适应周围环境;而…...

Qwen3-ForcedAligner-0.6B实战:基于CNN的语音特征提取优化

Qwen3-ForcedAligner-0.6B实战:基于CNN的语音特征提取优化 如果你做过语音相关的项目,比如给视频加字幕、做语音分析,肯定遇到过这样的问题:模型识别出的文字,怎么才能和音频里的时间点对上号?这就是“强制…...

C#的readonly struct:不可变值类型的性能优势

在C#开发中,值类型的性能优化一直是开发者关注的焦点。readonly struct作为不可变值类型,不仅能够保证线程安全,还能带来显著的性能优势。本文将深入探讨readonly struct的设计原理及其在性能优化中的独特价值,帮助开发者更好地利…...

3个超实用步骤:用DS4Windows让PS手柄在Windows游戏中完美适配

3个超实用步骤:用DS4Windows让PS手柄在Windows游戏中完美适配 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows 还在为PS4/PS5手柄在Windows游戏中无法正常使用而困扰吗&#xf…...

Vue 3 双向绑定进阶:useModel与defineModel的实战对比与选型指南

1. Vue 3双向绑定技术演进 双向数据绑定一直是Vue框架的核心特性之一。在Vue 3.4版本中,团队引入了两个新的API:useModel和defineModel,它们为开发者提供了更灵活的数据绑定方案。这两个API虽然目的一致,但在使用场景和实现方式上…...

百川2-13B-4bits量化模型微基准测试:OpenClaw常用任务性能对比

百川2-13B-4bits量化模型微基准测试:OpenClaw常用任务性能对比 1. 测试背景与动机 上周在折腾OpenClaw自动化办公流程时,发现我的RTX 3090显卡在运行13B模型时显存频繁告警。这让我开始关注量化模型的实际表现——特别是当OpenClaw需要连续调用模型完成…...

10分钟掌握AI-Render:在Blender中玩转Stable Diffusion的终极指南

10分钟掌握AI-Render:在Blender中玩转Stable Diffusion的终极指南 【免费下载链接】AI-Render Stable Diffusion in Blender 项目地址: https://gitcode.com/gh_mirrors/ai/AI-Render 你是否想过,在Blender这个强大的3D创作软件中,直接…...

Tiled2Unity:解决Tiled地图与Unity引擎无缝集成的自动化转换方案

Tiled2Unity:解决Tiled地图与Unity引擎无缝集成的自动化转换方案 【免费下载链接】Tiled2Unity Export Tiled Map Editor (TMX) files into Unity 项目地址: https://gitcode.com/gh_mirrors/ti/Tiled2Unity Tiled2Unity是一款开源工具,核心功能是…...

从C语言转战工业PLC?CodeSys ST语言中的指针和引用,和你想的不太一样

从C语言到工业PLC:CodeSys ST语言中指针与引用的颠覆性设计 1. 当高级语言开发者遭遇工业控制内存模型 第一次在CodeSys ST语言中看到POINTER TO和REFERENCE TO语法时,许多从C/C转战工业自动化的开发者会下意识地松一口气——"终于遇到熟悉的概念了…...

MT5 Zero-Shot中文数据增强部署指南:Docker Hub官方镜像使用规范说明

MT5 Zero-Shot中文数据增强部署指南:Docker Hub官方镜像使用规范说明 1. 引言 你有没有遇到过这样的烦恼?手头的中文文本数据太少了,想训练一个模型,却发现数据量根本不够。或者,你有一批文案,想快速生成…...