【前端】如何像取数组一样地取对象

RogerQianpeng

已于 2023-07-25 20:06:55 修改

阅读量1.6k

点赞数

分类专栏：前端文章标签：前端 javascript 开发语言 vue.js

于 2023-07-25 20:06:48 首次发布

本文链接：https://blog.csdn.net/RogerQianpeng/article/details/131925178

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

文章介绍了如何通过Object.keys方法结合索引访问JavaScript对象中的属性，特别是在处理动态获取对象属性时的场景。例如，利用info[Object.keys(info)[indexAsYouWant]]可以实现根据给定的索引获取对象内的值。这种方法适用于具有预定义键值对应不同业务场景的情况，如在错误提示、状态指示等场景中，每个键包含不同的文本、图标、颜色等信息。

摘要由CSDN通过智能技术生成

目标

例如 a = ['a', 'b', 'c']，可以通过a[0]得到'a'
那么info = { success: { text: 'yes'}, warning: { text: 'wrong' , url: '/home'} }，能不能通过类似info[0]的方式对应到{text:'yes'}呢？当然是可以的，

实现

根据输入的indexAsYouWant取出对象中对应的值

infoResult = this.info[Object.keys(this.info)[indexAsYouWant]]

说明

ES5 的Object.keys方法，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable ）属性的键名。
比如：

var arr = [a:1, b:2];
console.log(Object.keys(arr)); // console: ["a", "b"]

然后就ok了

应用

比如获得的场景值是0,1,2,3，对应default，success，fail，special的业务场景，每种场景有不同的提示文字、icon、主题色、按钮显示、事件
如果合适的话，可以考虑用类似下面之类的方式来处理

info = { 
  default: {
    text: 'default', 
    button:false, 
    color: '#3D9EE9', 
    icon:'underway',
    func: this.defaultFunc
  }, 
  success: { 
    text: 'yes',
    func: ()=>{
      console.log('success')
    }
  }, 
  warning: { 
    text: 'wrong' , 
    url: '/home'
  } 
}