前端数组转字符串，字符串转数组

前段时间写了一个项目，需要用到级联选择器，就是 element 的级联选择器。在保存数据的时候，前端这边保存的是数据如果不是一级数据，就会拿到他父级的id和他的id，但是后端为了保证数据量不那么大，不想要这个数据父级的id，只想要其本身的id。并且我这边本身传的数据是数组，而后端需要字符串数据，就有了我需要转来转去的操作。

这是我保存级联选择器数据获取的数据

[['02'],['05', '0501', '050101'],['01', '0101', '010105'],['01', '0104'],['04']]

这个是后端想要的数据样子

['02', '050101', '010105', '0104', '04']

到这里还不是最狗的，为了让级联选择器把已选择的数据展示出来，我展示的数据，数据需要的格式是这样的

["02", "05,0501,050101", "01,0101,010105", "01,0104", "04"]

也就是说我需要做的就是，在保存的时候从获取的数据改成后端需要的数据，然后在我需要展示的时候，把数据从后端获取来的数据改成需要展示的模样，然后把数据再转化成最开始其保存的样子，方便转成后端需要的数据样子。整个过程中还要考虑数据为空的情况，还要保证转化完的数据不要在第二次进行保存的时候，再次转化，变成谁也不认识的数据。

OK，接下来上代码。

首先要做的是把保存的数据转化成后端需要的数据，在这里是在vue里写了一个方法，在保存的时候，对数据进行转化。

