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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
用javascript做拖动布局的思路
May 31 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
JQuery中serialize()用法实例分析
Feb 06 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
一个超简单的jQuery回调函数例子(分享)
Aug 08 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
vue解决使用$http获取数据时报错的问题
Oct 30 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
B2K与车机的中波PK
2021/03/02 无线电
snoopy PHP版的网络客户端提供本地下载
2008/04/15 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
分享php多功能图片处理类
2016/05/15 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
JS与C#编码解码
2013/12/03 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
vue filters的使用详解
2018/06/11 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Python实现的栈(Stack)
2018/01/26 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python return语句如何实现结果返回调用
2020/10/15 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
客户服务经理岗位职责
2014/01/29 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
2015年学校信息技术工作总结
2015/05/25 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
使用vuex-persistedstate本地存储vuex
2022/04/29 Vue.js