时间戳

首页 > 解决方案 > 关于解构对象。为什么它们未定义？

javascript - 关于解构对象。为什么它们未定义？

问题描述

为什么要获取此代码中的test1值？test2undefined

let car={id:10,style:'go'};

let {test1,test2}=car;

console.log(test1,test2);

标签： javascript

解决方案

您的变量获得值undefined是因为您的对象没有称为test1and的属性test2。与其他任何时候你向一个对象询问它没有的属性一样，结果就是 value undefined。如果要使用与变量名称不同的名称获取属性值，则必须明确：

let {id: test1, style: test2} = car;
//   ^^^        ^^^^^^

现场示例：

let car = {id:10,style:'go'};

let {id: test1, style: test2} = car;

console.log(test1, test2);

或者，当然，使用简写形式并使变量名称与属性名称匹配：

let {id, style} = car;

现场示例：

let car = {id:10,style:'go'};

let {id, style} = car;

console.log(id, style);

您可能会感到困惑，因为数组解构是位置的，而对象解构是基于名称的。变量的名称在数组解构中没有区别：

const array = [1, 2, 3];
const [one, two] = array;
console.log(one, two);

这是因为这两种解构形式本质上是不同的。数组是元素的有序集合，因此数组字面量和数组解构模式都使用位置表示法。对象不是，因此对象文字和对象解构模式（主要）使用基于名称的表示法。（虽然“自己的”对象属性在 ES2015+ 中确实有定义的顺序，但从根本上说对象不是有序的信息集合，使用定义的顺序通常不是最佳实践。）

您在问题中使用的形式实际上是以下形式的简写形式，这并不像它可能应该那样广为人知：

let {id: id} = car;
//   ^^  ^^--- target variable name
//     \------ source property name

这是因为，对象解构语法有意与对象文字语法相同，它只是在赋值的另一端。您可能已经习惯于从对象字面量中的变量初始化对象属性之类的事情：

let id = 42;
let obj = {id: id};
//         ^^  ^^--- source variable name
//           \------ target property name
console.log(obj.id); // 42

...并且可能知道 ES2015 为其引入了简写形式：

let id = 42;
let obj = {id};
console.log(obj.id); // 42

您在问题中使用的形式是简写形式，采用解构模式而不是对象文字。

推荐阅读