--解构--

01-解构

    <script>
        // 解构：一种从复杂数据（数组和对象）中提取数据的方式
        // 数组解构（用的少）
        // 对象解构（用的非常多）

        // 数组解构：数组用中括号包裹多个数据
        let arr = ['a', 'b', 'c', 'd']

        // 解构：也必须使用[]：类型对上
        // [变量,可以多个,顺序对应]
        let [a1, a2] = arr

        // 翻译：同时定义两个变量，a1和a2，从数组中一次性取值给两个变量赋值
        // 取值方式：按照对应的位置（下标）进行取值赋值
        console.log(a1, a2)

        // 扩展：如果要跳过某个数组元素怎么办？用逗号空出元素
        // 数组：必须声明新变量（要求要全部的时候，可以不用新变量）
        let [b1, , b2] = arr
        console.log(b1, b2)

        // 面试题
        let a = 1
        let b = 2;      // 用分号就都用，不用就都不用（如果涉及到解构的时候）变量与解构同时存在：最好给变量加上分号

        // 需求：交换两个变量的值，不允许使用第三方变量
        // 巧妙的使用解构实现
        [a, b] = [b, a]
        console.log(a, b)

        // 数组解构：使用非常少

        // 对象解构

        // 对象解构：{变量1,变量2,变量名必须与属性名一样}
        let obj = {
            username: '前端',
            age: 18,
            gender: '男',
            skill: '小白',
            girlfriends: [
                {
                    name: '德莱厄斯'
                },
                {
                    name: '德莱文'
                }
            ]
        }

        // 需求：列出前端的所有名字
        const { girlfriends, skill } = obj
        console.log(girlfriends, skill)

        // 将复杂的数据简单化存储：方便使用
    </script>

注意：
1. // 解构：一种从复杂数据（数组和对象）中提取数据的方式
// 数组解构（用的少）
// 对象解构（用的非常多）
2.// 解构：也必须使用[]：类型对上
// [变量,可以多个,顺序对应]
3.对象解构：{变量1,变量2,变量名必须与属性名一样}