SOURCE

/**
 * 解构赋值是ES6引入的一种语法，允许你从数组或对象中提取值，并赋值给变量，使代码更简洁易读
 * 解构赋值和剩余参数的区别与联系
区别
1.语法位置：
  解构赋值：在赋值操作符(=)的左侧
  剩余参数：在函数参数或解构模式中使用...
2.用途：
  解构赋值：从数组或对象中提取值并赋给变量
  剩余参数：收集"剩余"的元素或属性到一个新的数组或对象
3. 返回值
解构赋值：不返回任何值，只是声明变量并赋值
剩余参数：返回一个包含剩余元素的数组或对象
联系
组合使用：剩余参数经常与解构赋值一起使用
const [first, second, ...others] = [1, 2, 3, 4, 5];
函数参数中的应用：在函数参数中，可以同时使用解构和剩余参数
function process({name, age, ...rest}) {
  console.log(name, age);  // 解构
  console.log(rest);      // 剩余属性
}
process({name: '张三', age: 25, city: '北京', job: '工程师'});

解构赋值用于提取数据，而剩余参数用于收集数据
 * 
 * /
//1、数组解构
const numbers = [1,2,3]
const [a, b, c] = numbers
console.log(a,b,c)// 1 2 3

//2.对象解构
const person = {name: '张三',age: '18'}
const {name, age} = person
console.log(name,age)//张三 18

//用法：状态值、更新该状态的函数
const [age, setAge] = useState(10);
//用法：解构可以设置默认值
const {name='李四'} = person
//用法：可以跳过某些元素
const [first,,third] = [1,2,3]
//用法：剩余模式
const [first,...rest] = [1,2,3]//rest为[2,3,4]
//用法：函数返回多个值,返回数组
function getUser() {
    return ['张三',25,'北京']
}
const [name,age,city] = getUser()

//用法：返回对象
function getProduct() {
    return { id: 1, title: '手机', price: 2999 }
}
const {id,title,price} = getProduct()
//用法：函数参数对象参数解构
function printUser({ name, age, city = '未知' }) {
    console.log(`${name}今年${age}岁，来自${city}`);
}
const user = { name: '李四', age: 30 };
printUser(user); // 李四今年30岁，来自未知
// 用法：函数参数数组参数解构
function printScores([math, chinese, english]) {
    console.log(`数学: ${math}, 语文: ${chinese}, 英语: ${english}`);
}
const scores = [90, 85, 88];
printScores(scores); // 数学: 90, 语文: 85, 英语: 88
//从json中提取数据
// 从API响应中提取所需字段
const apiResponse = {
    status: 200,
    data: {
        user: {
            id: 1001,
            name: '王五',
            profile: {
                email: 'wangwu@example.com',
                address: '上海'
            }
        },
        token: 'abc123xyz'
    }
};

// 解构嵌套对象
const { 
    data: { 
        user: { 
            name, 
            profile: { email } 
        },
        token 
    } 
} = apiResponse;

console.log(name, email, token); // 王五 wangwu@example.com abc123xyz
//剩余参数
// 函数中的剩余参数
function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// 数组解构中的剩余元素
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first, second); // 1 2
console.log(rest); // [3, 4, 5]

// 对象解构中的剩余属性
const { a, b, ...others } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a, b); // 1 2
console.log(others); // { c: 3, d: 4 }