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

当我们使用for/in遍历一个Object对象的时候，打印的结果是否按key的顺序打印出来呢？

答案是：不一定。

背景

最近在做一个项目的时候，遇到这样一个需求：

一个下拉列表中有3个固定选项，包括：-1：全部；0：正常；1：失效。

于是，我就定义了一个对象，然后循环这个对象，把结果放到 <option> 上面：

var obj = {
  '-1': '全部',
  '0' : '正常',
  '1' : '失效'
};

<!-- Vue代码片段 -->
<select>
  <option v-for="(item, key) in obj" :value="key">{{item}}</option>
</select>

<!-- 结果却是: -->
<!-- 0 正常 -->
<!-- 1 失效 -->
<!-- -1 全部 -->

于是就有了今天这篇文章，且看下文。

解惑

Object的key的排序规则到底是什么样子的呢？答案是：

如果key是整数（如：123）或者整数类型的字符串（如：“123”），那么会按照从小到大的排序。除此之外，其它数据类型，都安装对象key的实际创建顺序排序。

var obj = {
  '-1': '全部',
  '0' : '正常',
  '1' : '失效'
};
for (let key in obj) {
   console.log(key, obj[key]);
};
// result
// 0 正常
// 1 失效
// -1 全部

另外，如果key中除了整数或者整数类型的字符串外，还含有其它数据类型，则整数放在最前面，比如：

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转换成非整数类型的字符串，使用的时候再还原。

如果全部是类整数的key，则可以这么做：

// 每个key后面加.转换成字符串
var obj = {
  '-1.': '全部',
  '0.' : '正常',
  '1.' : '失效'
};
for (let key in obj) {
  // ~~ 表示转换成整数，这样上面的key又还原成了-1/0/1
  console.log(~~key, obj[key]);
};
// result
// -1 全部
// 0 正常
// 1 失效

但是，如果key是由各种数据类型混合的，那就不能转换成整数了，可以这么做：

