如何在JavaScript中将Object{}转换为键值对的Array[]?

任务是使用JavaScript将Object{}转换为键值对的Array[]。

介绍:JavaScript中的对象是最重要的数据类型, 它构成了现代JavaScript的基础。这些对象与JavaScript的原始数据类型(数字, 字符串, 布尔值, 空值, 未定义和符号)有很大不同。对象更加复杂, 每个对象可以包含这些原始数据类型以及参考数据类型的任意组合, 而数组是用于存储不同元素的单个变量。当我们要存储元素列表并通过单个变量访问它们时, 通常使用它。

我们可以使用以下讨论的方法将Object {}转换为键值对的Array []:

方法1:在这个方法中,我们将使用Object.keys()map()来实现这一点。

方法:通过使用Object.keys(), 我们从Object中提取键, 然后将此键传递给map()函数, 该函数将键和对应的值映射为数组, 如以下示例中所述。

语法如下:

Object.keys(obj)

参数:

obj:这是要返回其可枚举属性的对象。

map(function callback(currentValue[, index[, array]]){
    // Return element for new_array
}

参数:

callback:产生新数组元素的函数

例子:

<script> 
     // An Object
     var obj = { "1" : 5, "2" : 7, "3" : 0, "4" : 0, "5" : 0 };
      
     // Using Object.keys() and map() function
     // to convert convert an Object {} to an 
     // Array [] of key-value pairs
  
     var result = Object.keys(obj).map( function (key) {
          
         // Using Number() to convert key to number type
         // Using obj[key] to retrieve key value
         return [Number(key), obj[key]];
     });
      
     // Printing values
     for ( var i = 0; i < result.length; i++) {
         for ( var z = 0; z < result[i].length; z++) {
             document.write(result[i][z] + " " );
         }
         document.write( "</br>" );
     }
  
</script>

输出如下:

1 5
2 7
3 0
4 0
5 0

方法2:在这个方法中,我们将使用Object.entries()来实现这一点。

方法:我们将使用JavaScript中提供的Object.entries()。 Object.entries()方法用于返回一个数组, 该数组由作为参数传递的对象的可枚举属性[key, value]对组成。属性的顺序与手动遍历对象的属性值所给出的顺序相同。

语法如下:

Object.entries(obj)

参数:

obj:它是要返回其可枚举的自身属性[key, value]对的对象。

例子:

<script> 
     // An Object
     var obj = { "1" : 500, "2" : 15, "5" : 4, "4" : 480, "10" : 87 };
      
     // Using Object.entries() function
     // to convert convert an Object {} to an 
     // Array [] of key-value pairs
     var result = Object.entries(obj);
      
     // Printing values
     for ( var i = 0; i < result.length; i++) {
         for ( var z = 0; z < result[i].length; z++) {
             document.write(result[i][z] + " " );
         }
         document.write( "</br>" );
     }
  
</script>

输出如下:

1 500
2 15
4 480
5 4
10 87

更多前端开发相关内容请参考:lsbin - IT开发技术https://www.lsbin.com/

查看以下更多JavaScript相关的内容:

猜你喜欢

转载自blog.csdn.net/u014240783/article/details/115310384