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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
学习ExtJS form布局
Oct 08 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jquery不常用方法汇总
Jul 26 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
js转换对象为xml
Feb 17 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
js实现带搜索功能的下拉框
Jan 11 Javascript
JavaScript中window和document用法详解
Jul 28 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
php注销代码(session注销)
2012/05/31 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
Thinkphp5.0框架的Db操作实例分析【连接、增删改查、链式操作等】
2019/10/11 PHP
Javascript的一种模块模式
2008/03/22 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
python实现小球弹跳效果
2019/05/10 Python
Python当中的array数组对象实例详解
2019/06/12 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python之列表推导式的用法
2019/11/29 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
会展策划与管理专业大学生职业生涯规划
2014/02/07 职场文书
中学生演讲稿
2014/04/26 职场文书
中学教师师德承诺书
2014/05/23 职场文书
公安学专业求职信
2014/07/27 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
天坛导游词
2015/02/02 职场文书
施工安全员岗位职责
2015/04/11 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书
java版 简单三子棋游戏
2022/05/04 Java/Android