// 每个key前面加.转换成字符串
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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈JsonObject中的key-value数据解析排序问题

    1.JsonObject中的数据是key-value形式,通过JsonObject的keys方法得到key的迭代器是无序的,要想实现排序,目前只能通过加装一层处理(方法来自Stack Overflow,感谢大神),将key-vlaue放入ThreeMap排序,排序规则默认是字母表顺序,可自定义Comparator修改. iteratorKeys = object.keys();//得到所有title SortedMap map = new TreeMap(); while (iteratorKe

  • 删除Javascript Object中间的key

    这个也不会,回家种田去吧你 复制代码 代码如下: delete thisIsObject[key] or delete thisIsObject.key 顺便我们来谈谈delete的用法 几个礼拜前, 我有了个机会去翻阅Stoyan Stefanov的 Object-Oriented Javascript 一书. 这本书在亚马逊上拥有很高的评价(12篇评论, 5颗星), 所以我很好奇地想看看它到底是不是那么值得推荐的一本书, 于是我开始阅读函数的那章. 我非常欣赏这本书解释事物的方式, 例子们被

  • javascript 对象数组根据对象object key的值排序

    有个js对象数组 var ary=[{id:1,name:"b"},{id:2,name:"b"}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数 函数定义: 复制代码 代码如下: function keysrt(key,desc) {   return function(a,b){     return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]);   } } 使用: 复制代码 代码

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

    当我们使用for/in遍历一个Object对象的时候,打印的结果是否按key的顺序打印出来呢? 答案是:不一定. 背景 最近在做一个项目的时候,遇到这样一个需求: 一个下拉列表中有3个固定选项,包括:-1:全部:0:正常:1:失效. 于是,我就定义了一个对象,然后循环这个对象,把结果放到 <option> 上面: var obj = { '-1': '全部', '0' : '正常', '1' : '失效' }; <!-- Vue代码片段 --> <select> <

  • JS 清除字符串数组中,重复元素的实现方法

    JS 清除字符串数组中,重复元素的实现方法 <script language="JavaScript"> <!-- var arrData=new Array(); for(var i=0; i<1000; i++) { arrData[arrData.length] = String.fromCharCode(Math.floor(Math.random()*26)+97); } //document.write(arrData+"<br/&g

  • JS动态遍历json中所有键值对的方法(不知道属性名的情况)

    本文实例讲述了JS动态遍历json中所有键值对的方法.分享给大家供大家参考,具体如下: JavaScript中使用ajax技术访问后台资源的时候,常常使用json作为轻量级数据传输格式.json类似于Java中的HashMap,是由一系列的key-value键值对构成. 如果后台返回给前台的json中key的值是动态生成的,那么我们没有办法使用常规的object.name或object["name"]的方式来获取json中的值. 这个时候我们需要在不知道属性名称的时候,遍历json对象

  • 详解Chai.js断言库API中文文档

    Chai.js断言库API中文文档 基于chai.js官方API文档翻译.仅列出BDD风格的expect/should API.TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新. BDD expect和should是BDD风格的,二者使用相同的链式语言来组织断言,但不同在于他们初始化断言的方式:expect使用构造函数来创建断言对象实例,而should通过为Object.prototype新增方法来实现断言(所以should不支持IE):expect直接指向chai.ex

  • 替换json对象中的key最佳方案

    替换json对象中的key最佳方案

    JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率. 看到标题你可能会想,如此简单的问题值得去探究吗?如果我有一个json object,只需下面简单的几行代码就可以完成: var o

  • Highslide.js是一款基于js实现的网页中图片展示插件

    Highslide.js是一款基于js实现的网页中图片展示插件

    Highslide JS 是一个开源的Javascript 软件,它提供以Web 2.0 方式弹出窗口的效果.它简化了在网页上弹出缩略图和HTML 代码片断的做法,不存在被浏览器拦截的问题,也无需使用任何插件.弹出的内容在当前浏览器窗口中,用户还可以在保留当前弹出内容的情况下继续滚动网页而不需要关闭它.具有良好的兼容性和可访问性,当用户禁用了Javascript 或是在Javascrip 失效的情况下,浏览器会重定向到图片本身或事先指定的HTML页. Highslide是一个非常美观的图片展示插

  • JS实现网页游戏中滑块响应鼠标点击移动效果

    本文实例讲述了JS实现网页游戏中滑块响应鼠标点击移动效果.分享给大家供大家参考,具体如下: 这是网页游戏中的一个有趣效果,可以完成以下几个动作:滚动.scroll 8个方向.鼠标坐标获娶对象上下左右位置获取,大家可以自己添加.MoveReady和ScrollReady两个注释掉了 取消注释后防止鼠标连续点击效果叠加. 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-game-click-move-demo/ 具体代码如下: <!DOCTYPE html

  • JS深度拷贝Object Array实例分析

    本文实例分析了JS深度拷贝Object Array.分享给大家供大家参考,具体如下: function cloneObj(o) { var isArray = o instanceof Array; var isObject = o instanceof Object; if (!isObject) return o; var n = (isArray ? [] : {}); for (var k in o) n[k] = cloneObj(o[k]); return n; } 遇到的问题 ty

  • JS实现查找数组中对象的属性值是否存在示例

    JS实现查找数组中对象的属性值是否存在示例

    本文实例讲述了JS实现查找数组中对象的属性值是否存在.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> var studentsArray = [ { "

  • JS实现统计字符串中字符出现个数及最大个数功能示例

    JS实现统计字符串中字符出现个数及最大个数功能示例

    本文实例讲述了JS实现统计字符串中字符出现个数及最大个数功能.分享给大家供大家参考,具体如下: js判断字符串中某字符出现的个数 今天碰到的一道题,比较简单,为了防止眼高手低还是写一下吧 <html> <head> <meta charset="utf-8" /> <title>www.jb51.net js判断字符串中某字符出现的个数</title> </head> <body> <script

随机推荐