前端 数组转字符串，字符串转数组
前段时间写了一个项目，需要用到级联选择器，就是 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代码相对照着看，会更清晰哦！！！
THE END
上一篇
下一篇
