了解JS数组元素及属性

news2025/4/7 4:55:58

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 1、定义数组并输出
  • 2、查询数组的长度
  • 3、访问数组的第一个元素
  • 4、访问数组中第一个元素的xxx属性
  • 5、从数组元素中提取ID并存储到搜索参数对象


提示:以下是本篇文章正文内容,下面案例可供参考

1、定义数组并输出

在这里插入图片描述

let abc = [{id:123,code:"abc"}];

这里定义了一个名为 abc 的数组,它包含一个对象。这个对象有两个属性:idcode

输出展示 abc 数组:

1、 abc
这一行代码表示访问数组 abc 中的第一个元素(索引为0)是一个对象。由于 abc 只有一个元素 {id: 123, code: 'abc'},所以结果就是:

0: {id: 123, code: 'abc'}

2、查询数组的长度

在这里插入图片描述
由于 abc 数组包含一个元素,abc.length 的值将为 1

let abc = [{id:123,code:"abc"}];
console.log(abc.length); // 输出: 1

这里的 abc.length 返回数组中元素的数量,即数组的长度。

在这个例子中,abc 只包含一个元素,所以 abc.length 的值为 1

3、访问数组的第一个元素

当输入 abc[0] 并执行时,此时正在访问数组 abc 中索引为0的元素
在这里插入图片描述
由于 abc 数组包含一个对象,这个对象具有 idcode 两个属性还有各自对应的值,因此输出将是这个对象本身:

{id: 123, code: 'abc'}

简单总结一下:

  • 数组定义let abc = [{id:123,code:"abc"}];
  • 访问元素abc[0] 返回数组中的第一个元素。
  • 输出{id: 123, code: 'abc'} 表示这个元素是一个具有 idcode 属性的对象。

4、访问数组中第一个元素的xxx属性

1、输入 abc[0].code 并执行时,访问数组 abc 中第一个元素的 code 属性
在这里插入图片描述

let abc = [{id:123,code:"abc"}];
console.log(abc[0].code); // 输出: "abc"

2、输入 abc[0].id 并执行时,访问数组 abc 中第一个元素的 id 属性
在这里插入图片描述

let abc = [{id:123,code:"abc"}];
console.log(abc[0].id); // 输出: 123

5、从数组元素中提取ID并存储到搜索参数对象

在这里插入图片描述
1、创建一个空的对象:

let searchParams = {};

2、从数组 abc 中获取第一个元素的 id 属性值,并赋给 searchParamsid 属性:

searchParams.id = abc[0].id;

这行代码访问数组 abc 中索引为0的元素,即数组的第一个元素,并获取该元素的 id 属性

由于数组 abc 包含一个对象 {id: 123, code: "abc"}abc[0].id 的值为 123。然后将这个值赋给 searchParams 对象的一个新属性 id

也就是说searchParams 现在是一个具有 id 属性的对象,其值为 123

3、输入 searchParams 并执行,执行后将看到 searchParams 对象的内容
在这里插入图片描述
由于之前设置了 searchParams.id = abc[0].id,那么 searchParams 应该包含一个 id 属性,其值是从 abc[0] 中获取的 id 值。

由于 abc[0].id 的值是 123,所以 searchParams 的输出应该是:

{id: 123}

也就是说 searchParams 现在是一个对象,其中包含一个名为 id 的属性,其值为 123

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2064421.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C++设计模式1:单例模式(懒汉模式和饿汉模式,以及多线程问题处理)

饿汉单例模式 程序还没有主动获取实例对象&#xff0c;该对象就产生了&#xff0c;也就是程序刚开始运行&#xff0c;这个对象就已经初始化了。 class Singleton { public:~Singleton(){std::cout << "~Singleton()" << std::endl;}static Singleton* …

KUKA KR C2 中文操作指南 详情见目录

KUKA KR C2 中文操作指南 详情见目录

Selenium + Python 自动化测试22(PO+数据驱动)

我们的目标是&#xff1a;按照这一套资料学习下来&#xff0c;大家可以独立完成自动化测试的任务。 上一篇我们讨论了PO模式和unittest框架结合起来使用。 本篇文章我们综合一下之前学习的内容&#xff0c;如先将PO模式、数据驱动思想和我们生成HTML报告融合起来&#xff0c;综…

​2024年AI新蓝海:三门生意如何借AI之力,开启变现新篇章

【导语】在这个日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;已不再是遥不可及的未来科技&#xff0c;而是正逐步渗透到我们生活的方方面面&#xff0c;成为推动产业升级的重要力量。你是否还在为传统行业的未来而忧虑&#xff1f;别担心&#xff0c;AI正以其…

Pandas DataFrame 数据转换处理和多条件查询

工作中需要处理一个比较大的数据&#xff0c;且当中需要分析的日期类型字段为字符串型&#xff0c;需要进行转换&#xff0c;获得一个新的字段用于时间统计。我们应用 datetime.datetime.strptime 函数进行转换。 数据读取与时间列补充代码如下&#xff1a; import pandas as…

原来ChatGPT是这么评价《黑神话:悟空》的啊?

《黑神话&#xff1a;悟空》一经上线便迅速吸引了全球的目光&#xff0c;成为了今日微博热搜榜上的焦点话题。作为中国首款现象级的中国3A大作&#xff0c;它的发布无疑引发了广泛的关注与讨论。 《黑神话&#xff1a;悟空》&#xff0c;这款3A国产游戏大作&#xff0c;由国内游…

