JS解惑之Object中的key是有序的么
當(dāng)我們使用for/in遍歷一個Object對象的時候，打印的結(jié)果是否按key的順序打印出來呢？
答案是：不一定。
背景
最近在做一個項目的時候，遇到這樣一個需求：
一個下拉列表中有3個固定選項，包括：-1：全部；0：正常；1：失效。
于是，我就定義了一個對象，然后循環(huán)這個對象，把結(jié)果放到 <option> 上面：
var obj = {
'-1': '全部',
'0' : '正常',
'1' : '失效'
};
<!-- Vue代碼片段 -->
<select>
<option v-for="(item, key) in obj" :value="key">{{item}}</option>
</select>
<!-- 結(jié)果卻是: -->
<!-- 0 正常 -->
<!-- 1 失效 -->
<!-- -1 全部 -->
于是就有了今天這篇文章，且看下文。
解惑
Object的key的排序規(guī)則到底是什么樣子的呢？答案是：
如果key是整數(shù)（如：123）或者整數(shù)類型的字符串（如：“123”），那么會按照從小到大的排序。除此之外，其它數(shù)據(jù)類型，都安裝對象key的實際創(chuàng)建順序排序。
var obj = {
'-1': '全部',
'0' : '正常',
'1' : '失效'
};
for (let key in obj) {
console.log(key, obj[key]);
};
// result
// 0 正常
// 1 失效
// -1 全部
另外，如果key中除了整數(shù)或者整數(shù)類型的字符串外，還含有其它數(shù)據(jù)類型，則整數(shù)放在最前面，比如：
var obj = {
'a': 111,
'我' : 222,
'1' : 333,
'1.3': 444,
'3': 555
};
for (let key in obj) {
console.log(key, obj[key]);
};
// result
// 1 333
// 3 555
// a 111
// 我 222
// 1.3 444
解決
那還是上面的問題，我如何讓對象按key的順序輸出呢？答案是：
將key轉(zhuǎn)換成非整數(shù)類型的字符串，使用的時候再還原。
如果全部是類整數(shù)的key，則可以這么做：
// 每個key后面加.轉(zhuǎn)換成字符串
var obj = {
'-1.': '全部',
'0.' : '正常',
'1.' : '失效'
};
for (let key in obj) {
// ~~ 表示轉(zhuǎn)換成整數(shù)，這樣上面的key又還原成了-1/0/1
console.log(~~key, obj[key]);
};
// result
// -1 全部
// 0 正常
// 1 失效
但是，如果key是由各種數(shù)據(jù)類型混合的，那就不能轉(zhuǎn)換成整數(shù)了，可以這么做：
// 每個key前面加.轉(zhuǎn)換成字符串
var obj = {
'.a': 111,
'.我' : 222,
'.1' : 333,
'.1.3': 444,
'.3': 555
};
for (let key in obj) {
// 從第1個字符取原始的key
console.log(key.substring(1), obj[key]);
};
// result
// a 111
// 我 222
// 1 333
// 1.3 444
// 3 555
最后
回歸到我最初遇到的問題，那就這么解決了：
var obj = {
'-1.': '全部',
'0.' : '正常',
'1.' : '失效'
};
<select>
<option v-for="(item, key) in obj" :value="~~key">{{item}}</option>
</select>
參考
Objects#ordered-like-an-object
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解如何在Javascript中使用Object.freeze()
- JS Object.preventExtensions(),Object.seal()與Object.freeze()用法實例分析
- 實例分析JS中的相等性判斷===、 ==和Object.is()
- JS中比較兩個Object數(shù)組是否相等方法實例
- Javascript 對象（object）合并操作實例分析
- JS數(shù)組Object.keys()方法的使用示例
- vue.js的雙向數(shù)據(jù)綁定Object.defineProperty方法的神奇之處
- JavaScript對象拷貝與Object.assign用法實例分析
- JS Object構(gòu)造函數(shù)之Object.freeze
相關(guān)文章
JavaScript中展開運(yùn)算符及應(yīng)用的實例代碼
這篇文章主要介紹了JavaScript中展開運(yùn)算符及應(yīng)用的實例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了微信小程序常用的3種提示彈窗實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)硪黄约悍庋b的一個簡單的倒計時功能實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
盤點javascript 正則表達(dá)式中 中括號的【坑】
下面小編就為大家?guī)硪黄P點javascript 正則表達(dá)式中 中括號的【坑】。小編覺得總結(jié)的不錯?，F(xiàn)在分享給大家，希望能給大家一個參考2016-03-03
這篇文章主要介紹了理解JavaScript設(shè)計模式中的單例模式，單例模式即Singleton?Pattern是最簡單的設(shè)計模式之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-04-04
JS簡單編號生成器實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
在UniApp中事件處理非常重要,通過事件處理可以實現(xiàn)用戶與應(yīng)用程序之間的交互,這篇文章主要給大家介紹了關(guān)于uniapp中常用的事件處理方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
Javascript json object 與string 相互轉(zhuǎn)換的簡單實現(xiàn)
下面小編就為大家?guī)硪黄狫avascript json object 與string 相互轉(zhuǎn)換的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了純javascript版日歷控件，引用calendar.js文件，再把input的id設(shè)置成calendar,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義波浪組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09