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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
Aug 02 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 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采用XML-RPC构造Web Service实例教程
2014/07/16 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
jquery插件开发之实现google+圈子选择功能
2014/03/10 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python操作oracle的完整教程分享
2018/01/30 Python
python字典按照value排序方法
2020/12/28 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
美国在线购物频道:Shop LC
2019/04/21 全球购物
有关环保的标语
2014/06/13 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
python基础之while循环语句的使用
2021/04/20 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python