遍历对象的方法

一. vue中的v-for遍历对象

    <template>
      <div>
        <div v-for="(item,idx) in title" :key="idx" class="a">{{item}}</div>
      </div>
    </template>

    <script>
    export default {
      name: 'namsIndex',
      data () {
        return {
          title: {
            name: '姓名',
            relationship: '关系',
            wage: '工资收入(元)',
            produce: '生产经营性收入(元)',
            other: '其他收入(元)',
            total: '合计(元)'
          }
        }
      }
    }
    
    

二 . for...in方法 可以遍历数组或对象

遍历对象

      <script>
        let obj = { 
                name: '姓名',
                relationship: '关系',
                wage: '工资收入(元)',
                produce: '生产经营性收入(元)',
                other: '其他收入(元)',
                total: '合计(元)'
        }
        for(let key in obj) {
          console.log(key)
        }
      </script>
             

遍历数组

      let arr = [1,2,3,4]
        for(let i in arr) {
          console.log(i,arr[i]) //i 是下标，arr[i]是当前下标的值
        }
        
        
        

三、Object的方法

var obj = {
  name: '姓名',
            relationship: '关系',
            wage: '工资收入(元)',
            produce: '生产经营性收入(元)',
            other: '其他收入(元)',
            total: '合计(元)'
}
        for ( let item of Object. keys(obj)) {
             console. log( item)
            }//遍历返回键名
        for ( let item of Object.values ( obj)) {
              console.log(item)
            }//遍历返回键值
        for ( let item of Object.entries(obj)) {
              console.log(item)
            }//返回键值对组成的数组，如:[ "key ', 'value ' ]

四、Object.getOwnPropertyNames(obj)

      <script>
    var obj = {
      name: '姓名',
                relationship: '关系',
                wage: '工资收入(元)',
                produce: '生产经营性收入(元)',
                other: '其他收入(元)',
                total: '合计(元)'
    }

    Object.getOwnPropertyNames(obj).forEach(key =>{
    console.log ( key, obj[key])
    })
    // name 姓名
    // relationship 关系
    // wage 工资收入(元)
    // produce 生产经营性收入(元)
    // other 其他收入(元)
    // total 合计(元)
      </script>
     
     

五、使用Reflect.ownKeys(obj)遍历

      <script>
    var obj = {
      name: '姓名',
                relationship: '关系',
                wage: '工资收入(元)',
                produce: '生产经营性收入(元)',
                other: '其他收入(元)',
                total: '合计(元)'
    }

    Reflect.ownKeys (obj).forEach(key=>{console.log ( key , obj[key] )})
    // name 姓名
    // relationship 关系
    // wage 工资收入(元)
    // produce 生产经营性收入(元)
    // other 其他收入(元)
    // total 合计(元)
      </script>