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

夜箜泠

已于 2022-08-02 15:08:42 修改

阅读量1.4k

点赞数

分类专栏： javascript学习文章标签：前端 javascript

于 2022-08-02 12:20:58 首次发布

本文链接：https://blog.csdn.net/XXX51129/article/details/126118658

版权

javascript学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前段时间写了一个项目，需要用到级联选择器，就是 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代码相对照着看，会更清晰哦！！！

夜箜泠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端数组转字符串，字符串转数组

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

扫一扫