JS实现将对象转化为数组的方法分析


Posted in Javascript onJanuary 21, 2019

本文实例讲述了JS实现将对象转化为数组的方法。分享给大家供大家参考,具体如下:

前言

其实这本来应该是一个很基础的问题了,但我之做一想记录一下是因为之前因为对象转数组的时候卡住了后来弄了出来,但最近再遇到这个问题时竟然又卡主了,所以,关于这个问题,如何把一个对象{'未完成':5, '已完成':8, '待确认':4, '已取消':6}转为[{"未完成":5},{"已完成":8},{"待确认":4},{"已取消":6}],你已经知道如何操作了,那这篇文章你也就没有必要看了。

对象的两种取值方式

我们都知道,JS中对象有两种取值方式,通过在.后面直接加属性名取值,这也是我们最常使用的一种方式,例如:

let obj = {name: 'wan'};
console.log(obj.name); //wan

这是最普通的一种方式,还有一种方式我们用的不太多,就是使用[]包住属性名取值,类似于数组那样,例如

let obj = {name: 'wan'};
console.log(obj[name]); //wan

那二者之前有什么区别呢,如果对于一个已知的对象来说,几乎是没什么区别的,但是如果我们需要的对象的key是变量呢?这就回到了我们文章开始是提到的问题,如何将一个对象转化为数组

将对象转化为数组

我们文章开始例子中的对象是

let obj = {'未完成':5, '已完成':8, '待确认':4, '已取消':6};

如果目标数组只是为了得到对象的key的集合或者value的集合还是相对容易的

var arr = []
for (let i in obj) {
  arr.push(obj[i]); //属性
  //arr.push(obj[i]); //值
}
console.log(arr);

如果像我文中开始的需求的话就只需要改变一下push进去的内容为一个对象即可

var arr = []
for (let i in obj) {
  let o = {};
  o[i] = obj[i];
  arr.push(o)
}
console.log(arr);

感兴趣的朋友还可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript中json操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
常用js脚本
Dec 03 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
js获取json元素数量的方法
Jan 27 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
Dec 23 Javascript
JS模拟简易滚动条效果代码(附demo源码)
Apr 05 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
ES6中字符串的使用方法扩展
Jun 04 Javascript
vue中过滤器filter的讲解
Jan 21 #Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 #Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 #Javascript
js中实例与对象的区别讲解
Jan 21 #Javascript
详解vue挂载到dom上会发生什么
Jan 20 #Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 #Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
php zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
php格式化电话号码的方法
2015/04/24 PHP
php实现登录页面的简单实例
2019/09/29 PHP
thinkphp5.1 框架导入/导出excel文件操作示例
2020/05/25 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
window.navigate 与 window.location.href 的使用区别介绍
2013/09/21 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
利用Python实现颜色色值转换的小工具
2016/10/27 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
监理员的岗位职责
2013/11/13 职场文书
简短证婚人证婚词
2014/01/09 职场文书
商场促销活动总结
2014/07/10 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
合作意向书怎么写
2019/06/24 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android