ECMAScript教程

5.1 解构赋值概述

解构赋值是一种从数组或对象中提取值并赋给变量的语法。它提供了一种更简洁的方式来访问和使用复杂数据结构中的数据。

5.2 数组解构

数组解构允许我们从数组中提取值并赋给变量。

基本数组解构

// 基本解构
let colors = ["red", "green", "blue"];
let [first, second, third] = colors;

console.log(first);  // "red"
console.log(second); // "green"
console.log(third);  // "blue"

// 只获取部分值
let [primary, , secondary] = colors;
console.log(primary);   // "red"
console.log(secondary); // "blue"

默认值

// 为解构变量设置默认值
let [x = 1, y = 2, z = 3] = [4, 5];
console.log(x); // 4
console.log(y); // 5
console.log(z); // 3 (使用默认值)

剩余元素

// 使用剩余操作符获取剩余元素
let [firstColor, ...restColors] = ["red", "green", "blue", "yellow"];
console.log(firstColor);  // "red"
console.log(restColors);  // ["green", "blue", "yellow"]

// 结合默认值和剩余元素
let [a = 1, b = 2, ...rest] = [3];
console.log(a);    // 3
console.log(b);    // 2 (默认值)
console.log(rest); // []

交换变量

// 无需临时变量交换两个变量的值
let x = 1;
let y = 2;
[x, y] = [y, x];

console.log(x); // 2
console.log(y); // 1

5.3 对象解构

对象解构允许我们从对象中提取属性值并赋给变量。

基本对象解构

// 基本解构
let person = {
    name: "张三",
    age: 25,
    city: "北京"
};

let {name, age, city} = person;
console.log(name); // "张三"
console.log(age);  // 25
console.log(city); // "北京"

// 只解构部分属性
let {name: fullName, age: years} = person;
console.log(fullName); // "张三"
console.log(years);    // 25

默认值

// 为解构变量设置默认值
let {name, age, country = "中国"} = {name: "李四", age: 30};
console.log(name);    // "李四"
console.log(age);     // 30
console.log(country); // "中国" (默认值)

嵌套对象解构

// 解构嵌套对象
let user = {
    name: "王五",
    address: {
        city: "上海",
        district: "浦东新区"
    },
    hobbies: ["读书", "游泳"]
};

let {address: {city, district}, hobbies: [firstHobby]} = user;
console.log(city);       // "上海"
console.log(district);   // "浦东新区"
console.log(firstHobby); // "读书"

计算属性名解构

// 使用计算属性名进行解构
let prop = "name";
let {[prop]: userName} = {name: "赵六", age: 28};
console.log(userName); // "赵六"

5.4 函数参数解构

解构语法也可以用于函数参数，使函数接口更加清晰。

数组参数解构

// 函数参数数组解构
function add([x, y]) {
    return x + y;
}

console.log(add([5, 3])); // 8

// 带默认值的参数解构
function multiply([x = 1, y = 1] = []) {
    return x * y;
}

console.log(multiply());      // 1
console.log(multiply([5]));   // 5
console.log(multiply([3, 4])); // 12

对象参数解构

// 函数参数对象解构
function createUser({name, age, city = "未知"}) {
    return {
        id: Math.random(),
        name,
        age,
        city,
        createdAt: new Date()
    };
}

let newUser = createUser({name: "孙七", age: 22});
console.log(newUser);

// 嵌套对象参数解构
function displayUser({name, address: {city, district}}) {
    console.log(`${name}住在${city}${district}`);
}

displayUser({
    name: "周八",
    address: {
        city: "广州",
        district: "天河区"
    }
}); // "周八住在广州天河区"

5.5 解构的实际应用

处理函数返回值

// 函数返回多个值时使用解构
function getCoordinates() {
    return [116.4074, 39.9042]; // 北京坐标
}

let [longitude, latitude] = getCoordinates();
console.log(`经度: ${longitude}, 纬度: ${latitude}`);

// 返回对象时的解构
function getUserInfo() {
    return {
        id: 1,
        name: "张三",
        email: "zhangsan@example.com"
    };
}

let {id, name, email} = getUserInfo();
console.log(`${name}的邮箱是${email}`);

处理API响应

// 处理JSON API响应
let response = {
    status: 200,
    data: {
        users: [
            {id: 1, name: "张三"},
            {id: 2, name: "李四"}
        ],
        pagination: {
            page: 1,
            total: 100
        }
    }
};

let {
    status,
    data: {
        users: [firstUser],
        pagination: {total}
    }
} = response;

console.log(`状态: ${status}`);
console.log(`第一个用户: ${firstUser.name}`);
console.log(`总用户数: ${total}`);

模块导入

// 从模块中导入特定功能
// 假设math.js导出了多个函数
// import {add, subtract, multiply} from './math.js';

// 或者重命名导入
// import {add as sum, subtract as diff} from './math.js';

5.6 解构的注意事项

解构失败

// 访问不存在的属性或索引
let {name, nonExistent} = {name: "张三"};
console.log(name);        // "张三"
console.log(nonExistent); // undefined

let [first, , , fourth] = ["a", "b", "c"];
console.log(first);  // "a"
console.log(fourth); // undefined

解构已声明的变量

// 解构已声明的变量需要加括号
let a, b;
// {a, b} = {a: 1, b: 2}; // 语法错误
({a, b} = {a: 1, b: 2});  // 正确

console.log(a); // 1
console.log(b); // 2