JavaScript 中怎么在解构时重新命名多个冲突的变量-js教程-PHP中文网

javascript解构中解决同名属性冲突的方法是使用别名语法“原属性名: 新变量名”，可分别解构多个对象、函数参数中重命名，或结合默认值增强健壮性。

javascript 中怎么在解构时重新命名多个冲突的变量

在 JavaScript 解构中，当从对象中提取多个同名属性（比如来自不同来源的对象）时，变量名会冲突。解决方法是用 解构赋值时的别名语法：在冒号 : 后指定新变量名。

基本语法：用 `原属性名: 新变量名` 重命名

这是最直接的方式，适用于单个或多个属性重命名：

const obj1 = { name: 'Alice', age: 30 };
const obj2 = { name: 'Bob', city: 'NYC' };

// 解构并重命名，避免 name 冲突
const { name: name1, age } = obj1;
const { name: name2, city } = obj2;

console.log(name1); // 'Alice'
console.log(name2); // 'Bob'
console.log(age);   // 30
console.log(city);  // 'NYC'

一次性解构多个对象并重命名所有冲突项

如果要从多个对象中提取同名属性，可分别解构，也可用嵌套解构 + 别名组合处理（注意：不能在一个解构语句里重复使用同一属性名）：

❌ 错误写法（同一解构中不能两次写 name）：
const { name, name } = obj;
✅ 正确做法：分别解构，或用临时对象包装后解构

例如合并两个对象再重命名：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

const obj1 = { id: 1, status: 'active' };
const obj2 = { id: 2, status: 'pending' };

// 包装成新对象，再解构重命名
const { id: id1, status: status1 } = obj1;
const { id: id2, status: status2 } = obj2;

函数参数中解构重命名（常见于配置合并场景）

接收多个配置对象时，常需重命名以区分来源：

function init({ url: apiUrl, timeout: apiTimeout } = {}, { url: wsUrl, timeout: wsTimeout } = {}) {
  console.log('API URL:', apiUrl);
  console.log('WS URL:', wsUrl);
  console.log('API timeout:', apiTimeout);
  console.log('WS timeout:', wsTimeout);
}

init({ url: '/api', timeout: 5000 }, { url: 'wss://ws', timeout: 10000 });

进阶技巧：结合默认值与重命名

重命名和默认值可以共存，格式为 原属性名: 新变量名 = 默认值：

const { host: dbHost = 'localhost', port: dbPort = 5432 } = config.db || {};
const { host: apiHost = 'api.example.com', port: apiPort = 443 } = config.api || {};

这样既避免命名冲突，又保证健壮性。