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 检测浏览器和操作系统的脚本
Dec 26 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php的控制语句
2006/10/09 PHP
php简单定时执行任务的实现方法
2015/02/23 PHP
php实现微信支付之现金红包
2018/05/30 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
2018/12/03 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue 中的 render 函数作用详解
2020/02/28 Javascript
原生JS实现烟花效果
2020/03/10 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python计算列表内各元素的个数实例
2018/06/29 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
django解决跨域请求的问题
2018/11/11 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python生成器用法实例详解
2019/11/22 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
大四自我鉴定
2014/02/08 职场文书
房地产促销活动方案
2014/03/01 职场文书
班组长竞聘书
2014/03/31 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书