majorData(data) {// console.log(data)if (data !== undefined) {// console.log(this.ruleForm.isMappingMajor)let sumData = [];data.map((index) => {if (index.length >= 6) {index = index.split(',')}// console.log(index)if (index.length === 2 && index.constructor === Array) {index = index.slice(-1)}if (index.length === 3 && index.constructor === Array) {index = index.slice(-1)}sumData = sumData.concat(index)return sumData})// console.log(newArr(sumData))return newArr(sumData)} else {data = []// console.log(data)return data}function newArr(arr) {return ([...new Set(arr)])}}

然后要做的是把从后端获取的数据，转化成前端可以展示的数据，这里也是一个方法，把后端获取来的数据进行转化

useMajors(data) {if (data !== null) {var goodMajors = data.map(item => {if (item.length === 4) {item = item.substr(0, 2) + ',' + item}if (item.length === 6) {item = item.substr(0, 2) + ',' + item.substr(0, 4) + ',' + item}return item})return goodMajors}}

好了，根据以上的代码，我的数据就可以自如转化了，接下来附上，我当初为了写方法写的HTML文件，这个可能帮助会更大一些

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>数组分隔</title>
</head><body></body>
<script>var arr1 = [['02'],['05', '0501', '050101'],['01', '0101', '010105'],['01', '0104'],['04']]var arr2 = ['02', '050101', '010105', '0104', '04']var sumData = [];arr1.map((index) => {console.log(index)console.log(index.constructor == Array)if (index.length === 2 && index.constructor === Array) {index = index.slice(-1)}if (index.length === 3 && index.constructor === Array) {index = index.slice(-1)}sumData = sumData.concat(index)return sumData})function newArr(arr) {// .new Set方法，返回是一个类数组，需要结合 ...运算符，转成真实数组return ([...new Set(arr)])}console.log(newArr(sumData))var newData = newArr(sumData)var good = newData.map((index) => {if (index.length === 4) {index = index.substr(0, 2) + ',' + index}if (index.length === 6) {index = index.substr(0, 2) + ',' + index.substr(0, 4) + ',' + index}console.log(index)return index})console.log(good)var a = ["02", "05,0501,050101", "01,0101,010105", "01,0104", "04"]var b = a.map((index) => {if (index.length >= 6) {index = index.split(',')}return index})console.log(b)
</script></html>

上面的方法和下面的HTML代码相对照着看，会更清晰哦！！！

前端数组转字符串，字符串转数组相关推荐

前端 get 请求拼接数组转换成字符串
取出每条数据ID放到一个数组中 data() { return {checkIds:[1,2,3] } } get 请求 url 拼接不能拼接数组可以拼接字符串来解决 //请求字符串拼接var p ...
前端JS数组问题: 数组去重, 字符串分割成数组, 数组拼接成字符串
1. 数组去重: Array.from(new Set(arr_name)) let arr1 = ['张三','李四','王五','李四','赵六','张三'];let arr2 = Array.f ...
element js 包含字符_携程春招题目字符串截取和数组升维
编程风格简单陈述一下文中代码使用的编程风格: 使用 ES5,以避免有些在线编程平台不支持 ES6 的状况(所以在这里没有用 new Set()) Airbnb 代码规范,不使用单 var 模式变量 ...
把数组里的字符串转换成数字或者把数字转换成字符串
把数组里的字符串转换成数字或者把数字转换成字符串场景例:如以下接口返回的'1,2,3' 前端需要转成数组处理完的数组里面的每一项值都变成的字符串,而我想要的是[1,2,3] 于是就找到了下面的方 ...
json 解析转java对象数组对象数组对象_json字符串转java对象数组
需要引入json-lib-2.2-jdk15.jar和ezmorph-1.0.6.jar包 String itemStar = request.getParameter("itemStar& ...
html5将数组转换为字符串,js如何将数组元素转换为字符串
数组转换为字符串代码实例-51前端 window.οnlοad=function(){ var mian=document.getElementById("mian"); var ...
Js常用方法：JS字符串截取、数组截取等
Js常用方法:JS字符串截取.数组截取等 Js常用方法(二)String字符串 .Array数组减操作前言:前端开发中最常见的就是对字符串.数组或对象增删改查等操作下面总结一下常用且比较实用的方 ...
c语言json数组转字符串数组,Json数组转换字符串、字符串转换原数组......
Title 标题: 颜色: 字体: 合并数组,改变原数组apply与不改变原数组一看见合并数组,可能第一反应就是concat,concat确实具有我们想要的行为,但它实际上并不附加到现有数组,而是创 ...
vue将数组转换json字符串:JSON.stringify()以及json字符串转换成vue数组:
JSON.stringify():方法用于将 JavaScript 值转换为 JSON 字符串. 语法 JSON.stringify(value [, replacer] [, space]) val ...
内置对象的API Array数组对象 String字符串对象 json字符串 JSON对象 js作用域及变量预解析引用类型与值类型区别共享引用基本包装类型数组去重
01-内置对象的API a.Date对象获取时间 b.Array对象数组加工 c.String对象字符串加工 d.json字符串的语法格式 e.JSON对象的字符串与对象转换应用 02-JS作用域 a ...

前端数组转字符串，字符串转数组

这是我保存级联选择器数据获取的数据

这个是后端想要的数据样子

到这里还不是最狗的，为了让级联选择器把已选择的数据展示出来，我展示的数据，数据需要的格式是这样的

首先要做的是把保存的数据转化成后端需要的数据，在这里是在vue里写了一个方法，在保存的时候，对数据进行转化。

然后要做的是把从后端获取的数据，转化成前端可以展示的数据，这里也是一个方法，把后端获取来的数据进行转化

好了，根据以上的代码，我的数据就可以自如转化了，接下来附上，我当初为了写方法写的HTML文件，这个可能帮助会更大一些

前端数组转字符串，字符串转数组相关推荐

最新文章

热门文章

前端 数组转字符串，字符串转数组

这是我保存级联选择器数据获取的数据

这个是后端想要的数据样子

到这里还不是最狗的，为了让级联选择器把已选择的数据展示出来，我展示的数据，数据需要的格式是这样的

首先要做的是把保存的数据转化成后端需要的数据，在这里是在vue里写了一个方法，在保存的时候，对数据进行转化。

然后要做的是把从后端获取的数据，转化成前端可以展示的数据，这里也是一个方法，把后端获取来的数据进行转化

好了，根据以上的代码，我的数据就可以自如转化了，接下来附上，我当初为了写方法写的HTML文件，这个可能帮助会更大一些

前端 数组转字符串，字符串转数组相关推荐

最新文章

热门文章

前端数组转字符串，字符串转数组

前端数组转字符串，字符串转数组相关推荐