javascript - 解构 [] 与 {}

Question

我对破坏感到困惑。
我在其中使用了 React，我们这样做了

const [ books, setBooks ] = useState([{a:'v'}]

和

const {books} = useContext(BookContext)

为什么我不能

const [books] = useContext(BookContext) // or
const { books, setBooks } = useState([{a:'v'}]

因为两者都有返回值，而我们正在销毁它们？一个与另一个有何不同？

Answer 1

为了理解这一点，让我们深入了解如何 arrays和 objects破坏工作。

假设我们有两个函数 returnsArray()和 returnsObject()返回 ['item 1', 'item 2', 'item 3']和 { a: 'Item 1', b: 'Item 2', c: 'Item 3' }分别

我们如何从 returnsArray() 中提取值？返回 ['item 1', 'item 2', 'item 3'] ?

1. 不破坏:

const tempArray = returnsArray();

const variable1 = tempArray[0]; // Will be 'item 1'
const variable2 = tempArray[1]; // Will be 'item 2'
...

1. 随着破坏:

const [variable1, variable2] = returnsArray();

您可以清楚地观察到，析构减少了行数并使代码更易读。

请注意 variable1和 variable2是自定义变量名称。

我们如何从 returnsObject() 中提取值？返回 { a: 'Item 1', b: 'Item 2', c: 'Item 3' } ?

1. 不破坏:

const tempObject = returnsObject();

const attribute1 = tempObject.a; // which is equal to 'Item 1'
const attribute2 = tempObject.b; // which is equal to 'Item 2'
...

1. 随着破坏:

const { a, b } = returnsObject(); // if you want to the variable names as 'a' and 'b' or

const { a: attribute1 , b: attribute2 } = returnsObject(); // if you want to give custom 
// variable names for the attributes 'a' and 'b'

你可以清楚地看到，析构减少了很多不需要的代码并使其更易读。

现在让我们看看将两者互换会发生什么？

const [variable1, variable2] = returnsObject();

// above line literally translates to:
const tempObject = returnsObject();

const variable1 = tempObject[0]; // will be undefined
const variable2 = tempObject[1]; // will be undefined

由于我们无法通过tempObject[0] 访问对象的属性& tempObject[1] , 两个变量值都是 undefined .

同样，

const { variable1 , variable2 } = returnsArray();

// above line literally translates to:
const tempArray = returnsArray();

const variable1 = tempArray.variable1; // will be undefined
const variable2 = tempArray.variable2; // will be undefined

自 tempArray没有任何名为 variable1 的属性& variable2 .这两个值都是 undefined .

在你的情况下，returnsArray()是useState()和 returnsObject()是useContext() .