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

技术博客 (137) 2023-09-16 17:20:01

前段时间写了一个项目,需要用到级联选择器,就是 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

发表回复