JavaScript將對(duì)象轉(zhuǎn)換為數(shù)組的多種方式
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法
本篇文章主要介紹了詳解JavaScript數(shù)組過(guò)濾相同元素的5種方法,詳細(xì)的介紹了5種實(shí)用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-05-05
d3.js入門教程之?dāng)?shù)據(jù)綁定詳解
這篇文章主要介紹了關(guān)于d3.js數(shù)據(jù)綁定的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)只d3.js具有一定的參考價(jià)值,需要的朋友下面來(lái)一起看看吧。2017-04-04
JS根據(jù)獎(jiǎng)品權(quán)重計(jì)算中獎(jiǎng)概率
這篇文章主要介紹了JS計(jì)算中獎(jiǎng)概率實(shí)現(xiàn)抽獎(jiǎng)的方法,對(duì)算法感興趣的同學(xué),可以參考下2021-05-05
javascript 動(dòng)態(tài)修改樣式和層疊樣式表代碼
javascript 動(dòng)態(tài)修改樣式和層疊樣式表代碼,需要的朋友可以參考下。2010-04-04
ionic中列表項(xiàng)增加和刪除的實(shí)現(xiàn)方法
在項(xiàng)目中遇到表單似的頁(yè)面,需要進(jìn)行增加一行和減少一行的操作,基于ionic怎么實(shí)現(xiàn)呢?下面小編給大家分享ionic中列表項(xiàng)增加和刪除的實(shí)現(xiàn)方法,一起看看吧2017-01-01
js 實(shí)現(xiàn)無(wú)縫滾動(dòng) 兼容IE和FF
js 實(shí)現(xiàn)無(wú)縫滾動(dòng) 兼容IE FF,大家可以看看。2009-07-07
淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承
下面小編就為大家?guī)?lái)一篇淺談JS繼承_借用構(gòu)造函數(shù) & 組合式繼承。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08

