对象转数组详解

一、基本概念

对象是JavaScript中很常见的数据类型，它由一组无序的键值对组成，每个键值对都是由键（字符串）和值（任何JavaScript数据类型）组成的。在JavaScript中，我们可以使用Object.keys()和Object.values()方法来分别获取一个对象的所有键和值。而对象转数组的操作，通常指将一个对象转为一个由键值对组成的数组。

对象转数组是一项非常基础的操作，但在实际的开发中非常常见。比如我们需要将从后端获取的数据转换为表格展示，此时我们需要将数据转换为数组，再根据表格的格式展示。又比如我们需要对某个对象进行快速查找，此时我们也需要将对象转换为数组等等。

二、常见方法

在JavaScript中，我们可以使用多种方式将一个对象转为数组。这里将介绍几种常见的方法。

1. Object.keys()和Object.values()

const obj = {
  name: 'Jack',
  age: 20,
  gender: 'male'
};

const keys = Object.keys(obj); //获取所有键
const values = Object.values(obj); //获取所有值

console.log(keys); //输出 ['name', 'age', 'gender']
console.log(values); //输出 ['Jack', 20, 'male']

上述代码中，我们分别使用了Object.keys()和Object.values()方法将一个对象转为了数组。这两个方法返回的数组均与原对象的键值对应，其中Object.keys()返回的是键数组，Object.values()返回的是值数组。

2. Object.entries()

const obj = {
  name: 'Jack',
  age: 20,
  gender: 'male'
};

const entries = Object.entries(obj); //获取所有键值对

console.log(entries); //输出 [['name', 'Jack'], ['age', 20], ['gender', 'male']]

Object.entries()方法可以同时获取对象中所有的键和值，并将其组合为一个二维数组。其中，每个子数组都由键和值组成。

3. 手动循环

const obj = {
  name: 'Jack',
  age: 20,
  gender: 'male'
};

const arr = [];

for(let key in obj) {
  arr.push([key, obj[key]]);
}

console.log(arr); //输出 [['name', 'Jack'], ['age', 20], ['gender', 'male']]

通过手动循环可以将一个对象转为数组。其中，我们需要使用for-in循环获取对象的所有键，然后逐个将键和值组成一个数组，并将其推到目标数组中。

三、应用场景

对象转数组其实是一项非常实用的操作，在很多场景中都可以使用到。这里将列举一些常见的应用场景。

1. 数据表格

在Web开发中，表格展示是一项非常常见的需求。而很多时候我们需要将从后端获取的数据转为表格以便于展示。因此，很多时候我们需要将对象转为数组。

const obj = {
  name: 'Jack',
  age: 20,
  gender: 'male'
};

const arr = Object.entries(obj);

// table为需要展示表格的DOM元素
let table = document.createElement('table');
let tbody = document.createElement('tbody');

arr.forEach(item => {
  let tr = document.createElement('tr');
  let td1 = document.createElement('td');
  let td2 = document.createElement('td');
  
  td1.textContent = item[0];
  td2.textContent = item[1];
  
  tr.appendChild(td1);
  tr.appendChild(td2);
  
  tbody.appendChild(tr);
});

table.appendChild(tbody);
document.body.appendChild(table);

上述代码中，我们将一个对象转为了数组，并展示为了一个表格元素。

2. 快速查找

在某些场景下，我们需要对一个对象进行快速查找。比如一个数组中包含多个对象，每个对象都有不同的值，我们需要找到其中某个对象。这时我们可以将对象转为数组，然后通过数组中元素的属性值快速查找到需要的对象。

const arr = [
  {
    name: 'Jack',
    age: 20,
    gender: 'male'
  },
  {
    name: 'Tom',
    age: 22,
    gender: 'male'
  },
  {
    name: 'Lucy',
    age: 18,
    gender: 'female'
  }
];

let obj = {};

arr.forEach(item => {
  obj[item.name] = item;
});

console.log(obj['Jack']); //获取的是对象{name: 'Jack', age: 20, gender: 'male'}

上述代码中，我们将一个包含多个对象的数组转为了以对象的name属性为键的对象，然后通过键查找到了需要的对象。

四、总结

通过上述介绍，我们可以看出对象转数组是一个非常基础但实用的操作，在JavaScript中有多种实现方式。值得注意的是，对象转数组是一种不可逆的操作，可能会导致数据的丢失。因此，在使用对象转数组时需要谨慎处理。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/153724.html