JavaScript-解构

最新推荐文章于 2025-05-09 23:09:12 发布

转载最新推荐文章于 2025-05-09 23:09:12 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000010080935

文章标签：

#javascript #ViewUI

本文介绍了如何利用JavaScript中的对象和数组解构来简化代码，提高可读性和维护性。通过示例展示了不同场景下使用解构的最佳实践，如直接在函数参数中解构对象属性等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

访问和使用对象的多个属性时，使用对象解构。

为什么? 结构可以帮助您避免为这些属性创建临时引用。

// bad
function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;

    return `${firstName} ${lastName}`;
}

// good
function getFullName(user) {
    const {
        firstName,
        lastName
    } = user;
    return `${firstName} ${lastName}`;
}

// best
function getFullName({firstName,lastName}) {
    return `${firstName} ${lastName}`;
}

使用数组解构

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

对多个返回值使用对象解析，而不是数组解构。

为什么? 你可以增加新的属性或改变事物的秩序而不破坏调用点。

// bad
function processInput(input) {
    // then a miracle occurs
    return [left, right, top, bottom];
}

// the caller needs to think about the order of return data
const [left, __, top] = processInput(input);

// good
function processInput(input) {
    // then a miracle occurs
    return {
        left,
        right,
        top,
        bottom
    };
}

// the caller selects only the data they need
const {
    left,
    right
} = processInput(input);

扫码申请加入全栈部落