小程序开发中对象数组转参数字符串的实践指南

1. 为什么小程序开发需要对象数组转参数字符串？

在小程序开发中，我们经常遇到需要将对象数组转换为参数字符串的场景。最常见的情况就是发起网络请求时，需要将复杂的数据结构转换为URL查询字符串。比如微信小程序的wx.request接口，或者uni-app的uni.request方法，都需要将参数对象序列化为字符串形式。

我最近在开发一个电商类小程序时，就遇到了这样的需求：商品筛选条件是一个包含多个属性的对象数组，需要转换为形如"color=red&size=XL&price=100-200"的查询字符串。这个转换过程看似简单，但实际开发中会遇到各种边界情况需要处理。

2. 基础实现方案解析

2.1 使用原生URLSearchParams

最简单的实现方式是使用ES6引入的URLSearchParams API：

javascript复制function toQueryString(params) {
  return new URLSearchParams(params).toString()
}

这种方法对于简单对象很有效，但存在几个局限性：

1. 无法正确处理嵌套对象和数组
2. 在小程序环境下兼容性需要测试
3. 对特殊字符的编码方式可能与后端要求不一致

2.2 手动实现基础版本

更可靠的方式是手动实现转换逻辑：

javascript复制function objToQueryString(obj) {
  return Object.keys(obj)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}`)
    .join('&')
}

这个基础版本可以处理大多数简单场景，但面对对象数组时就会出问题。比如：

javascript复制const filters = [
  { field: 'color', value: 'red' },
  { field: 'size', value: 'XL' }
]

直接使用上述方法会得到错误的字符串表示。

3. 处理对象数组的高级方案

3.1 递归处理嵌套结构

为了正确处理对象数组，我们需要实现递归处理：

javascript复制function buildQueryString(obj, prefix) {
  const query = []
  
  for (const key in obj) {
    if (!obj.hasOwnProperty(key)) continue
    
    const value = obj[key]
    const fullKey = prefix ? `${prefix}[${key}]` : key
    
    if (value !== null && typeof value === 'object') {
      query.push(buildQueryString(value, fullKey))
    } else {
      query.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(value)}`)
    }
  }
  
  return query.join('&')
}

这个方法可以处理多层嵌套的对象和数组，生成如"filters[0][field]=color&filters[0][value]=red"这样的字符串。

3.2 处理数组的特殊情况

在实际项目中，我们经常需要处理数组的特殊表示形式。比如后端可能期望接收"colors[]=red&colors[]=blue"这样的格式。这时可以修改我们的实现：

javascript复制function buildQueryString(obj, prefix) {
  // ...前面的代码相同
  
  if (Array.isArray(value)) {
    const arrayKey = `${fullKey}[]`
    value.forEach(item => {
      if (typeof item === 'object') {
        query.push(buildQueryString(item, arrayKey))
      } else {
        query.push(`${encodeURIComponent(arrayKey)}=${encodeURIComponent(item)}`)
      }
    })
  } 
  // ...其余代码
}

4. 小程序环境下的特殊考量

4.1 微信小程序的URL长度限制

微信小程序对请求URL有长度限制（约1024字节），当参数过多时需要考虑：

1. 对长参数进行压缩处理
2. 改用POST请求发送大数据
3. 对重复参数进行优化

4.2 特殊字符编码问题

小程序环境下需要注意：

1. 空格应该编码为"%20"还是"+"
2. 中文字符的编码一致性
3. 特殊符号如"&"、"#"的处理

建议统一使用encodeURIComponent进行编码，并在必要时进行二次验证。

5. 性能优化实践

5.1 缓存处理结果

对于频繁使用的参数对象，可以考虑缓存转换结果：

javascript复制const queryCache = new WeakMap()

function cachedBuildQueryString(obj) {
  if (queryCache.has(obj)) {
    return queryCache.get(obj)
  }
  
  const result = buildQueryString(obj)
  queryCache.set(obj, result)
  return result
}

5.2 避免不必要的转换

在某些情况下，可以直接使用JSON.stringify：

javascript复制function smartToString(params) {
  if (isSimpleObject(params)) {
    return buildQueryString(params)
  }
  return JSON.stringify(params)
}

