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 getElementsByTagName的简写方式
Jun 27 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
vuejs响应用户事件(如点击事件)
Mar 14 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
原生JS+HTML5实现的可调节写字板功能示例
Aug 30 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 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
天津市收音机工业发展史
2021/03/04 无线电
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
浅谈PHP的反射机制
2016/12/15 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
ExpressJS入门实例
2015/01/14 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
Python中一些深不见底的“坑”
2019/06/12 Python
python中time库的实例使用方法
2019/10/31 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Python写出新冠状病毒确诊人数地图的方法
2020/02/12 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python excel多行合并的方法
2020/12/09 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
家具厂厂长岗位职责
2014/01/01 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
《乞巧》教学反思
2014/02/27 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
授权委托书样本
2014/04/03 职场文书
学习方法演讲稿
2014/05/10 职场文书
组工干部演讲稿
2014/09/02 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
Django cookie和session的应用场景及如何使用
2021/04/29 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python