uniapp数组转成json字符串

---

前言

本文主要通过JSON.stringify和replace方法来对数组进行JSON格式化处理.

---

一、准备工作

准备一个数组,例:

export default {
	data() {
		return {
			list:[],
			mark:[
				{id:1,mark:2}
			]
		}
		},
		onLoad(){
			this.list.push({
				courseIds:"123",
				mark:this.mark,
			})
		}
}

在上述代码中,我们准备了一个数组并且push进去两个字段,分别为courseIds和mark.

二、具体实现

1.实现过程

首先我们用JSON.stringify内置函数对这个数组进行JSON格式转换

this.list=JSON.stringify(this.list)
console.log(this.list)

转换成功截图:

在转换后可以发现,正确的JSON格式最外面应该是{},所以要用replace方法把最外面的[]去掉,

const json = this.list.replace(/^\[|\]$/g, '');
				console.log(json)

成功截图:
在上述的代码截图中可以看到,已经成功去除最外层的[].
replace方法内容含义.

this.list：表示要操作的字符串。
^\[|\]$：是一个正则表达式，用于匹配字符串开头或者结尾处的方括号 [ ]。
^ 表示匹配字符串的开头位置。
\[ 表示匹配左方括号 [，由于方括号本身在正则表达式中有特殊含义，因此需要使用反斜杠 \ 进行转义。
| 表示逻辑或，即匹配左侧或右侧的表达式。
\] 表示匹配右方括号 ]，同样需要使用反斜杠进行转义。
$ 表示匹配字符串的结尾位置。
/.../g：表示正则表达式使用了全局匹配，即匹配到一个符合条件的子串后不会停止，而是继续向后查找。
''：是替换字符串，表示要把匹配到的方括号替换为空字符串。

2.全部代码

编译器:hbuilder

<template>
	<view>
		<view v-for="(item,index) in list">
			{{item.courseIds}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				mark:[
					{id:1,mark:2}
				]
			}
			},
			onLoad(){
				this.list.push({
					courseIds:"123",
					mark:this.mark,
				})
				this.list=JSON.stringify(this.list)
				console.log(this.list)
				const json = this.list.replace(/^\[|\]$/g, '');
				console.log(json)
			}
	}
</script>

<style>
</style>

---