将对象解构为数组？

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 是一个反应钩子，它接受初始值作为其参数，return 一个数组。

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

例如

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

const {foo,bar} = object

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

解构

例如

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

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

在 useState 反应挂钩的情况下，useState returns 一个 array 具有您传递给它的第一个索引的初始值和一个设置相同的函数它的第二个索引。

const [value,setValue] = useState(initialValue)

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

编辑的数组 return

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

Answer 2

看起来让您感到困惑的是您将一个对象传递给 useState，但它 returns 是一个数组。

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

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

如您所见，myFunction returns 一个数组。该数组包含传入的对象和对象的长度。

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

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

乍一看，您似乎是在从一个对象解构为一个数组，但我们知道 myFunction returns 是一个数组。所以其实就是从数组到数组。

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

将对象解构为数组？

destructuring object to an array?

html

javascript

function

destructuring

reactjs