JS實(shí)現(xiàn)將對(duì)象轉(zhuǎn)化為數(shù)組的方法分析
本文實(shí)例講述了JS實(shí)現(xiàn)將對(duì)象轉(zhuǎn)化為數(shù)組的方法。分享給大家供大家參考,具體如下:
前言
其實(shí)這本來應(yīng)該是一個(gè)很基礎(chǔ)的問題了,但我之做一想記錄一下是因?yàn)橹耙驗(yàn)閷?duì)象轉(zhuǎn)數(shù)組的時(shí)候卡住了后來弄了出來,但最近再遇到這個(gè)問題時(shí)竟然又卡主了,所以,關(guān)于這個(gè)問題,如何把一個(gè)對(duì)象{'未完成':5, '已完成':8, '待確認(rèn)':4, '已取消':6}轉(zhuǎn)為[{"未完成":5},{"已完成":8},{"待確認(rèn)":4},{"已取消":6}],你已經(jīng)知道如何操作了,那這篇文章你也就沒有必要看了。
對(duì)象的兩種取值方式
我們都知道,JS中對(duì)象有兩種取值方式,通過在.后面直接加屬性名取值,這也是我們最常使用的一種方式,例如:
let obj = {name: 'wan'};
console.log(obj.name); //wan
這是最普通的一種方式,還有一種方式我們用的不太多,就是使用[]包住屬性名取值,類似于數(shù)組那樣,例如
let obj = {name: 'wan'};
console.log(obj[name]); //wan
那二者之前有什么區(qū)別呢,如果對(duì)于一個(gè)已知的對(duì)象來說,幾乎是沒什么區(qū)別的,但是如果我們需要的對(duì)象的key是變量呢?這就回到了我們文章開始是提到的問題,如何將一個(gè)對(duì)象轉(zhuǎn)化為數(shù)組
將對(duì)象轉(zhuǎn)化為數(shù)組
我們文章開始例子中的對(duì)象是
let obj = {'未完成':5, '已完成':8, '待確認(rèn)':4, '已取消':6};
如果目標(biāo)數(shù)組只是為了得到對(duì)象的key的集合或者value的集合還是相對(duì)容易的
var arr = []
for (let i in obj) {
arr.push(obj[i]); //屬性
//arr.push(obj[i]); //值
}
console.log(arr);
如果像我文中開始的需求的話就只需要改變一下push進(jìn)去的內(nèi)容為一個(gè)對(duì)象即可
var arr = []
for (let i in obj) {
let o = {};
o[i] = obj[i];
arr.push(o)
}
console.log(arr);
感興趣的朋友還可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行結(jié)果。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- js將類數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組對(duì)象
- json對(duì)象與數(shù)組以及轉(zhuǎn)換成js對(duì)象的簡(jiǎn)單實(shí)現(xiàn)方法
- js中如何把字符串轉(zhuǎn)化為對(duì)象、數(shù)組示例代碼
- JS從非數(shù)組對(duì)象轉(zhuǎn)數(shù)組的方法小結(jié)
- js接收并轉(zhuǎn)化Java中的數(shù)組對(duì)象的方法
- JavaScript類數(shù)組對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象的方法實(shí)例分析
- JavaScript對(duì)象轉(zhuǎn)數(shù)組的三種方法實(shí)現(xiàn)
相關(guān)文章
微信小程序云開發(fā)修改云數(shù)據(jù)庫(kù)中的數(shù)據(jù)方法
這篇文章主要介紹了微信小程序云開發(fā)修改云數(shù)據(jù)庫(kù)中的數(shù)據(jù)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript加強(qiáng)之自定義event事件
event事件在本文以自定義的方式出現(xiàn),感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-09-09
JS簡(jiǎn)單獲取客戶端IP地址的方法【調(diào)用搜狐接口】
這篇文章主要介紹了JS簡(jiǎn)單獲取客戶端IP地址的方法,通過調(diào)用搜狐接口來簡(jiǎn)單實(shí)現(xiàn)獲取訪客IP地址的功能,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09
如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
這篇文章主要介紹了如何通過JS實(shí)現(xiàn)日歷簡(jiǎn)單算法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
詳解JS如何解決大數(shù)據(jù)下滾動(dòng)頁(yè)面卡頓問題
之前遇到不分頁(yè)直接獲取到全部數(shù)據(jù),前端滾動(dòng)查看數(shù)據(jù),頁(yè)面就挺卡頓的,所以這篇文章來和大家聊聊如何解決這一問題,感興趣的小伙伴可以了解下2023-07-07
JS實(shí)現(xiàn)簡(jiǎn)易換圖時(shí)鐘功能分析
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)易換圖時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript結(jié)合時(shí)間函數(shù)定時(shí)變換顯示圖片實(shí)現(xiàn)時(shí)鐘功能的相關(guān)操作技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下2018-01-01
前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例
下載我相信很多小伙伴并不陌生,下載文件的形式也有很多,下面這篇文章主要給大家介紹了關(guān)于前端實(shí)現(xiàn)批量下載并打包成ZIP文件的步驟及示例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn)
這篇文章主要為大家介紹了利用Angularjs和Bootstrap前端開發(fā)案例實(shí)戰(zhàn),感興趣的小伙伴們可以參考一下2016-08-08
TypeScript中interface和type的區(qū)別詳解
本文主要介紹了TypeScript中interface和type的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07