6. 实际应用案例

6.1 商品筛选功能实现

假设我们有一个电商小程序的商品筛选功能：

javascript复制const filters = {
  category: 'clothing',
  attributes: [
    { name: 'color', value: 'blue' },
    { name: 'size', value: 'M' }
  ],
  priceRange: { min: 100, max: 200 },
  sort: 'price_asc'
}

const queryString = buildQueryString(filters)
// 输出: category=clothing&attributes[0][name]=color&attributes[0][value]=blue
// &attributes[1][name]=size&attributes[1][value]=M&priceRange[min]=100
// &priceRange[max]=200&sort=price_asc

6.2 分页参数处理

分页参数是另一个常见用例：

javascript复制const pagination = {
  page: 1,
  pageSize: 10,
  filters: {
    status: ['published', 'promoted']
  }
}

7. 常见问题与解决方案

7.1 日期对象的处理

日期对象需要特殊处理：

javascript复制if (value instanceof Date) {
  query.push(`${encodeURIComponent(fullKey)}=${encodeURIComponent(value.toISOString())}`)
}

7.2 空值和未定义的处理

根据后端API要求，可能需要忽略null/undefined或特殊处理：

javascript复制if (value == null) {
  // 根据API要求选择忽略或保留
  if (keepNullValues) {
    query.push(`${encodeURIComponent(fullKey)}=`)
  }
  continue
}

7.3 布尔值的处理

布尔值可能需要转换为1/0或true/false字符串：

javascript复制if (typeof value === 'boolean') {
  query.push(`${encodeURIComponent(fullKey)}=${value ? '1' : '0'}`)
  continue
}

8. 完整实现代码

以下是经过生产环境验证的完整实现：

javascript复制function buildQueryString(
  obj,
  prefix,
  options = { arrayFormat: 'brackets', encode: true }
) {
  const query = []
  const { arrayFormat, encode } = options
  
  const encodeValue = val => 
    encode ? encodeURIComponent(val) : val
  
  for (const key in obj) {
    if (!obj.hasOwnProperty(key)) continue
    
    const value = obj[key]
    const fullKey = prefix ? `${prefix}[${key}]` : key
    
    if (value === null || value === undefined) {
      continue
    }
    
    if (Array.isArray(value)) {
      if (value.length === 0) continue
      
      if (arrayFormat === 'indices') {
        value.forEach((item, i) => {
          if (typeof item === 'object') {
            query.push(buildQueryString(item, `${fullKey}[${i}]`, options))
          } else {
            query.push(`${encodeValue(fullKey)}[${i}]=${encodeValue(item)}`)
          }
        })
      } else if (arrayFormat === 'brackets') {
        value.forEach(item => {
          if (typeof item === 'object') {
            query.push(buildQueryString(item, `${fullKey}[]`, options))
          } else {
            query.push(`${encodeValue(fullKey)}[]=${encodeValue(item)}`)
          }
        })
      } else {
        value.forEach(item => {
          query.push(`${encodeValue(fullKey)}=${encodeValue(item)}`)
        })
      }
    } else if (typeof value === 'object' && !(value instanceof Date)) {
      query.push(buildQueryString(value, fullKey, options))
    } else {
      const finalValue = value instanceof Date ? value.toISOString() : value
      query.push(`${encodeValue(fullKey)}=${encodeValue(finalValue)}`)
    }
  }
  
  return query.join('&').replace(/%20/g, '+')
}

9. 单元测试建议

为确保转换函数的可靠性，建议编写以下测试用例：

1. 简单平铺对象的转换
2. 多层嵌套对象的转换
3. 各种数组格式的转换
4. 特殊值(null, undefined, Date等)的处理
5. 编码结果的验证
6. 性能基准测试

10. 在uni-app中的使用技巧

在uni-app中，可以将其封装为全局方法：

javascript复制// main.js
Vue.prototype.$toQueryString = function(obj) {
  return buildQueryString(obj)
}

然后在组件中使用：

javascript复制const query = this.$toQueryString(params)
uni.request({
  url: `https://api.example.com/products?${query}`
})

对于需要频繁使用的场景，可以考虑使用Vue的filter或computed属性优化。