知识回调

知识专栏 专栏链接 JavaScript知识专栏 https://blog.csdn.net/xsl_hr/category_12024214.html?spm=1001.2014.3001.5482

有关JavaScript的相关知识可以前往JavaScript知识专栏查看复习！！

场景复现

在后台管理系统的项目开发中   
    
    
    ，对于后端接口返回的数据进行处理是一件很重要的事情    
    
    
。有时候返回的值是json格式的数据


     


     


     


，这个时候我们就需要通过键来获取值 




 




 




，因此本期文章以此为主线   

   

   

   ，详细介绍三种方法获取数组对象里面的键(key)和值(value) 对象键值    


     


     


    。

方法一

： 使用 Object.keys() 方法获取 javascript 对象的键

方法二

：使用 Object.entries(obj) 方法获取 javascript 对象的键

方法三：使用for 循环获取 javascript 对象的 key

三种方法获取数组对象里的键值

javascript 对象是键值对的集合




 




 




 


。我们需要一个键来从 javascript 对象中获取它的值   

   

   

。键值对广泛用于客户端-服务器通信和 JavaScript 编程     

     

     

   。我们知道从 JSON 对象中检索一个值

     

     

     

，只要我们有它的键




  




  




  

。但是如果我们没有 key 名称怎么办？

1   
    
    
    、Object.keys()

Object.keys() 函数返回一个包含 javascript 对象键的数组
  


  


  


。

我们将 javascript 对象作为参数传递给 Object.keys() 函数     
     
     
  。

输出数组包含的键的顺序与它们在原始 javascript 对象中的顺序相同 




   




   




   
。

如果我们将数组传递给 Object.keys()
  




  




  




，它将返回数组索引

作为输出

 



 



 



。

并且参数对象带有索引  


  


  


  ，那么 Object.keys() 将返回这些索引的数组                。 var fruitsArr1 = ["Apple", "Orange", "Mango", "Banana"]; var fruitsObj2 = { 0: "Apple", 4: "Orange", 2: "Mango", 3: "Banana"}; var fruitsObj3 = { "id": "1", "name": "mango", "color": "yellow"}; console.log(Object.keys(fruitsArr1)); console.log(Object.keys(fruitsObj2)); console.log(Object.keys(fruitsObj3)); ["0", "1", "2", "3"] ["0", "2", "3", "4"] ["id", "name", "color"] 如果键是数字 
     
     
     
，Object.keys() 函数将按排序顺序返回数字键的数组  




    




    




    。 fruitsObj2 具有编号为 0


     


     


     


、4 




 




 




、2   

   

   

   、3 的键

















。但是当我们应用 Object.Keys() 函数时

   




   




   




，它返回的键是 [“0   
    
    
    ”, “2


     


     


     


”, “3 




 




 




”, “4   

   

   

   ”] 



 



 



 ，按排序顺序排列               。键值仍将保持与原始 javascript 对象相同的值映射   



     



     



     。 例如                 ，fruitsObj2 包含 4: “Orange

     

     

     

” 和 2: “Mango
  




  




  




”


    




    




    




，但 Object.keys(fruitsObj2) 将它们的顺序返回为 “2  


  


  


  ”, “4 
     
     
     
”

















。 如果我们是 console.log 他们在键 2 和 4 上的值














，我们会得到正确的值作为输出    
    
    
。 因此                  ，该函数没有修改实际键值映射中的任何内容


     



     



     



，即使 Object.keys 按排序顺序返回数组或对象的数字键    


     


     


    。 console.log(fruitsObj2[2]); console.log(fruitsObj2[4]); Mango Orange

2

     

     

     

、Object.entries(obj)

Object.entries(obj) 方法多种多样














，比 Object.keys() 函数更灵活




 




 




 


。

它将整个对象拆分为小数组   

   

   

。每个数组由 [key, value] 形式的键值对组成     

     

     

   。

使用 Object.keys()   
    
    
    ，我们只得到一个对象的键


     


     


     


，但是使用 Object.entries(obj) 




 




 




，我们可以得到一个对象中的所有条目   

   

   

   ，包括 keys 和它们的 values.

Object.entries(obj) 不是常用的方法




  




  




  

。在大多数情况下

     

     

     

，我们需要从对象中获取键
  


  


  


。借助 keys可以轻松获得相应的值     
     
     
  。 语法：Object.entries(object) 参数：与 Object.keys() 方法相同
  




  




  




，Object.entries(obj) 接受javascript object作为参数 




   




   




   
。 返回值

：

Object.entries(obj) 返回析构为数组的键值对

 



 



 



。

返回类型将是一个数组数组  


  


  


  ，每个子数组包含两个元素：键和值                。

类似于 [[key1, value1], [key2, value2], [key3, value3] … ]  




    




    




    。

该函数保留对象属性的顺序

















。在幕后的实现中 
     
     
     
，键值对是通过迭代对象属性形成的               。我们使用 JSON.stringify() 来获取函数输出值的可读字符串版本   



     



     



     。

var fruitsObj3 = { "id": "1", "name": "mango", "color": "yellow"}; console.log(JSON.stringify(Object.entries(fruitsObj3))); "[["id","1"],["name","mango"],["color","yellow"]]"

我们可以以另一种方式使用 Object.entries()

















。遍历 javascript 对象并记录属性键及其值    
    
    
。

for (const [key, value] of Object.entries(fruitsObj3)) { console.log(`${key}: ${value}`); } id: 1 name: mango color: yellow

3
  




  




  




、for 循环【常用】

我们可以像使用 for-in 组合遍历数组一样遍历任何 javascript 对象    


     


     


    。它遍历每个参数

   




   




   




，其中i（迭代器）保存对象的 key 



 



 



 ，而 object[i] 保存与对象中的 key 对应的值




 




 




 


。

var obj = { "id": "1", "name": "mango", "color": "green"}; for(let i in obj) { console.log(i); // key console.log(obj[i]); // value against the key } id 1 name mango color green 如果我们只想从对象中提取键                 ，我们可以使用迭代器值   

   

   

。我们可以在上面代码中的 for(let i in obj) 块中使用 console.log(i)     

     

     

   。 如果我们在 javascript 对象中有嵌套结构


    




    




    




，则可以使用 for(let i in obj) 来获取键




  




  




  

。但是














，嵌套结构的值将是结构本身
  


  


  


。 var a = { "id": "1", "name": "mango", "color": {"name": "yellow", "appearance": "bright"}}; for(let i in a){ console.log(i); console.log(a[i]); } id 1 name mango color {name: "yellow", appearance: "bright"}

以上就是运用JavaScript获取数组对象里面的键和值的三种方法                  ，一般常用的是循环获取键值     
     
     
  。

下期文章将介绍vue antd checkbox多选框限制选择个数~

感兴趣的小伙伴可以订阅本专栏


     



     



     



，方便后续了解学习~

觉得这篇文章有用的小伙伴们可以点赞➕收藏➕关注哦~