快捷導(dǎo)航

JavaScript將對(duì)象轉(zhuǎn)換為數(shù)組的多種方式

更新時(shí)間：2025年05月16日 08:39:13 作者：一杯甜夢(mèng)去冰全糖

在 JavaScript 中,將對(duì)象轉(zhuǎn)換為數(shù)組有多種方式,具體取決于對(duì)象的類型和需要提取的內(nèi)容,以下是常見(jiàn)的幾種場(chǎng)景及實(shí)現(xiàn)方法,需要的朋友可以參考下

1. 將對(duì)象的鍵（Keys）轉(zhuǎn)換為數(shù)組
2. 將對(duì)象的值（Values）轉(zhuǎn)換為數(shù)組
3. 將對(duì)象的鍵值對(duì)（Entries）轉(zhuǎn)換為數(shù)組
4. 將類數(shù)組對(duì)象（Array-like Object）轉(zhuǎn)為數(shù)組
5. 自定義轉(zhuǎn)換（復(fù)雜對(duì)象處理）
6. 處理嵌套對(duì)象（遞歸轉(zhuǎn)換）

總結(jié)

注意事項(xiàng)

JavaScript對(duì)象轉(zhuǎn)數(shù)組

1. 將對(duì)象的鍵（Keys）轉(zhuǎn)換為數(shù)組

使用 Object.keys() 提取對(duì)象的所有可枚舉屬性名：

const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); 
console.log(keys); // ["a", "b", "c"]

2. 將對(duì)象的值（Values）轉(zhuǎn)換為數(shù)組

使用 Object.values() 提取對(duì)象的所有可枚舉屬性值：

const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); 
console.log(values); // [1, 2, 3]

3. 將對(duì)象的鍵值對(duì)（Entries）轉(zhuǎn)換為數(shù)組

使用 Object.entries() 提取鍵值對(duì)，返回 [key, value] 格式的二維數(shù)組：

const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); 
console.log(entries); 
// [ ["a", 1], ["b", 2], ["c", 3] ]

4. 將類數(shù)組對(duì)象（Array-like Object）轉(zhuǎn)為數(shù)組

使用 Array.from() 或 擴(kuò)展運(yùn)算符（...） 轉(zhuǎn)換類數(shù)組對(duì)象（如 arguments、DOM 元素集合）：

// 示例 1: arguments 對(duì)象
function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray); // [1, 2, 3]
}
example(1, 2, 3);

// 示例 2: NodeList（DOM 元素列表）
const divs = document.querySelectorAll("div");
const divArray = [...divs]; // 擴(kuò)展運(yùn)算符

5. 自定義轉(zhuǎn)換（復(fù)雜對(duì)象處理）

使用 Array.map() 或 reduce() 對(duì)對(duì)象屬性進(jìn)行靈活處理：

const obj = { a: 1, b: 2, c: 3 };

// 轉(zhuǎn)換為 [{ key: 'a', value: 1 }, ...]
const arr = Object.entries(obj).map(([key, value]) => ({ key, value }));
console.log(arr); 
// [
//   { key: "a", value: 1 },
//   { key: "b", value: 2 },
//   { key: "c", value: 3 }
// ]

6. 處理嵌套對(duì)象（遞歸轉(zhuǎn)換）

若對(duì)象包含嵌套結(jié)構(gòu)，需遞歸處理：

function deepConvert(obj) {
  return Object.entries(obj).map(([key, value]) => {
    if (typeof value === "object" && value !== null) {
      return [key, deepConvert(value)]; // 遞歸處理嵌套對(duì)象
    }
    return [key, value];
  });
}

const nestedObj = { a: 1, b: { c: 2, d: { e: 3 } } };
console.log(deepConvert(nestedObj)); 
// [ ["a", 1], ["b", [ ["c", 2], ["d", [ ["e", 3] ] ] ] ]

總結(jié)

場(chǎng)景	方法	示例
提取鍵	`Object.keys()`	`["a", "b", "c"]`
提取值	`Object.values()`	`[1, 2, 3]`
提取鍵值對(duì)	`Object.entries()`	`[ ["a",1], ["b",2] ]`
類數(shù)組對(duì)象轉(zhuǎn)數(shù)組	`Array.from()` 或 `[...]`	`[div1, div2]`
自定義格式轉(zhuǎn)換	`map` + `Object.entries()`	`[{ key: "a", value: 1 }, ...]`
嵌套對(duì)象轉(zhuǎn)多維數(shù)組	遞歸處理	`[ ["a",1], ["b", [ ["c",2] ] ]`

注意事項(xiàng)

Symbol 屬性：Object.keys()/values()/entries() 不包含 Symbol 類型的鍵，需使用 Object.getOwnPropertySymbols()。
不可枚舉屬性：上述方法僅提取可枚舉屬性，若需包含所有屬性，需用 Reflect.ownKeys()。
舊瀏覽器兼容性：Object.values() 和 Object.entries() 需 ES2017+ 支持，舊環(huán)境需 Polyfill。

到此這篇關(guān)于JavaScript將對(duì)象轉(zhuǎn)換為數(shù)組的多種方式的文章就介紹到這了,更多相關(guān)JavaScript對(duì)象轉(zhuǎn)為數(shù)組內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: