Vue如何循环map对象的key和value

Question

如题在面试前端工程师过程中问道，如果循环一个对象的key value？

Answer 1

是问对象还是Map？对象的话直接v-for，map的话先转成对象

Answer 2

是js循环还是式vue指令的循环

Answer 3

如果只是对象你可以用 for...in 来操作，也可以用 for...of + Object.entries()。

var obj = {a:1, b:2, c:3};

for (let prop in obj) {
  console.log(`obj.${prop} =  ${obj[prop]}`);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for (const [key, value] of Object.entries(obj)) {
  console.log(`obj.${key} = ${value}`);
}
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

如果你说的是Map结构的对象，可以直接用 for 循环来输出

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let [key, value] of map.entries()) {
  console.log(`map.get(${key}) = ${value}`);
}
// "map.get(F) = no"
// "map.get(T) = yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(`map.get(${key}) = ${value}`);
}
// "map.get(F) = no"
// "map.get(T) = yes"

// 如果要求不高也可以直接展开
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]

相关文档：

for...in - JavaScript | MDN
for...of - JavaScript | MDN
Object.entries() - JavaScript | MDN
Set 和 Map 数据结构 - ECMAScript 6入门