ES6 中的解构赋值与对象属性访问

Posted 2023-02-22

【中文标题】ES6 中的解构赋值与对象属性访问

【英文标题】：Destructuring assignment vs object property access in ES6

【发布时间】：2018-06-16 15:35:48

【问题描述】：

var bmw = cars.bmw 和 var bmw = cars 有什么区别？哪种方式更好？

var cars = 
    bmw: "M3",
    benz: "c250"


var bmw = cars.bmw // M3
var bmw = cars // M3

我已经看到人们在 Nodejs 中这样做了。是一样的吗？

var ObjectId = require('mongodb')
var ObjectId = require('mongodb').ObjectID;

【问题讨论】：

只有您可以决定您更喜欢哪个，它们的作用基本相同。通常在只分配单个变量时，使用解构并没有太大的简洁优势。

var bmw = cars vs var bmw = cars.bmw 你只写了一次bmw，因此如果你更改该属性，编辑的地方就会减少。你有一个很好的别名语法和一个更简洁的默认值方式（imo）。不确定你，但这对我来说已经足够了:)

【参考方案1】：

在bmw = cars.bmw 上，您将对象属性分配给变量，而var bmw = cars 将对象解构到给定的变量列表中。

结果没有区别（在您的情况下），bmw 将具有所需的M3 值。

此外，在解构对象时，您可以列出几个变量进行分配，而 = 是 1 对 1 分配，其中 右侧部分被分配给左边。

---

你也可以像

那样在解构时重命名变量

const  bmw: BeeMWee  = cars;

【讨论】：

"但在后台它的行为不同" - 怎么会这样？我会反其道而行之：虽然在语法上看起来不同，但它们在底层具有完全相同的语义。

@Bergi 今天晚上我会读到的！谢谢指出！

@Bergi 它们并不完全相同。对象解构赋值将破坏属性 getter 的使用。见：easy-peasy.now.sh/docs/api/…

@Rob_vH 这太垃圾了。语义完全相同相同。您链接的示例代码中的问题实际上是在 useStoreState 映射器函数内部和外部运行 getter。使用等效的解构 (const isLoggedIn = useStoreState((session: isLoggedIn ) => isLoggedIn);) 可以正常工作，并且在回调之外使用点语法 (const isLoggedIn = useStoreState(state => state.session).isLoggedIn) 将具有完全相同的损坏更改检测。

@Bergi 尽管有不必要的“垃圾”侮辱，但还是很棒的澄清。那里显示的模式非常流行，在拉取请求中，我经常必须向那些认为const thing = accessor(some) 是const thing = accessor(some.thing) 的较短版本的开发人员澄清。这是解构赋值的常见用法，因为它缩短了代码。然而，它忽略了后者在解构发生之前返回整个对象的事实。最后一步（点赋值与目标赋值）的语义是相同的。整体操作的语义不