JavaScript 中解构赋值怎么重命名变量
在 javascript 中使用解构赋值重命名变量，需要在属性名后使用冒号 : 并指定新的变量名。这种语法允许你从对象或数组中提取数据时，将提取到的值赋给一个与源属性名不同的本地变量，从而避免命名冲突或简化代码逻辑。
如何从对象中解构并重命名属性
当从对象中解构时，语法为 { sourceProperty: newVariable }。这表示从对象的 sourceProperty 键中取值，并将其存储到名为 newVariable 的变量中。如果源属性不存在且未提供默认值，新变量将为 undefined。
const user = {
firstName: 'Alice',
lastName: 'Smith'
};
// 重命名 firstName 为 name, lastName 为 surname
const { firstName: name, lastName: surname } = user;
console.log(name); // 输出: Alice
console.log(surname); // 输出: Smith
console.log(firstName); // ReferenceError: firstName is not defined上述代码展示了如何从 user 对象中提取 firstName 和 lastName，并将它们分别重命名为 name 和 surname。执行后，name 的值为 'Alice'，surname 的值为 'Smith'。原始属性名 firstName 和 lastName 在当前作用域中不可用，尝试访问会抛出引用错误。
立即学习“Java免费学习笔记（深入）”；
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
如何从数组中解构并重命名元素
数组解构通常按位置匹配，但也可以使用逗号跳过元素或在特定位置重命名。虽然数组解构主要依赖索引，但你可以通过结合对象解构或使用临时变量来实现更复杂的重命名需求，或者在对象嵌套数组时使用重命名。对于纯数组，直接重命名不常见，因为位置即语义，但你可以将数组元素解构到具有描述性名称的变量中，这在语义上等同于重命名。
const coordinates = [10, 20]; // 将第一个元素重命名为 x, 第二个为 y const [x, y] = coordinates; console.log(x); // 输出: 10 console.log(y); // 输出: 20 // 跳过第一个元素，重命名第二个为 z const [, z] = coordinates; console.log(z); // 输出: 20
在上面的例子中，[x, y] 将数组的第一个元素赋给 x，第二个赋给 y。通过 [, z]，我们跳过了第一个元素，将第二个元素赋给 z。这种按位置分配并赋予新变量名的方式，是数组解构中实现“重命名”的主要手段。
解构赋值中默认值与重命名的交互结果是什么
当解构的属性不存在时，如果提供了默认值，重命名后的变量将获得该默认值。如果没有提供默认值，变量将为 undefined。默认值可以在重命名语法中直接指定，格式为 { sourceProperty: newVariable = defaultValue }。
const config = {
theme: 'dark'
};
// 重命名 theme 为 mode，并提供默认值 'light'
const { theme: mode = 'light' } = config;
console.log(mode); // 输出: dark
// 假设 config 中没有 language 属性
const { language: lang = 'en' } = config;
console.log(lang); // 输出: en
// 如果显式传入 undefined，也会触发默认值
const { theme: mode2 = 'light' } = { theme: undefined };
console.log(mode2); // 输出: light这段代码验证了默认值与重命名的结合使用。在第一个例子中，config.theme 存在，所以 mode 得到 'dark'。在第二个例子中，config.language 不存在，因此 lang 获得默认值 'en'。第三个例子显示，即使属性存在但其值为 undefined，默认值也会被触发，mode2 变为 'light'。这表明默认值机制在解构重命名中依然有效，且优先级高于 undefined 值。
