亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2019年05月06日 14:46:00   作者：sunmaobin  
這篇文章主要介紹了JS解惑之Object中的key是有序的么，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

答案是：不一定。

背景

最近在做一個(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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論