遍历对象的方法

一、vue中v-for遍历对象

  <el-form-item label="状态：">
	   <el-select v-model="searchData.generateStatus">
          <el-option label="全部" value="null"></el-option>
             <el-option
                 v-for="(value, key) in incomeStatusEnum"
                 :key="key"
                 :label="value"
                 :value="key"
             ></el-option>
         </el-select>
     </el-form-item>
     
//data数据
incomeStatusEnum: {
     1: '未开始',
     2: '生成中',
     3: '生成完成',
     4: '生成失败',
 },

//列表中需要显示时候
<el-table-column prop="name" label="状态" min-width="100">
     <template slot-scope="{ row: { generateStatus } }">
         <span v-text="incomeStatusEnum[generateStatus]"></span>
     </template>
 </el-table-column>

二、for…in 遍历数组和对象都可以

*****************************************************对象
var obj = {
       1: '未开始',
       2: '生成中',
       3: '生成完成',
       4: '生成失败',
   }

for (let i in obj) {
     console.log(i, obj[i])  //i是键名，obj[i]是键值
 }
 ****************************************************数组
var arr = ['未开始', '生成中', '生成完成', '生成失败']

 for (let i in arr) {
     console.log(i, arr[i])  //i是index，arr[i]是item
 }

三、Object的方法

var obj = {
       1: '未开始',
       2: '生成中',
       3: '生成完成',
       4: '生成失败',
   }

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)

var obj = {
       1: '未开始',
       2: '生成中',
       3: '生成完成',
       4: '生成失败',
   }

Object.getOwnPropertyNames(obj).forEach(key => {
     console.log(key, obj[key])
 })

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

var obj = {
       1: '未开始',
       2: '生成中',
       3: '生成完成',
       4: '生成失败',
   }

Reflect.ownKeys(obj).forEach(key=>{
console.log(key,obj[key]);
});

链接: https://www.cnblogs.com/yuer20180726/p/11377897.html.