JavaScript中数组索引与对象键的类型转换机制解析
本文深入解析JavaScript中数组与对象在访问和赋值时，对非标准索引（如数字、布尔值、字符串）的处理逻辑。通过代码示例说明，数组在赋值时若下标非数字，会将其转为字符串作为对象属性；取值时同理。对象则统一将非字符串键转换为字符串。理解这一机制有助于避免前端开发中的常见陷阱。
面试题一：
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为数字，则执行常规数组赋值操作。
若下标为非数字，则将其转换为字符串；鉴于数组本质也是对象，非数字下标相当于为对象arr的key键定义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的资料请关注本站其它相关文章！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38