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 相关文章推荐
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
May 15 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 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下使用以下代码连接并测试
2008/04/09 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
使用WordPress发送电子邮件的相关PHP函数用法解析
2015/12/15 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
医药大学生求职简历的自我评价
2013/10/17 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
解决go在函数退出后子协程的退出问题
2021/04/30 Golang