JS&React解构赋值

数组解构

// 基础：按顺序取值
const [name, age, city] = ['小明', 18, '北京']

// 跳过某个值：逗号占位
const [,, city] = ['小明', 18, '北京']  // city = '北京'

// 默认值
const [a, b = 100] = [42]  // b = 100（取不到时用默认值）

React 里的应用

// useState 返回数组，直接解构
const [count, setCount] = useState(0)

// 等价于：
const result   = useState(0)
const count    = result[0]
const setCount = result[1]

对象解构

// 基础：按属性名取值
const { name, age } = { name: '小明', age: 18 }

// 重命名：冒号换个名字
const { name: userName } = user  // userName = '小明'，name 不存在

// 默认值
const { role = '访客' } = { name: '小明' }  // role = '访客'

// 嵌套解构
const { user: { name, age } } = data

React Props 就是对象解构

jsx

// 这两种写法完全等价
function Card(props) {
  return <h1>{props.title}</h1>
}

function Card({ title, desc = '暂无' }) {
  return <h1>{title}</h1>  // 更简洁
}

实战场景

// 处理 API 数据
const { user, posts, total } = data
const { name, age } = user

// 函数参数解构
function greet({ name, age }) {
  return `你好 ${name}，你 ${age} 岁`
}

// 交换两个变量
[a, b] = [b, a]

// 数组排序时交换位置
[arr[i], arr[j]] = [arr[j], arr[i]]

数组 vs 对象解构一眼区分

// 数组解构 → 用 []，按位置，名字随便起
const [a, b] = [1, 2]

// 对象解构 → 用 {}，按属性名，名字要对上
const { name, age } = user