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自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
javascript定时器完整实例
Feb 10 Javascript
Javascript实现计算个人所得税
May 10 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
用Vue编写抽象组件的方法
May 06 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 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
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP中的表达式简述
2016/05/29 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
React中使用collections时key的重要性详解
2017/08/07 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
vue滚动tab跟随切换效果
2020/06/29 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
Python urlopen 使用小示例
2008/09/06 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python2.7到3.x迁移指南
2018/02/01 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
简单说说tomcat的配置
2013/05/28 面试题
什么是java序列化,如何实现java序列化
2012/11/14 面试题
物理专业大学生职业生涯规划书
2014/02/07 职场文书
新年爱情寄语
2014/04/08 职场文书
捐资助学倡议书
2014/04/15 职场文书
食品流通安全承诺书
2014/05/22 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
邹越演讲观后感
2015/06/15 职场文书
同步小康驻村工作简报
2015/07/20 职场文书