JS解惑之Object中的key是有序的么
當我們使用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īng)用的實例代碼
這篇文章主要介紹了JavaScript中展開運算符及應(yīng)用的實例代碼,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了微信小程序常用的3種提示彈窗實現(xiàn)詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
下面小編就為大家?guī)硪黄约悍庋b的一個簡單的倒計時功能實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
下面小編就為大家?guī)硪黄P點javascript 正則表達式中 中括號的【坑】。小編覺得總結(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
這篇文章主要為大家詳細介紹了微信小程序自定義波浪組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09