前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue对象转数组？

示例：工作中我们经常会因为和接口收到数据类型不一致，这个时候需要我们自己手动转换。

data:{"a","b"} // 源数据结构
let arr = [];
for (let i in data) {arr.push(data[i]);
}
arr:["a","b"]   // 目标数据结构

二、JSON数据转换

平时我们在接收后端返回的json对象通常是一个字符串类型的object，所以一般我们要对这个object进行类型转化后，我们才能使用object里面的数据，而这其中涉及到两个必不可少的方法就是JSON.parse和JSON.stringify

1、JSON.parse

JSON.parse()方法将JSON格式字符串转换为js对象(属性名没有双引号)
解析前要保证数据是标准的JSON格式，否则会解析出错

// 示例一
const user = '{"name": "Jack","gender": "男","age": 18,"major":"computer"}'
console.log(JSON.parse(user));
//user = { name:"Jack", gender:"男", age:18, major:"computer"}// 示例一
const users = '[{"id":101,"name":"计算机科学"},{"id":102,"name":"软件工程"}]'
console.log(JSON.parse(users));
// 结果 users= [ {id:101,name:"计算机科学"}, {id:102,name:"软件工程"} ]

2、JSON.stringify

代码如下（示例）：

const user = {"name": "Jack","gender": "男","age": 18,"major":"computer"}
console.log(user);
// 只输出了一个object

console.log()没有输出我们想要的结果。它输出了[Object]，因为从对象到字符串的默认转换是“[Object]”。因此，我们使用JSON.stringify()先将对象转换为字符串

console.log(JSON.stringify(user));

2.1、JSON.stringify高级使用

stringify（）其实还可以传入其他的参数从而方便我们查找数据

const user = {"name": "Jack","gender": "男","age": 18,"major":"computer","phonenumber":123,"phonenumber1":456,"phonenumber2":789,"phonenumber3":321,"phonenumber4":654,"phonenumber5":987}console.log(JSON.stringify(user,['phonenumber3']));
// 输出结果{"phonenumber3":321}

第三个参数控制最终字符串里的间距。如果参数是一个数字，则字符串化中的每个级别，都将缩进这个空格字符数。即不传这个参数一行显示，加了分行显示。

const user = {"name": "Jack","gender": "男","age": 18,"major":"computer","phonenumber":123,"phonenumber1":456,"phonenumber2":789,"phonenumber3":321,"phonenumber4":654,"phonenumber5":987}
console.log(user);
console.log(JSON.stringify(user,null,2));

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了vue的方法，而方法提供了大量能使我们快速便捷地处理数据的函数和方法。

vue数组转对象、JSON数据处理相关推荐

vue数组中对象属性变化页面不渲染问题
问题引入 Vue之所以能够监听Model状态的变化,是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化.但是,对于数组元素的赋值,却没有办法 ...
vue 数组，对象，对象数组
vue data函数中数组,对象,对象数组菜鸡学习之路关于 Vue 中的数据 data 函数踩坑记录关于 Vue v-for 循环展示数组内容,动态删除数组中的某条数据时发生报错上图中的: ...
vue 数组删除(对象)单条删除，多条删除
1.数组单行删除 <!--* @Descripttion:单行删除* @version: 0.0.1* @Author: PengShuai* @Date: 2022-06-01 17:30:0 ...
vue 对象里面放数组刷新问题_Vue 数组和对象更新,但是页面没有刷新的解决方式...
在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. {{item.name}} data () { return { msg: 'Welcome to Your Vue ...
vuejs对象更新渲染_vue 数组和对象渲染问题
vue 数组和对象渲染问题最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后 ...
vue修改代码同步页面_vue修改数组中对象属性值页面不同步更新渲染问题处理
之前在操作一个接口的时候,由于数据结构比较特殊,vue数组中嵌套了更深的对象,并且在页面操作的过程中对对象属性做了增加.之后蛋疼的发现页面并没有同步渲染. 问题原因: 由于javascript的限制, ...
vue数组修改不触发视图更新、vue向响应式对象添加或删除属性
背景:在vue开发中会遇到data数据更改后view试图不会进行响应式更新的情况以下4种情况不触发vue响应式更新!! 不能检测到的数组变动是: 1.当利用索引直接设置一个项时,例如:vm.item ...
vue 数组对象提取_vue中使用对象数组的最佳实践
前言: 在平常的开发中,经常会在vue中用到对象数组,如渲染一个小区的列表,数据结构可能如下所示: CommunityList: [ { _id: '', community_code: '', co ...
处理 JSON null 和空数组及对象
描述了对 JSON 数据中使用的 null 和空数组及对象的处理. JSON 数据具有 null 和空数组及对象的概念.此部分说明其中每个概念如何映射到 null 和未设置的数据对象概念. Null ...
vue更新数组和对象
vue更新数组和对象 https://cn.vuejs.org/v2/guide/list.html#数组更新检测更改数组对象 let items=this.formValidate.items; ...

vue数组转对象、JSON数据处理

文章目录

前言