将对象解构为数组？

Question

这里是 React 初学者，现在我正在尝试学习解构，并且一直在阅读它，例如：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

我知道的是，当你解构两边应该是相同的，比如如果你有数组，那么两边都应该是数组，但是在这里我开始工作，右侧是对象（？），左侧是数组（解构？ ），我的问题是，如果您正在解构一个对象，那么您可以通过它的名称（双方应该具有相同的名称）和通过它的索引访问它，那么为什么在这段代码中它的工作方式不同呢？以及为什么您可以像这样访问这里的属性：const count = state.count？解构不应该解决这个问题吗？英语不是我的母语，如有错误请见谅。

import React, { useState } from 'react';
import './App.css';

function App() {
  const [state, setState] = useState({ count: 4, theme: 'blue' });
  const count = state.count;
  const theme = state.theme;

  function decrementCount() {
    setState(prevState => {
      return { ...prevState, count: prevState.count - 1 }
    })
  }

  function incrementCount() {
    setState(prevState => {
      return { ...prevState, count: prevState.count + 1 }
    })
  }

  return (
    <>
      <button onClick={decrementCount}>- </button>
      <span>{count} </span>
      <span>{theme} </span>
      <button onClick={incrementCount}>+ </button>
    </>
  )
}

export default App;

Answer 1

您似乎感到困惑的是，您将一个对象传递给useState，但它返回一个数组。

希望澄清一下，让我们创建一个非常简单的示例来替换 useState 函数。

function myFunction(obj) {
  const length = Object.keys(obj).length;
  
  return [obj, length];
}

如您所见，myFunction 返回一个数组。该数组包含传入的对象，以及对象的长度。

如果我们想解构这个数组，它看起来与useState 示例非常相似：

const [obj, length] = myFunction({ foo: 'bar' });

乍一看，您似乎正在从一个对象解构到一个数组，但我们知道myFunction 返回一个数组。所以实际上是从数组到数组。

useState 的工作方式相同。它还只是为我们管理有状态的数据，因此使用起来似乎更复杂。

Answer 2

useState 是一个反应钩子，它接受初始值作为其参数并返回一个数组。

你是对的，在解构时，两个侧键必须相同，但它只对对象有效。

例如

let object = {
 foo:1,
 bar:2
}

const {foo,bar} = object

但是在数组的情况下，解构变量可以有任何名称，是的，它会被 respec 解构

例如

let array = [1,2,3,4]

const [one,two, , four] = array;

在 useState 反应钩子的情况下，useState 返回一个 array，其中包含您在其第一个索引上传递的初始值和一个在其第二个索引上设置相同值的函数。

const [value,setValue] = useState(initialValue)

在你的例子中，初始值是一个对象，你解构了一个由useState返回的数组

const [state, setState] = useState({ count: 4, theme: 'blue' }) // state is an object

由于您的 state 是一个包含键 count 和 theme 的对象，因此您可以通过点符号或括号符号访问它

您也可以像下面这样进一步解构您的 state 对象

  const [state, setState] = useState({ count: 4, theme: 'blue' });
  const { count, theme } = state