當(dāng)我們使用for/in遍歷一個(gè)Object對(duì)象的時(shí)候，打印的結(jié)果是否按key的順序打印出來(lái)呢？

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)永勝免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

答案是：不一定。

背景

最近在做一個(gè)項(xiàng)目的時(shí)候，遇到這樣一個(gè)需求：

一個(gè)下拉列表中有3個(gè)固定選項(xiàng)，包括：-1：全部；0：正常；1：失效。

于是，我就定義了一個(gè)對(duì)象，然后循環(huán)這個(gè)對(duì)象，把結(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”），那么會(huì)按照從小到大的排序。除此之外，其它數(shù)據(jù)類型，都安裝對(duì)象key的實(shí)際創(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

解決

那還是上面的問(wèn)題，我如何讓對(duì)象按key的順序輸出呢？答案是：

將key轉(zhuǎn)換成非整數(shù)類型的字符串，使用的時(shí)候再還原。

如果全部是類整數(shù)的key，則可以這么做：

// 每個(gè)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ù)了，可以這么做：

// 每個(gè)key前面加.轉(zhuǎn)換成字符串
var obj = {
  '.a': 111,
  '.我' : 222,
  '.1' : 333,
  '.1.3': 444,
  '.3': 555
};
for (let key in obj) {
  // 從第1個(gè)字符取原始的key
  console.log(key.substring(1), obj[key]);
};
// result
// a 111
// 我 222
// 1 333
// 1.3 444
// 3 555

最后

回歸到我最初遇到的問(wèn)題，那就這么解決了：

var obj = {
  '-1.': '全部',
  '0.' : '正常',
  '1.' : '失效'
};
<select>
  <option v-for="(item, key) in obj" :value="~~key">{{item}}</option>
</select>

參考

Objects#ordered-like-an-object

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁(yè)標(biāo)題：JS解惑之Object中的key是有序的么
轉(zhuǎn)載來(lái)源：http://jinyejixie.com/article30/ghojpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站制作、網(wǎng)站導(dǎo)航、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)