溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JS解惑之Object中的key是有序的么

發(fā)布時(shí)間：2020-09-28 12:54:05 來源：腳本之家 閱讀：171 作者：sunmaobin 欄目：web開發(fā)

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

答案是：不一定。

背景

最近在做一個(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

解決

那還是上面的問題，我如何讓對(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

最后

回歸到我最初遇到的問題，那就這么解決了：

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í)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手