const matrix = [
  [1, 2],
  [3, 4],
]
const [[a, b], [c, d]] = matrix
console.log(a, b, c, d) // 1 2 3 4

// 部分解构
const [[first]] = matrix
console.log(first) // 1

const user = {
  name: '张三',
  address: {
    city: '北京',
    district: '朝阳',
  },
}

const {
  address: { city, district },
} = user
console.log(city) // '北京'
console.log(district) // '朝阳'
// console.log(address); // ReferenceError: address 未定义

const {
  address,
  address: { city },
} = user
console.log(address) // { city: '北京', district: '朝阳' }
console.log(city) // '北京'

const data = {
  items: [
    { id: 1, name: '商品A' },
    { id: 2, name: '商品B' },
  ],
}

const {
  items: [first, second],
} = data
console.log(first) // { id: 1, name: '商品A' }

// 更深一层
const {
  items: [{ name: firstName }, { name: secondName }],
} = data
console.log(firstName, secondName) // '商品A' '商品B'

function greet({ name, age }) {
  console.log(`${name}, ${age}岁`)
}

greet({ name: '张三', age: 25 }) // 张三, 25岁

function createUser({ name = '匿名', age = 18, role = 'user' } = {}) {
  return { name, age, role }
}

createUser({ name: '张三' }) // { name: '张三', age: 18, role: 'user' }
createUser() // { name: '匿名', age: 18, role: 18 }

// 没有 = {} 的情况
function badCreate({ name = '匿名' }) {
  return name
}
// badCreate(); // TypeError: Cannot read properties of undefined

function request(url, { method = 'GET', headers = {}, body } = {}) {
  console.log(url, method, headers, body)
}

request('/api/users') // '/api/users' 'GET' {} undefined
request('/api/users', { method: 'POST', body: '{}' })

function sum([a, b, c = 0]) {
  return a + b + c
}

sum([1, 2]) // 3
sum([1, 2, 3]) // 6

// 实用场景：处理坐标
function distance([x1, y1], [x2, y2]) {
  return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
}

distance([0, 0], [3, 4]) // 5

// 模拟 API 响应
const response = {
  status: 200,
  data: {
    user: {
      id: 1,
      profile: {
        name: '张三',
        avatar: 'avatar.jpg',
      },
    },
    permissions: ['read', 'write'],
  },
  meta: {
    timestamp: 1699000000,
  },
}

// 一次性提取所需数据
const {
  data: {
    user: {
      id: userId,
      profile: { name: userName },
    },
    permissions: [primaryPermission],
  },
} = response

console.log(userId) // 1
console.log(userName) // '张三'
console.log(primaryPermission) // 'read'

function initApp(options = {}) {
  const {
    debug = false,
    api: { baseUrl = 'https://api.example.com', timeout = 5000 } = {},
    ui: { theme = 'light', language = 'zh-CN' } = {},
  } = options

  return { debug, api: { baseUrl, timeout }, ui: { theme, language } }
}

// 完全使用默认值
initApp()

// 部分覆盖
initApp({
  debug: true,
  api: { timeout: 10000 },
})

// 取首尾
function getFirstAndLast(arr) {
  const [first, ...rest] = arr
  const last = rest.pop()
  return { first, last }
}

getFirstAndLast([1, 2, 3, 4]) // { first: 1, last: 4 }

// 递归处理链表结构
function sum([head, ...tail]) {
  return head === undefined ? 0 : head + sum(tail)
}

sum([1, 2, 3, 4]) // 10

// 安全地处理可能不存在的嵌套属性
const data = {
  user: {
    // address 可能不存在
  },
}

// 传统写法
const city1 = data.user && data.user.address && data.user.address.city

// 解构 + 默认值
const { user: { address: { city } = {} } = {} } = data
console.log(city) // undefined，不会报错

// 或者用可选链（更推荐）
const city2 = data.user?.address?.city

// 只保留需要的属性
function pick(obj, keys) {
  return keys.reduce((result, key) => {
    if (key in obj) {
      result[key] = obj[key]
    }
    return result
  }, {})
}

const user = { id: 1, name: '张三', password: '123', email: 'test@test.com' }
const safeUser = pick(user, ['id', 'name', 'email'])
// { id: 1, name: '张三', email: 'test@test.com' }

// 用解构实现排除
const { password, ...publicInfo } = user
// publicInfo: { id: 1, name: '张三', email: 'test@test.com' }

const key = 'name'
const obj = { name: '张三', age: 25 }

const { [key]: value } = obj
console.log(value) // '张三'

// 实际应用
function getProperty(obj, propName) {
  const { [propName]: value } = obj
  return value
}

let a, b, c
const arr1 = [1, 2]
const arr2 = [3, 4]

// 连续解构
;[a, b] = arr1
;[b, c] = arr2
console.log(a, b, c) // 1 3 4

// 浅克隆数组
const original = [1, 2, 3]
const [...clone] = original

// 浅克隆对象
const obj = { a: 1, b: 2 }
const { ...objClone } = obj

// 合并对象（覆盖同名属性）
const defaults = { theme: 'light', lang: 'en' }
const userSettings = { lang: 'zh' }
const settings = { ...defaults, ...userSettings }
// { theme: 'light', lang: 'zh' }

// 不推荐：难以阅读和维护
const {
  a: {
    b: {
      c: {
        d: { e },
      },
    },
  },
} = deepObject

// 推荐：分步解构或使用可选链
const { a } = deepObject
const e = a?.b?.c?.d?.e

// 在热路径中避免创建不必要的解构
function processItem(item) {
  // 如果只用一次，直接访问更好
  return item.value * 2
}

// 多次使用时解构是值得的
function processItem(item) {
  const { value, multiplier, offset } = item
  return value * multiplier + offset
}

// 错误
function getName({ user: { name } }) {
  return name
}
getName({ user: null }) // TypeError

// 正确
function getName({ user: { name } = {} } = {}) {
  return name
}
getName({ user: null }) // undefined

// 声明时解构
const { a } = obj

// 已有变量赋值
let b
;({ b } = obj) // 需要括号

// 同时声明多个不同类型
const { x } = obj1
const [y] = arr1
// 不能写成 const { x } = obj1, [y] = arr1;