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


Posted in Javascript onMay 06, 2019

当我们使用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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
jQuery事件对象总结
Oct 17 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
微信小程序和百度的语音识别接口详解
May 06 #Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 #Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 #Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 #Javascript
JavaScript中关于base64的一些事
May 06 #Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 #Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 #Javascript
You might like
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
第十四节--命名空间
2006/11/16 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP如何将XML转成数组
2016/04/04 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JS继承用法实例分析
2015/02/05 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python实现队列的方法
2015/05/26 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
连锁经营管理专业大学生求职信
2013/10/30 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
航海技术专业毕业生求职信
2014/04/06 职场文书
班级学习计划书
2014/04/27 职场文书