网页前端开发之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ÿ…...
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 Ai0 的 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发现不出异常 解决办法 此类问题就是由于更…...
在软件开发中正确使用MySQL日期时间类型的深度解析
在日常软件开发场景中,时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志,到供应链系统的物流节点时间戳,时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库,其日期时间类型的…...
装饰模式(Decorator Pattern)重构java邮件发奖系统实战
前言 现在我们有个如下的需求,设计一个邮件发奖的小系统, 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
