解构赋值

目录

1. 基础概念
2. 数组解构
3. 对象解构
4. 函数参数解构
5. 实际应用

解构赋值基础概念

什么是解构赋值

解构赋值是一种JavaScript语法特性，允许我们从数组或对象中提取值并赋给变量，使代码更加简洁和易读。

基本语法形式

// 数组解构
const [first, second] = [1, 2];

// 对象解构  
const { name, age } = { name: '张三', age: 25 };

数组解构赋值

基数组解构

const numbers = [1, 2, 3, 4, 5];
const [first, second, third] = numbers;
console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

//跳过某些元素
const [,, thirdElement] = numbers;
console.log(thirdElement); // 3

// 使用剩余元素
const [firstElement, ...rest] = numbers;
console.log(firstElement); // 1
console.log(rest);         // [2, 3, 4, 5]

默认值设置

const [a = 10, b = 20, c = 30] = [1, 2];
console.log(a); // 1
console.log(b); // 2
console.log(c); // 30 (使用默认值)

const [x = 0, y = 0, z = 0] = [];
console.log(x, y, z); // 0 0 0

数组解构

//多维数组解构
const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

const [[a1, a2], [b1, b2], [c1, c2]] = matrix;
console.log(a1, a2); // 1 2
console.log(b1, b2); // 4 5
console.log(c1, c2); // 7 8

const [p, [q, r], s, [t, [u, v]]] = [1, [2, 3], 4, [5, [6, 7]]];
console.log(p, q, r, s, t, u, v); // 1 2 3 4 5 6 7

对象解构赋值

基对象解构

const user = {
    name: '李四',
    age: 30,
    email: 'lisi@example.com',
    address: {
        city: '北京',
        district: '朝阳区'
    }
};

const { name, age, email } = user;
console.log(name);  //李四
console.log(age);   // 30
console.log(email); // lisi@example.com

属性重命名

const { name: userName, age: userAge } = user;
console.log(userName); //李四
console.log(userAge);  // 30

const response = {
    data: { users: [] },
    status: 200,
    message: 'success'
};

const { 
    data: userData, 
    status: responseStatus, 
    message: responseMessage 
} = response;

console.log(userData);        // { users: [] }
console.log(responseStatus);  // 200
console.log(responseMessage); // success

对象默认值设置

const config = {
    theme: 'dark'
};

const { theme = 'light', language = 'zh-CN', timeout = 5000 } = config;
console.log(theme);    // dark (使用实际值)
console.log(language); // zh-CN (使用默认值)
console.log(timeout);  // 5000 (使用默认值)

对象嵌套解构

const { 
    name: userName,
    address: { 
        city: userCity, 
        district: userDistrict 
    } 
} = user;

console.log(userName);     //李四
console.log(userCity);    // 北京
console.log(userDistrict); // 朝阳区

const complexObject = {
    user: {
        profile: {
            personal: { name: '王五', age: 28 },
            contact: { email: 'wangwu@example.com', phone: '13800138000' }
        }
    }
};

const {
    user: {
        profile: {
            personal: { name: personalName, age: personalAge },
            contact: { email: contactEmail, phone: contactPhone }
        }
    }
} = complexObject;

console.log(personalName); // 王五
console.log(personalAge);  // 28
console.log(contactEmail); // wangwu@example.com
console.log(contactPhone); // 13800138000

函数参数解构

函数参数数组解构

function processCoordinates([x, y, z = 0]) {
    return `坐标: (${x}, ${y}, ${z})`;
}

console.log(processCoordinates([10, 20]));     // 坐标: (10, 20, 0)
console.log(processCoordinates([1, 2, 3]));   //坐标: (1, 2, 3)

function calculateStats([min = 0, max = 100, avg = 50]) {
    return { min, max, avg };
}

console.log(calculateStats([10, 90])); // { min: 10, max: 90, avg: 50 }
console.log(calculateStats([]));      // { min: 0, max: 100, avg: 50 }

函数参数对象解构

function createUser({ name, age, email, active = true }) {
    return {
        id: Math.random().toString(36).substr(2, 9),
        name,
        age,
        email,
        active,
        createdAt: new Date()
    };
}

const newUser = createUser({
    name: '赵六',
    age: 25,
    email: 'zhaoliu@example.com'
});
console.log(newUser);

function processApiResponse({ 
    data: { users = [], totalPages = 1 }, 
    status = 200, 
    message = 'success' 
}) {
    return {
        usersCount: users.length,
        totalPages,
        status,
        message
    };
}

const apiResponse = processApiResponse({
    data: {
        users: [{ id: 1, name: '用户1' }, { id: 2, name: '用户2' }],
        totalPages: 5
    },
    status: 200
});
console.log(apiResponse); // { usersCount: 2, totalPages: 5, status: 200, message: 'success' }

参数解构与默认参数结合

function fetchData(url, { 
    method = 'GET', 
    headers = {}, 
    timeout = 5000,
    retries = 3 
} = {}) {
    console.log(`请求URL: ${url}`);
    console.log(`方法: ${method}`);
    console.log(`超时: ${timeout}ms`);
    console.log(`重试次数: ${retries}`);
    console.log(`请求头:`, headers);
}

//调用示例
fetchData('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    timeout: 10000
});

// 使用默认配置
fetchData('/api/status');

解构赋值的实际应用场景

数组方法中的解构

const users = [
    { name: '张三', age: 25, city: '北京' },
    { name: '李四', age: 30, city: '上海' },
    { name: '王五', age: 28, city: '广州' }
];

users.forEach(({ name, age, city }) => {
    console.log(`${name} (${age}岁) - ${city}`);
});

const userNames = users.map(({ name }) => name);
console.log(userNames); // ['张三', '李四', '王五']

const youngUsers = users.filter(({ age }) => age < 30);
console.log(youngUsers); // [{ name: '张三', age: 25, city: '北京' }, { name: '王五', age: 28, city: '广州' }]

Promise和异步操作解构

async function fetchUserData() {
    try {
        const [userResponse, postsResponse] = await Promise.all([
            fetch('/api/user'),
            fetch('/api/posts')
        ]);
        
        const [userData, postsData] = await Promise.all([
            userResponse.json(),
            postsResponse.json()
        ]);
        
        return { user: userData, posts: postsData };
    } catch (error) {
        console.error('获取数据失败:', error);
        throw error;
    }
}

async function processUserPosts(userId) {
    const { user, posts } = await fetchUserData();
    const { name: userName, email } = user;
    const userPosts = posts.filter(({ authorId }) => authorId === userId);
    
    return {
        userInfo: { userName, email },
        posts: userPosts
    };
}

数据处理和转换

function convertUserData(rawData) {
    return rawData.map(({ id, name, email, profile: { age, city } }) => ({
        userId: id,
        displayName: name,
        contactEmail: email,
        userAge: age,
        location: city
    }));
}

const rawUsers = [
    {
        id: 1,
        name: '张三',
        email: 'zhangsan@example.com',
        profile: {
            age: 25,
            city: '北京'
        }
    }
];

const convertedUsers = convertUserData(rawUsers);
console.log(convertedUsers);

function analyzeData(data) {
    const stats = data.reduce((acc, { category, value, status }) => {
        acc.total += value;
        acc.categories[category] = (acc.categories[category] || 0) + value;
        acc.statusCount[status] = (acc.statusCount[status] || 0) + 1;
        return acc;
    }, { total: 0, categories: {}, statusCount: {} });
    
    return stats;
}