解构赋值的用法

// 4. 数组解构与剩余元素

const [first, second, ...rest] = [1, 2, 3, 4, 5];

console.log("rest", rest);

// 6. 属性别名-灵活处理数据

const response = {
    status: 200,
    data: {
        title: "新闻标题",
        conetent: "正文内容"
    },
};

const {
    status: httpStatus,
    data: {
        title: newsTitle
    },
} = response;

console.log("httpStatus", httpStatus);
console.log("newsTitle", newsTitle);

// 7. 解构与迭代-遍历数据结构

// 传统方式
const users = [{
        id: "1",
        name: "张三",
        age: 23
    },
    {
        id: "2",
        name: "李四",
        age: 32
    },
    {
        id: "3",
        name: "王五",
        age: 45
    },
];

users.forEach(function(user) {
    console.log(`用户名1：${user.name},年龄1：${user.age}`);
});

// 使用解构赋值
users.forEach(({
    name,
    age
}) => {
    console.log(`用户名2：${name},年龄2：${age}`);
});

// 在map中使用
const userNames = users.map(({
    name
}) => name);
console.log("userNames", userNames);

参考链接：mp.weixin.qq.com/s/9s9e4_KWg…