如何遍历拿到开头相同的属性名_遍历对象属性前缀一样的-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60518344/article/details/121967749

这篇博客介绍了如何在JavaScript中遍历数据并获取开头相同属性名的值。通过定义共享属性部分，遍历数据键，使用indexOf检查符合条件的键，并根据规则查找对应的content值，将结果构建成新的键值对。文章还提到了动态绑定和数组接收值的技巧，特别适用于前端开发中的数据处理场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，这是data里面的数据

需要遍历拿到的是红框里的数据

思路：

1.先定义相同的属性部分

2.遍历数据里的键

3.在遍历里面先取到section再取content：

1）用indexOf判断是否有符合条件（有相同部分）的键

2）有的话拿到键里面的值value，没有就直接返回

3）再取出该键的最后一个字符作key，作为查找content的key

（因为section1对应的是content1，所以可以这样来查找）

4）把取到的值按照key:value放入数组里面,形成新的键值对

4.把数据放入数组的时候直接取value

遍历方法：

      const type1 = 'content'
      const type2 = 'section'
      const forbiddenMap = ['content', 'contentVos'] //白名单
      const map = new Map()
      Object.keys(data).forEach(key => {
        if(forbiddenMap.includes(key)) return //如果存在白名单里面的键，则跳出循环
        const isType1 = key.indexOf(type1) !== -1
        const isType2 = key.indexOf(type2) !== -1
        if(isType1 || isType2) {
          const v = data[key] || '' //拿到键里面的值
          if(!v) return   //如果值为空则直接返回
          const idx = key.slice(-1) // 取出字符串最后的值
          const isHasMap = map.has(idx) //检查Map中是否存在键为idx的元素，返回一个布尔值
          if(isHasMap) {
            const target = map.get(idx) //返回键名为idx里面的value
            target[key] = v 
            map.set(idx, target)//将键（idx）值（target）对添加到Map对象 { 1: { content1: 'xxx', section1: 'zzzz' } }
          } else {
            map.set(idx, { [key]: v })  
          }
        }
      })
      // [...map] => [[1, {}]], [2, {}]]
      const sectionList = [...map].map(item => item[1])   // 返回一个新数组：[{ section1: 'xxx', content1: 'zzz'}, {...}]
      this.list = sectionList

记得定义一个空数组接收值