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 相关文章推荐
简单的jquery拖拽排序效果实现代码
Sep 20 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
chrome调试javascript详解
Oct 21 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
js原生实现FastClick事件的实例
Nov 20 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP输出日历表代码实例
2015/03/27 PHP
ThinkPHP中create()方法自动验证实例
2017/04/26 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
PHP实现记录代码运行时间封装类实例教程
2017/05/08 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
Python聊天室实例程序分享
2016/01/05 Python
用python制作游戏外挂
2018/01/04 Python
Python paramiko模块的使用示例
2018/04/11 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python多图片合并PDF的方法
2019/01/03 Python
pytorch实现seq2seq时对loss进行mask的方式
2020/02/18 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
为数据库创建索引都需要注意些什么
2012/07/17 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
春节联欢会主持词
2014/03/24 职场文书
施工安全标语
2014/06/07 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
简历自荐信范文
2015/03/09 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python