杂谈:数组index问题和对象key问题

news2024/12/24 11:38:52

面试题一:

var arr = [1, 2, 3, 4] 

问:arr[1] = ?; arr['1'] = ?答:arr[1] = 2; arr['1'] = 2

这里可以再分为两个问题:

1、数组赋值

var arr = [1, 2, 3, 4]

arr[1] = 10; // 数字场景
arr['10'] = 1; // 字符串场景
arr['a'] = 1; // 字符串场景
arr[true] = 2; // 布尔值
arr[undefined] = 3; // undefined
arr[null] = 4; // null
arr[Symbol] = 5; // Symbol
arr[new Object()] = 6; // 对象
arr[function(){}] = 7 // 函数 

打印结果:

结果说明,修改数组的值的过程中,下标index如果是数字,那么,就是正常的数组赋值。

如果是非数字,那么会将其转换为字符串,其实数组也是对象,那么,非数字就相当于给对象arrkey键定义的value值。

2、数组取值

通过上述方式先为数组赋值,然后再通过以下方式取值:

console.log(arr[1]); // 10
console.log(arr['10']); // 1
console.log(arr[true]); // 2
console.log(arr[undefined]); //3
console.log(arr[null]); // 4
console.log(arr[Symbol]); // 5
console.log(arr[new Object()]); // 6
console.log(arr[function(){}]); // 7 

由打印的结果可以看出,数组在取值时索引是数字,按照数组取值方式获取。

如果索引位置是非数字,会将其转换成字符串,通过对象的方式取值。

所以题目中的arr['1']会转换成arr[1],最终获取到的值为2

面试题二:

var obj = {0: 1,1: 2,2: 3
} 

问:obj[1] = ?; obj['1'] = ?答:obj[1] = 2; obj['1'] = 2

这里也可以再分为两个问题:

1、对象赋值

var obj = {0: 1,1: 2,2: 3
}

obj[1] = 10; // 数字场景
obj['10'] = 1; // 字符串场景
obj['a'] = 1; // 字符串场景
obj[true] = 2; // 布尔值
obj[undefined] = 3; // undefined
obj[null] = 4; // null
obj[Symbol] = 5; // Symbol
obj[new Object()] = 6; // 对象
obj[function () {}] = 7 // 函数 

打印结果:

2、对象取值

通过上述方式先为对象赋值,然后再通过以下方式取值:

console.log(arr[1]); // 10
console.log(arr['10']); // 1
console.log(arr[true]); // 2
console.log(arr[undefined]); //3
console.log(arr[null]); // 4
console.log(arr[Symbol]); // 5
console.log(arr[new Object()]); // 6
console.log(arr[function(){}]); // 7 

由打印的结果可以看出,对象在取值时,如果当前key值不是字符串,会将其转换成字符串,再取值。

所以题目中的arr[1]会转换成arr['1'],最终获取到的值为2

总结

对象的下标如果不是字符串,会将其先转换成字符串,再去求值。数组的下标如果不是数字,先将其尝试转成数字去取值;如果转不成数字,则会利用数组也是对象的特点,将其转换成字符串,再去取值。

最后

最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。



有需要的小伙伴,可以点击下方卡片领取,无偿分享

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

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

相关文章

索莫菲模型的一些理解 Smomerfeld Model

如何解释传统热容算出来的数值与量子模型下的区别? 因为只有费米能附近的电子才能够进行移动,这个是问题的差别所在 我们下面就来介绍如何求费米能(费米能的计算) 既然费米能附近的电子很重要,那么附近的电子有多少很…

语义分割前储知识

CNN中的Layers 除了正向传播计算loss,反向传播更新parameters,我们还需要知道参数是如何计算的,这个很重要。 我们这里介绍几个在deep learning中经常用到的几个层,dense layer(全连接层),con…

Redis源码---有序集合为何能同时支持点查询和范围查询

目录 前言 Sorted Set 基本结构 跳表的设计与实现 跳表数据结构 跳表结点查询 跳表结点层数设置 哈希表和跳表的组合使用 前言 有序集合(Sorted Set)是 Redis 中一种重要的数据类型,它本身是集合类型,同时也可以支持集合中…

记一次Nodejs减低npm版本的踩坑日记

使用了npm install -g npm6.4.1指令之后,把npm版本减低了,让后悲催的就来了。 由于npm 6.4.1 已经过时,导致运行npm时出现 npm does not support Node.js v18.14.2 版本不兼容问题 升级npm版本,npm install -g npmlatest 没用还是…

DM-VIO论文翻译

简介 DM-VIO: Delayed Marginalization Visual-Inertial Odometry DM-VIO: 延迟边缘化惯性视觉里程计 花了两天时间捏着鼻子把这篇论文翻译完了,很多术语和状态的表达方式可能是和这个团队以前的工作DSO以及VI-DSO保持了一致,所以看起来很是费劲&#…

STM32开发(17)----CubeMX配置CRC

CubeMX配置CRC前言一、什么是CRC?二、实验过程1.STM32CubeMX配置2.代码实现重载printf3.实验结果总结前言 本章介绍使用STM32CubeMX对CRC进行配置的方法,CRC的目的是保证数据的完整性,所有的STM32芯片都内置了一个硬件的CRC计算模块&#xf…

指针的进阶【下篇】

文章目录📀8.指向函数指针数组的指针📀9.回调函数📀8.指向函数指针数组的指针 🌰请看代码与注释👇 int Add(int x, int y) {return x y; } int Sub(int x, int y) {return x - y; } int main() {int (*pf)(int, int…

T3 出行云原生容器化平台实践

作者:林勇,就职于南京领行科技股份有限公司,担任云原生负责人,也是公司容器化项目的负责人。主要负责 T3 出行云原生生态相关的所有工作,如服务容器化、多 Kubernetes 集群建设、应用混部、降本增效、云原生可观测性基…

2023年中小企业实施智能制造的建议

智能制造的载体是制造系统,制造系统从微观到宏观有不同的层次,主要包括制造装备、制造单元、制造车间(工厂)、制造企业和企业生态等。随着智能制造的深入推进,未来智能制造将向以下五个方向发展。 (一&…

FPGA采集AD7606全网最细讲解 提供串行和并行2套工程源码和技术支持

目录1、前言2、AD7606数据手册解读输入信号采集范围输出模式选择过采样率设置3、AD7606串行输出采集4、AD7606并行输出采集5、vivado仿真6、上板调试验证7、福利:工程代码的获取1、前言 AD7606是一款非常受欢迎的AD芯片,因为他支持8通道同时采集数据&am…

CFT Show 信息收集篇

CFT Show 信息收集篇1.CFT Show 信息收集篇1.1.WEB-11.1.1.打开靶场1.1.2.寻找Flag1.2.WEB-21.2.1.打开靶场1.2.2.寻找Flag1.3.WEB-31.3.1.打开靶场1.3.2.寻找Flag1.3.2.1.F12查看器1.3.2.2.查看源码1.3.2.3.抓包1.4.WEB-41.4.1.打开靶场1.4.2.寻找Flag1.4.2.1.robots介绍1.4.2…

10个黑客基础教程!简单有效

如果你的电脑运行缓慢,请使用下面介绍的方法来帮助加速、优化和提高电脑的性能。 1.关闭启动时自动运行的应用程序 计算机上安装的许多应用程序都可以将自己配置为在启动期间自动启动并继续在后台运行,但是,如果不是每天都使用这些应用程序…

基于vscode创建SpringBoot项目,连接postgresql数据库 2 更简单

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 3、基于vscode开发vue项目的详细步骤教程_水w的博客-CSDN博客 4、基于vscode开发vue项目的详细步骤教程 2 第三方图标库FontAw…

Spark RDD持久化

RDD Cache缓存 RDD通过Cache或者Persist方法将前面的计算结果缓存,默认情况下会把数据以序列化的形式缓存在JVM的堆内存中。但是并不是这两个方法被调用时立即缓存,而是触发后面的action时,该RDD将会被缓存在计算节点的内存中,并供…

杂记——14.git在idea上的使用及其实际开发介绍

这篇文章我们来讲一下git在idea上的使用,以及在实际开发过程中各个分支的使用及其具体的流程 目录 1.git在idea上的使用 1.1 idea上的git提交 1.2 idea上的分支切换 2.git在实际运用时的分支及其流程 2.1分支介绍 2.2具体流程 3.小结 1.git在idea上的使用 …

GraalVM-云原生时代的JVM(Java)

文章目录一、GraalVM是什么?二、GraalVM有哪些特点?2.1、高性能2.2、多语言支持2.3、互操作性2.4、安全性三、GraalVM的应用效果3.1、提高性能3.2、简化开发3.3、降低成本3.4、节省资源3.5、支持云环境四、使用GraalVM编译springboot应用程序4.1、下载并…

网络应用之表单提交

表单提交学习目标能够知道表单的提交方式能够知道表单中action属性的作用1. 表单属性设置<form>标签 表示表单标签&#xff0c;定义整体的表单区域action属性 设置表单数据提交地址method属性 设置表单提交的方式&#xff0c;一般有“GET”方式和“POST”方式, 不区分大小…

嵌入式之ubuntu终端操作与shell常用命令详解

目录 文件和目录列表 基本列表功能 显示列表长度 过滤输出列表 浏览文件系统 Linux 文件系统 遍历目录 处理文件 创建文件 复制文件 制表键自动补全 重命名文件 删除文件 处理目录 创建目录 删除目录 ​编辑其他常用命令与操作 Uname命令 clear命令 返回上一级命令 显…

Netty学习(一):Netty概述

一、原生NIO存在的问题 NIO 的类库和API繁杂&#xff0c;使用麻烦:需要熟练掌握Selector、ServerSocketChannel、SocketChannel、ByteBuffer等。需要具备其他的额外技能:要熟悉Java 多线程编程&#xff0c;因为NIO编程涉及到Reactor 模式&#xff0c;你必须对多线程和网络编程…

buu刷题(第一周)

目录 [DDCTF 2019]homebrew event loop action:trigger_event%23;action:buy;5%23action:get_flag; [CISCN2019 华东南赛区]Web4 [RootersCTF2019]babyWeb [GWCTF 2019]mypassword [NESTCTF 2019]Love Math 2 [BSidesCF 2019]Pick Tac Toe [RootersCTF2019]ImgXweb [SW…