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

目录
  • 面试题一：
    • 1、数组赋值
    • 2、数组取值
  • 面试题二：
    • 1、对象赋值
    • 2、对象取值
  • 总结

面试题一：

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的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • javascript中indexOf技术详解

    JavaScript提供了几种技术,来在字符串中搜索一个单词.数字或其他的一串字符.搜索可能很方便,例如,如果你想要知道访问者使用哪种Web浏览器来浏览你的站点.每个Web浏览器在一个字符串中标识关于自己的信息,该字符串包含了很多不同的统计数据.可以通过在一个Web页面中添加下面这段JavaScript,并且在Web浏览器预览,从而看到这个字符串: <script> alert(navigator.userAgent): </script> Navigator是一个Web浏览器对象

  • JsRender for index循环索引用法详解

    本文实例讲述了JsRender for index循环索引用.分享给大家供大家参考.具体分析如下: JsRedner和JsViews(JsViews是再JsRender基础上的进一步封装)被称为下一代的Jquery模板,官方地址: https://github.com/BorisMoore/jsrender; https://github.com/BorisMoore/jsviews. 循环是模版引擎必不可少的一部分,而说起循环,会引出一个至关重要的因素:索引. 所谓索引,即循环次数,通过索引,

  • js如何获取对象在数组中的index

    目录 获取对象在数组中的index 数组的indexOf()方法 获取对象在数组中的index 需求:数组中的元素是对象,需要获取对象在数组中的index 方法:使用findIndex方法 原数据: const  array = [     {         id:1,         name:'张xx'     },     {         id:2,         name:'王xx'     } ] 方法: const index = array.findIndex(functi

  • JavaScript 不支持 indexof 该如何解决

    indexOf() 方法定义和用法 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置. 该方法将从头到尾地检索字符串 stringObject,看它是否含有子串 searchvalue.开始检索的位置在字符串的 fromindex 处或字符串的开头(没有指定 fromindex 时).如果找到一个 searchvalue,则返回 searchvalue 的第一次出现的位置. stringObject 中的字符位置是从 0 开始的. 如果在数组中没找到字符串则返回 -1.

  • Vue.js 利用v-for中的index值实现隔行变色

    首先定义好样式,利用v-for中的index值,然后绑定样式来实现隔行变色效果. 以下为完整代码,很简单,但也是个技巧. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&

  • Vuejs在v-for中,利用index来对第一项添加class的方法

    (1)在v-for中,利用index来对第一项添加class 在CODE上查看代码片派生到我的代码片 <a class="list-group-item" :class="{'active':!index}" v-for="(i,index) in announcement"> index来源于v-for,i表示遍历的数组的元素,index表示索引. 由于index从0开始,因此如果要指定第一项有active这个类,那么就用v-bin

  • JavaScript基于扩展String实现替换字符串中index处字符的方法

    JavaScript基于扩展String实现替换字符串中index处字符的方法

    本文实例讲述了JavaScript基于扩展String实现替换字符串中index处字符的方法.分享给大家供大家参考,具体如下: 核心代码: String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.length-1-n); } 用法示例: <!DOCTYPE html> <html lang="en"> <head&g

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

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

    目录 面试题一: 1.数组赋值 2.数组取值 面试题二: 1.对象赋值 2.对象取值 总结 面试题一: 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[t

  • JavaScript 中有关数组对象的方法(详解)

    JS 处理数组多种方法 js 中的数据类型分为两大类:原始类型和对象类型. 原始类型包括:数值.字符串.布尔值.null.undefined 对象类型包括:对象即是属性的集合,当然这里又两个特殊的对象----函数(js中的一等对象).数组(键值的有序集合). 数组元素的添加 arrayObj.push([item1 [item2 [. . . [itemN ]]]]); 将一个或多个新元素添加到数组结尾,并返回数组新长度 arrayObj.unshift([item1 [item2 [. . .

  • javascript中数组（Array)对象和字符串（String)对象的常用方法总结

    本文实例总结了javascript中数组(Array)对象和字符串(String)对象的常用方法.分享给大家供大家参考,具体如下: 综述:笔者经常将数组的方法和字符串的方法混淆,这里写篇日志,做个区分 1.字符串对象 String是JavaScript中的五种基本类型之一. (1)字符串对象的创建 例1: var str="Hello world"; 或者 var str=new String("Hello world") (2)charAt()方法 charAt(

  • Javascript Object对象类型使用详解

    目录 1. 生成方法 2. 操作属性 2.1 读取 2.2 赋值 2.3 删除 2.4 遍历 2.5 判断属性是否存在 3. with 语句 总结 1. 生成方法 对象是javaScript中的一种数据类型,它是key-value的合集,是无序的 const obj = { name: 'ian',age: 21}; //key使用变量 const gender = 'gender'; const obj = { [gender]: 'male'}; 对象的key必须符合标识符的规则,写的时候k

  • JavaScript中子对象访问父对象的方式详解

    在传统面向对象的编程语言里,都会提供一种子类访问父类的特殊语法,引文我们在实现子类方法往往需要父类方法的额外辅助.在这种情况下,子类通常会调用父类中的同名方法,最终以便完成工作. javascript虽然没有类似上述的特殊语法,但我们可以造一个啊! function her(){}; her.prototype.name = 'Anna'; her.prototype.toString = function(){ var const = this.constructor; return cons

  • vue更改数组中的值实例代码详解

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n

  • JavaScript展开运算符和剩余运算符的区别详解

    目录 什么是剩余运算符? 剩余运算符在JavaScript函数中是如何工作的? 注意!不能在包含剩余参数的函数体中使用"use strict" 剩余运算符在参数解构中是如何工作的? JavaScript arguments和剩余参数之间有哪些区别? 什么是展开运算符以及它在JavaScript中是如何工作的? 有关展开运算符我们需要知道的 1. 展开运算符不能展开对象字面量的值 2. 展开运算符不克隆相同的属性 3. 注意展开运算符在包含非原语的对象中是何如工作的 如果myName数组

  • JavaScript实现事件总线(Event Bus)的方法详解

    JavaScript实现事件总线(Event Bus)的方法详解

    目录 介绍 原理 分析 进阶 1. 如何在发送消息时传递参数 2. 订阅后如何取消订阅 3. 如何只订阅一次 4. 如何清除某个事件或者所有事件 5. TypeScript 版本 6. 单例模式 总结 介绍 Event Bus 事件总线,通常作为多个模块间的通信机制,相当于一个事件管理中心,一个模块发送消息,其它模块接受消息,就达到了通信的作用. 比如,Vue 组件间的数据传递可以使用一个 Event Bus 来通信,也可以用作微内核插件系统中的插件和核心通信. 原理 Event Bus 本质上

  • 用Newtonsoft将json串转为对象的方法(详解)

    首先,将json串转为一个JObject对象: JObject jo = (JObject)JsonConvert.DeserializeObject(CurrentSelectedItemReq); 这个JObject是一个"值对"类型,比如说我们的json串是这样: { "rows":[ [ {"NumIid":"001"}, {"PicUrl":"xxx.png"}, {"

  • 利用OpenCV实现YOLO对象检测方法详解

    利用OpenCV实现YOLO对象检测方法详解

    目录 前言 什么是YOLO物体检测器? 项目结构 检测图像 检测视频 前言 本文将教你如何使用YOLOV3对象检测器.OpenCV和Python实现对图像和视频流的检测.用到的文件有yolov3.weights.yolov3.cfg.coco.names,这三个文件的github链接如下: GitHub - pjreddie/darknet: Convolutional Neural Networks https://pjreddie.com/media/files/yolov3.weights

随机推荐