有关entries的用法

Object.entries(obj）

会把对象转换成一个 二维数组，每一项是 [key, value]

const obj = {
  name: 'Alice',
  age: 20,
}
console.log(Object.entries(obj))
/* 输出：
[
  ['name', 'Alice'],
  ['age', 20],
]
*/

解构写法

常规写法：

Object.entries(obj).forEach(item => { 
  ... // item[0]代表key，item[1]代表value
})

解构写法：

// 只取第一个元素（key）
Object.entries(obj).forEach(([key])=> { 
  ... // key => item[0]
})
// 只取第二个元素（value），第一个元素用逗号占位
Object.entries(obj).forEach(([_, value])=> { 
  ... // value => item[1]
})
// 同时取 key 和 value
Object.entries(obj).forEach(([key, value])=> { 
  ... // key => item[0], value => item[1]
})

常用场景

1、遍历对象

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value)
})
// 输出:
// name Alice
// age 20
// city Beijing

2、筛选对象属性

// Object.fromEntries() 可以把二维数组再变回对象
const filtered = Object.fromEntries(
  Object.entries(obj).filter(([key, value]) => typeof value === 'string')
)
console.log(filtered)
// { name: 'Alice', city: 'Beijing' }

3、转换对象

const newObj = Object.fromEntries(
  Object.entries(obj).map(([key, value]) => [key.toUpperCase(), value])
)
console.log(newObj)
// { NAME: 'Alice', AGE: 20, CITY: 'Beijing' }

实际应用

1、映射关系对象：

const obj = { "名称": "小明", "年龄": 20, "性别": "男" }
转化为
const obj = { name: '小明', age: 20, sex: '男' }

// 映射表：中文字段 → 英文字段
const fieldMap = { "名称": "name", "年龄": "age", "性别": "sex" }
const newObj = {}
// 遍历映射表，把原对象的值映射到新对象
for (const [chKey, enKey] of Object.entries(fieldMap)) {
  newObj[enKey] = obj[chKey]
}
console.log(newObj)
// 输出: { name: '小明', age: 20, sex: '男' }

2、整合数据

// 已知
cardTypeMap = {
  迎新卡池: 1,
  常驻卡池: 2,
  限定卡池: 3,
}
cardTypeNameMap = {
  迎新卡池: "welcome",
  常驻卡池: "normal",
  限定卡池: "limited",
}
卡池数据解构 
cardsData = {
  welcome: { cards: welcomeCardDatas, avg: avg, .... },
  normal: { cards: normalCardDatas, avg: avg, .... },
  limited: { cards: limitedCardDatas, avg: avg, .... },
}
用户选择类型（可变）
selectedTypes = ref([1, 2]); // 例如用户选择了 迎新、常驻

得到对应的用户选择的内容合并成一个数组
解决步骤：数字 -》卡池名称 -》对应的字段名 -》筛选字段 -》合并数组

1、得到对应字段名称
const statsTypeName = computed(() => {
  return Object.entries(typeMap)
    .filter(([label]) => selectedTypes.value.includes(cardType.l2v(label)))
    .map(([_, name]) => name);
});

2、根据选中类型筛选并合并卡片
const newDialogCards = computed(() => {
  return Object.entries(cardsData)  // [[key, value], ...] 
    .filter(([key]) => statsTypeName.value.includes(key))  // 只保留选中的
    .flatMap(([_, value]) => value.cards) // 合并 cards 数组，[_, value]是指忽略第一个元素，只保留第二个
    .sort((a, b) => b.id - a.id);  // 可选：按 id 降序
});
// [ [welcome, { cards: [card1, card2], ... }], [normal, { cards: [card3,card4],... }]]
// [card1, card2, card3, card4]
// flatMap()相当于map(...).flat()

解构详细介绍第二步

1、
const typeMap = {
  welcome: { cards: [1, 2, 3], total: 3 },
  normal:  { cards: [4, 5, 6], total: 3 }
};

2、Object.entries(typeMap)
[
  ["welcome", { cards: [1, 2, 3], total: 3 }],
  ["normal",  { cards: [4, 5, 6], total: 3 }]
]

3、.flatMap(([_, value]) => value.cards)
   3.1、忽略 key，取 value.cards：
        ["welcome", {...}] → [1, 2, 3]
        ["normal", {...}]  → [4, 5, 6]
   3.2、flatMap 会自动“扁平化”
        [[1,2,3], [4,5,6]] → [1,2,3,4,5,6]