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 相关文章推荐
语义化 H1 标签
Jan 14 Javascript
Javascript this关键字使用分析
Oct 21 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
纯js实现倒计时功能
Jan 06 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
Vue组件实现触底判断
Jun 26 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
微信小程序和百度的语音识别接口详解
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+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
php 使用array函数实现分页
2015/02/13 PHP
php实现TCP端口检测的方法
2015/04/01 PHP
php中如何执行linux命令详解
2018/11/06 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
jQuery Ajax文件上传(php)
2009/06/16 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
MySQL中表的复制以及大型数据表的备份教程
2015/11/25 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
理想高通滤波实现Python opencv示例
2019/01/30 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Python数据可视化图实现过程详解
2020/06/12 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
自动化职业生涯规划书范文
2014/01/03 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
离婚协议书标准格式
2014/10/04 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL