对象的扩展（属性名简写、对象简写、字面量对计算属性的改进、两个数组里面的元素一一对应，赋值到一个对象中去）

以你之姓@ 2021-12-10 09:45 186阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>对象字面量的扩展</title>
    </head>
    
    <body>
        <script>
            const name = 'XYZ';
            const age = 20;
            const birthday = '2019-07';
    
    
            //属性名简写
            /*
            ES5：
            过去我们把值（name，age，birthday）存入到对象（Laravist）里面
            是这样操作的
            */
            const Laravist = {
                name: name,
                age: age,
                birthday: birthday
            }
            console.log(Laravist);//{name: "XYZ", age: 20, birthday: "2019-07"}
    
            /*
           ES6
           现在我们把值（name，age，birthday）存入到对象（Laravist）里面
           是这样操作的
           */
            const Laravist1 = {
                name,
                age,
                birthday
            }
            console.log(Laravist1);//{name: "XYZ", age: 20, birthday: "2019-07"}
    
    
    
    
    
            //对象简写
            /*
            ES5
            */
            const Laravist2 = {
                greet: function () {
                    console.log(`Hello ${name}`)
                }
            }
            console.log(Laravist2.greet());
    
            /*
           ES6
           */
            const Laravist3 = {
                greet() {
                    console.log(`Hello ${name}`)
                }
            }
            console.log(Laravist3.greet());
    
    
    
    
    
    
    
    
            /*
            字面量对计算属性的改进
    
            现在我想让userIds对象里面user-1:1逐渐递增：
            user-1:1
            user-2:2
            user-3:3
           */
            let id = 0;
    
            //   ES6
            const userIds = {
                [`user-${++id}`]: id,
                [`user-${++id}`]: id,
                [`user-${++id}`]: id,
    
            }
            console.log(userIds)//{user-1: 1, user-2: 2, user-3: 3}
    
    
    
    
            
            /*
             注意你现在想把keys数组和values数组里面的元素一一对应，
            放入到Laravist4对象里面
    
            shift() 方法从数组中删除第一个元素，并返回该元素的值。
            此方法更改数组的长度。
            */
            const keys = ['name', 'age', 'birthday'];
            const values = ['XYZ', 20, '20019-07']
            let Laravist4
            Laravist4 = {
                [keys[0]]: values[0],
                [keys[1]]: values[1],
                [keys[2]]: values[2],
            }
            console.log(Laravist4);//{name: "XYZ", age: 20, birthday: "20019-07"}
            Laravist4 = {
                [keys.shift()]: values.shift(),
                [keys.shift()]: values.shift(),
                [keys.shift()]: values.shift()
            }
            console.log(Laravist4);//{name: "XYZ", age: 20, birthday: "20019-07"}
    
        </script>
    </body>
    
    </html>