根据状态的不同,显示不同的背景颜色

文章目录 前言HTML模板部分JavaScript部分注意&#xff1a;主要差异影响如何处理示例 总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 实现效果&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 根据给定的状态…

文件操作2(函数的专栏)

1、文件的打开和关闭 1.1文件指针 在缓冲文件系统中&#xff0c;关键的概念是“文件类型指针”&#xff0c;简称“文件指针”取名为FILE。 例如&#xff0c; VS2013编译环境提供的 stdio. h头文件中有以下的文件类型申明&#xff1a; struct _ iobuf { char *_ ptr; int _…

【YOLO5 项目实战】(6)YOLO5+StrongSORT 目标追踪

欢迎关注『youcans动手学模型』系列 本专栏内容和资源同步到 GitHub/youcans 【YOLO5 项目实战】&#xff08;1&#xff09;YOLO5 环境配置与检测 【YOLO5 项目实战】&#xff08;2&#xff09;使用自己的数据集训练目标检测模型 【YOLO5 项目实战】&#xff08;6&#xff09;Y…

数据库机器上停service360safe

发现有个数据库的负载较高&#xff0c;发现有360safe&#xff0c;就准备停了该服务再观察 [rootdb1 ~]# ps -ef |grep 360 root 970 1 0 15:12 ? 00:00:10 /opt/360safe/360entclient root 976 970 5 15:12 ? 00:18:42 /opt/360…

Linux之RabbitMQ集群部署

RabbitMQ 消息中间件 1、消息中间件 消息(message)&#xff1a; 指在服务之间传送的数据。可以是简单的文本消息&#xff0c;也可以是包含复杂的嵌入对象的消息 消息队列(message queue): 指用来存放消息的队列&#xff0c;一般采用先进先出的队列方式&#xff0c;即最先进入的…

关于springboot的异常处理以及源码分析(一)

一、什么是异常处理 1、文档定义 首先我们先来看springboot官方对于异常处理的定义。springboot异常处理 在文档的描述中&#xff0c;我们首先可以看到的一个介绍如下&#xff1a; By default, Spring Boot provides an /error mapping that handles all errors in a sensib…

优思学院|如何在30分钟内评审一家供应商?SQE必需知道的11点

在供应商评审中&#xff0c;特别是时间有限的情况下&#xff0c;SQE&#xff08;供应商质量工程师&#xff09;需要通过高效的观察和分析来快速评估供应商的能力。在《哈佛商业评论》中&#xff0c;R. Eugene Goodson 的一篇“Read a Plant—Fast”文章正好提供了一个极为实用的…

python实现指数平滑法进行时间序列预测

python实现指数平滑法进行时间序列预测 一、指数平滑法定义 1、指数平滑法是一种常用的时间序列预测算法,有一次、二次和三次平滑,通过加权系数来调整历史数据权重; 2、主要思想是:预测值是以前观测值的加权和,且对不同的数据给予不同的权数,新数据给予较大的权数,旧数…

基于x86 平台opencv的图像采集和seetaface6的人脸识别功能

目录 一、概述二、环境要求2.1 硬件环境2.2 软件环境三、开发流程3.1 编写测试3.2 配置资源文件3.2 验证功能一、概述 本文档是针对x86 平台opencv的图像采集和seetaface6的人脸识别功能,opencv通过读取本地图像,将采集的本地图像送给seetaface6的人脸识别模块从而实现人脸识…

FreeRTOS学习笔记(四)——延时函数,列表,软件定时器,低功耗模式,内存管理

FreeRTOS学习笔记&#xff08;四&#xff09;——延时函数&#xff0c;列表&#xff0c;软件定时器&#xff0c;低功耗模式&#xff0c;内存管理 文章目录 FreeRTOS学习笔记&#xff08;四&#xff09;——延时函数&#xff0c;列表&#xff0c;软件定时器&#xff0c;低功耗模…

尚硅谷Java面试题第四季-MySQL面试题

1.如何建立复合索引&#xff0c;一般加在哪些字段&#xff1f;建索引的理论依据或者经验 2.Innodb的行锁到底锁了什么? 结论&#xff1a; InnoDB的行锁&#xff0c;是通过锁住索引来实现的&#xff0c;如果加锁查询的时候没有使用到索引&#xff0c;会将整个聚簇索引都锁住&am…

【python报错已解决】`Traceback (most recent call last)`

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 你是否在运行Python程序时遇到了Traceback (most recent call last)的错误&#xff1f;这个错误通常表明你的程序中有一个…

为什么大负载通电瞬间电压跌落,前级MOS开关如何设计

文章目录 1.1 前言1.2 简单典型电路1.3 分析优劣性1.4 优化后的开关电路1.5 具体原理分析1.6 实验验证效果1.7 适用应用场景 1.1 前言 电子产品设计电路某负载需要断电省下或异常下电复位&#xff0c;这时候会考虑在负载供电前端增加一个开关对其进行供电做控制&#xff0c;典…

超声波模块HC_SR04(hal库)

超声波模块HC_SR04 原理 1.触发信号&#xff1a;拉高至少10us的高电平 2.回响信号处理&#xff1a;计算高电平时长 3.计算距离&#xff1a;时间*速度&#xff08;声速&#xff09;/2&#xff08;注意单位问题&#xff09; 代码实现 方法1.下拉输入 配置 用于延时微秒us和…