JavaScript面试数组index和对象key问题详解

 更新时间:2022年12月22日 14:25:40   作者:qb  
这篇文章主要为大家介绍了JavaScript面试数组index和对象key问题详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

面试题一:

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 // 函数

打印结果:

可以看出,对象赋值的时候,如果key值不是字符串,会将其转换成字符串。

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

总结

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

以上就是JavaScript面试数组index和对象key问题详解的详细内容,更多关于JavaScript数组index对象key的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序 require机制详解及实例代码

    微信小程序 require机制详解及实例代码

    这篇文章主要介绍了微信小程序 require机制详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • 前端框架arco table源码遇到的问题解析

    前端框架arco table源码遇到的问题解析

    这篇文章主要为大家介绍了前端框架arco table源码遇到的问题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • 文本加密解密

    文本加密解密

    文本加密解密...
    2006-06-06
  • TypeScript遍历对象属性的问题

    TypeScript遍历对象属性的问题

    这篇文章主要介绍了TypeScript遍历对象属性的问题,文章围绕TypeScript遍历对象属性的相关资料展开详细内容,需要的朋友可以参考一下
    2021-11-11
  • TypeScript 内置高级类型编程示例

    TypeScript 内置高级类型编程示例

    这篇文章主要为大家介绍了TypeScript 内置高级类型编程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue axios请求超时的正确处理方法

    vue axios请求超时的正确处理方法

    这篇文章主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法,需要的朋友可以参考下
    2018-04-04
  • 一文了解什么是TypeScript?

    一文了解什么是TypeScript?

    这篇文章主要介绍了什么是TypeScript,TypeScript是JavaScript的超集,它可以编译成纯JavaScript代码,TypeScript可以运行在浏览器环境、Node.js环境或者ECMAScript3或者更高的JavaScript的引擎中,下面我们就进入文章一起学习TypeScript的详细内容吧
    2021-12-12
  • dotenv源码解读从.env文件中读取环境变量

    dotenv源码解读从.env文件中读取环境变量

    这篇文章主要为大家介绍了dotenv源码解读从.env文件中读取环境变量示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • JS中的四种数据类型判断方法

    JS中的四种数据类型判断方法

    js有多种数据类型(Number(数值)、String(字符串)、Boolean(布尔值)、Null、Undefined、Symbol、Object、函数等),在开发过程中难免需要判断数据类型,本文总结了四种判断方法给大家分享,需要的朋友可以参考一下
    2021-11-11
  • 微信小程序 picker 组件详解及简单实例

    微信小程序 picker 组件详解及简单实例

    这篇文章主要介绍了微信小程序 picker 组件详解及简单实例的相关资料,需要的朋友可以参考下
    2017-01-01

最新评论