ES6中如何将对象数组的id、name键重命名为label、value？

这在ES6里实现起来非常简洁，核心思路是用Array.prototype.map()遍历数组，配合对象解构赋值来直接重命名属性，一步到位得到你想要的结果。

最常用的简洁写法 #

const countries = [ {"id": 1, "name": "Afghanistan"}, {"id": 2, "name": "Albania"}, {"id": 3, "name": "Algeria"}, {"id": 4, "name": "American Samoa"} ];

// 生成新数组，不修改原数据（推荐做法）
const renamedCountries = countries.map(({ id: label, name: value }) => ({ label, value }));

console.log(renamedCountries);
// 输出结果：
// [ {"label": 1, "value": "Afghanistan"}, {"label": 2, "value": "Albania"}, {"label": 3, "value": "Algeria"}, {"label": 4, "value": "American Samoa"} ]

代码解释 #

• map() 方法会遍历原数组的每个对象，返回一个全新的数组，不会修改原数据（这是更安全的做法，避免意外污染原始数据源）。
• ({ id: label, name: value }) 是ES6的对象解构语法：把当前遍历到的对象里的id属性值，赋值给变量label；把name属性值赋值给变量value。
• ({ label, value }) 是ES6的对象字面量简写：当属性名和变量名完全相同时，可以省略冒号和重复的变量名，等价于{ label: label, value: value }。

可选：修改原数组（不推荐） #

如果你确实需要直接覆盖原数组，可以这么写（但一般不建议，尽量保留原始数据）：

countries = countries.map(({ id: label, name: value }) => ({ label, value }));

进阶：处理缺失属性的情况 #

如果数组里可能存在缺少id或name的对象，可以给解构的变量设置默认值，避免出现undefined：

const renamedCountries = countries.map(({ id: label = '', name: value = '' }) => ({ label, value }));
// 这里默认值设为空字符串，你可以根据需求改成0、null或者其他值

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