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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
div移动 输入框不能输入的问题
Nov 19 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript求日期差的方法
Mar 02 Javascript
jQuery 生成svg矢量二维码
Aug 09 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
Mar 15 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 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 防恶意刷新实现代码
2010/05/16 PHP
ucenter通信原理分析
2015/01/09 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
JS模拟多线程
2007/02/07 Javascript
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
2019/05/16 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python Tkinter版学生管理系统
2019/02/20 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
工作鉴定评语
2014/05/04 职场文书
介绍信如何写
2015/01/31 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js