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 相关文章推荐
ie下动态加态js文件的方法
Sep 13 Javascript
Vue.js 60分钟快速入门教程
Mar 28 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
Promise扫盲贴
Jun 24 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
使用React代码动态生成栅格布局的方法
May 24 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
php计算一个文件大小的方法
2015/03/30 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
摘自启点的main.js
2008/04/20 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
js判断图片加载完成后获取图片实际宽高的方法
2016/02/25 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
基本DOM节点操作
2017/01/17 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
Python学生成绩管理系统简洁版
2020/04/05 Python
python实现自动登录后台管理系统
2018/10/18 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
一些Unix笔试题和面试题
2012/09/25 面试题
Python文件操作的面试题
2013/06/22 面试题
师范院校学生自荐信范文
2013/12/27 职场文书
七年级生物教学反思
2014/01/30 职场文书
思想品德课教学反思
2014/02/10 职场文书
绵山导游词
2015/02/05 职场文书
大学校园招聘会感想
2015/08/10 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
关于Python使用turtle库画任意图的问题
2022/04/01 Python