当前位置: 首页 > 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发现不出异常 解决办法 此类问题就是由于更…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战:腾讯云IM群组成员管理(增删改查) 一、前言 在社交类App开发中,群组成员管理是核心功能之一。本文将基于UniApp框架,结合腾讯云IM SDK,详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage)&#xff1a…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

Visual Studio Code 扩展

Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后&#xff0c;命令 changeCase.commands 可预览转换效果 EmmyLua…...