Javascript 解构审讯

Question

我有以下 javascript 代码：

const {
  tr,
  selection: { $from }
} = state;

我知道上面是一个解构结构，但我不确定 : { $from } 部分，因为 selection 对象中没有 $from 属性（请参阅屏幕截图)...

state中也没有tr...

有人可以解释一下吗？

edit：实际上，确实有一个$from 属性（见截图），但它是嵌套的。有人可以解释一下解构如何获取嵌套属性吗？

Answer 1

解构允许您将对象字段解包到新变量中。

例如，如果您的 state 对象如下所示：

state = {
   selection: {
       ranges = [1,2,3],
       $head = "abc"
   },
   storedMarks = 99
}
const { selection, storedMarks } = state // destructuring

console.log(selection) // > { ranges:.., $head... } 
console.log(storedMarks) // > 99

已创建新变量 selection 和 storedMarks。

如果您尝试检索 tr 和 $from

const {
  tr,
  selection: {
     ranges: [
        $from: myFromValue
     ]
  }
} = state;

console.log(tr); // will print your tr value that is in `state` object, if it exists
console.log(myFromValue); // will print your $From value

Javascript 解构审讯

Javascript destructuring interrogation

javascript

destructuring