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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
总结js函数相关知识点
Feb 27 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
8个必备的PHP功能开发
2015/10/02 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
javascript函数库-集合框架
2007/04/27 Javascript
学习ExtJS form布局
2009/10/08 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
2011/05/24 Javascript
基于jQuery的简单九宫格实现代码
2012/08/09 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
DOM基础教程之使用DOM + Css
2015/01/20 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
jQuery基本筛选选择器实例代码
2017/02/06 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python调用graphviz绘制结构化图形网络示例
2019/11/22 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
医学生职业规划范文
2014/01/05 职场文书
邮政员工辞职信
2014/01/16 职场文书
先进集体获奖感言
2014/02/13 职场文书
应届生求职自荐信
2014/07/04 职场文书
授权委托书
2014/07/31 职场文书
保外就医申请书范文
2015/08/06 职场文书
mysql中between的边界,范围说明
2021/06/08 MySQL
Nginx动静分离配置实现与说明
2022/04/07 Servers