二维数组的解析

最新推荐文章于 2024-11-13 01:18:00 发布

a_dream(前端)

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量145

点赞数 2

文章标签： javascript 前端 vue.js 数据结构

本文链接：https://blog.csdn.net/a_dream12/article/details/130130930

版权

文章介绍了一个JavaScript函数，用于解析二维数组形式的多选地址数据。当数据过多或全选某地区时，将数据转换为易于操作的结构，如XX市全域。解析过程涉及遍历、创建新对象和数组，以及自定义方法来计算城市和省份的区域数量。最终，解析后的数据被展示在表格中。

摘要由CSDN通过智能技术生成

在多选地址区域类型的数据时, 选中的数据如果绑定的是二维数组类型的数据, 但是展示的时候由于数据太多或是某个地区全选的话, 将它解析为XX市全域, 或按照省份/城市将数据解析为容易操作的结构, 如图

将以上数据结构进行解析得到以下结构, 便于展示

解析步骤

function myFunction(list) { // 声明一个函数
    const newData = {} // 新建一个对象,用于存放按各省份和城市存放数据
        const resultArr = [] // 新建一个数组,用于存放解析后得数据结构
        list.forEach((v, i) => {
          if (newData[v[0]] !== undefined) {
            if (newData[v[0]][v[1]] !== undefined) {
              newData[v[0]][v[1]].push(v)
            } else {
              newData[v[0]][v[1]] = [v]
            }
          } else {
            newData[v[0]] = { [v[1]]: [v] }
          }
        })
        // eslint-disable-next-line
        for (const key in newData) {
          let num = 0
          // eslint-disable-next-line
          for (const skey in newData[key]) {
            num += newData[key][skey].length
            if (this.getProvinceLength(key) === num) {
              newData[key] = { value: key + '全域' }
            } else if (this.getCityLength(key, skey) === newData[key][skey].length) {
              newData[key][skey] = { sValue: key + skey + '全域' }
            }
          }
        }
        console.log(newData)
        // eslint-disable-next-line
        for (const key in newData) {
          if (!(newData[key] instanceof Array) && newData[key].value) {
            resultArr.push(newData[key].value)
          } else {
            // eslint-disable-next-line
            for (const skey in newData[key]) {
              if (!(newData[key][skey] instanceof Array) && newData[key][skey].sValue) {
                resultArr.push(newData[key][skey].sValue)
              } else {
                const r = newData[key][skey].map(sItem => sItem.join(''))
                resultArr.push(...r)
              }
            }
          }
        }
        console.log(resultArr)
        return resultArr.join('；')
}
myFunction(doubleList); // 调用函数

需要再定义两个方法, 来查询城市内区域数量和省内区域数量

    // addressList为数据源
    // 获取省的长度
    getProvinceLength(province) {
      let num = 0
      addressList.filter(item => item.name === province)[0].children.forEach(sItem => {
        num += sItem.children.length
      })
      return num
    },

    // 获取城市的长度
    getCityLength(province, city) {
      return addressList.filter(item => item.name === province)[0].children?.filter(sItem => sItem.name === city)[0].children.length
    }