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 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JavaScript实现使用Canvas绘制图形的基本教程
Oct 27 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vuex actions传递多参数的处理方法
Sep 18 Javascript
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
Apr 11 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
Vue+Element自定义纵向表格表头教程
Oct 26 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类
2006/10/09 PHP
深入密码加salt原理的分析
2013/06/06 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
jquery tab插件精简版分享
2011/09/10 Javascript
解析瀑布流布局:JS+绝对定位的实现
2013/05/08 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
JavaScript解析任意形式的json树型结构展示
2017/07/23 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue数组对象排序的实现代码
2018/06/20 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
Python中random模块用法实例分析
2015/05/19 Python
Python中max函数用法实例分析
2015/07/17 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
纯CSS3+DIV实现小三角形边框效果的示例代码
2020/08/03 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
宣传工作经验材料
2014/06/02 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
python单元测试之pytest的使用
2021/06/07 Python
部分武汉产收音机展览
2022/04/07 无线电
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS