关于Array.from结合map生成key的来源及addKeys函数异常问题咨询

先帮你拆解几个核心疑问，一步步理清楚：

1. 为什么contactsList有key，但map出来的contactsOnly没有？ #

大概率是你在map的时候只返回了对象里的部分属性（比如姓名这类联系信息），没把原对象的key字段包含进去。举个例子，如果你的map是这么写的：

const contactsOnly = contactsList.map(item => ({ firstName: item.firstName }));

那自然只会得到包含firstName的对象，原有的key就被丢弃了。如果要保留key，要么浅拷贝整个对象，要么明确把key加进去：

// 方式1：浅拷贝所有属性（包括key）
const contactsOnly = contactsList.map(item => ({ ...item }));

// 方式2：明确指定需要的属性+key
const contactsOnly = contactsList.map(item => ({
  key: item.key,
  firstName: item.firstName,
  // 其他需要的属性...
}));

补充一点：如果contactsList里的key是React列表渲染时自动添加的（而非对象本身的属性），那console.log看到的key其实是React DevTools帮你显示的，实际对象里并没有这个属性——这种情况你就得自己生成key了。

2. 调用addKeys(contactsOnly)后得到带编号的对象，且key为undefined？ #

这说明你的addKeys函数逻辑有问题。比如它可能想把数组转成以key为键的对象，但因为contactsOnly里的对象没有key字段，所以取到的item.key是undefined；或者它错误地把索引当成对象的键，同时给key设成了undefined。

举个错误的addKeys示例：

// 错误示例：用不存在的item.key当对象键
function addKeys(arr) {
  return arr.reduce((acc, item) => {
    acc[item.key] = item; // item.key是undefined，最后所有元素都存在acc[undefined]里
    return acc;
  }, {});
}

如果你的需求是给数组里的每个对象添加key（比如用索引当key）并返回数组，正确的addKeys应该这么写：

function addKeys(arr) {
  return arr.map((item, index) => ({
    ...item,
    key: index.toString() // 把索引转成字符串，符合React对key的要求
  }));
}

如果你的需求是把数组转成以key为键的对象，那要先确保contactsOnly里的对象有key，再写逻辑：

function addKeys(arr) {
  return arr.reduce((acc, item) => {
    if (item.key) { // 先检查key存在，避免undefined键
      acc[item.key] = item;
    }
    return acc;
  }, {});
}

3. map的索引会传递给addKeys吗？ #

不会直接传递。map的索引是map回调函数里的局部参数，如果你不在map的时候把索引存到contactsOnly的对象里，addKeys根本拿不到这个索引。比如你想让addKeys用map的索引当key，就得在map的时候先把索引存进去：

const contactsOnly = contactsList.map((item, index) => ({
  ...item,
  mapIndex: index // 把map的索引存成一个字段
}));

然后addKeys就能通过item.mapIndex拿到这个值了。

内容的提问来源于stack exchange，提问作者DCR