es6对象简写、解构、操作传播符

对象简写

代码

    <script>
        //es5方式
        let info = {
            name: 'Stars',
            link: 'http://www.88sv.cn',
            go: function () {
                console.log('我坐地铁上班')
            }
        };
        //es6方式
        var name = 'Stars';
        var link = 'http://www.88sv.cn';
        let info1 = {
            name, 
            link,
            go () {
                console.log('我坐地铁上班')
            }
        };
        console.log(info);
        console.log(info1);
    </script>

规律总结

1. 因为js对象是key:value形式存在
2. 如果key和变量的名字一致，可以只定义一次
3. 如果value是一个函数，可以把：function去掉，只剩下（）即可

运行结果

对象解构

代码

    <script>
        // 对象属性方法访问
        // 1、通过 `.`
        // 2、通过`[]`
        let info1 = {
            name:'Stars', 
            link:'http://www.baidu.com',
            go () {
                console.log('我坐地铁上班')
            }
        };
        // 传统方式获取属性方法
       console.log(info1.name);
       console.log(info1['name'])

    //    es对象解构，快速获取属性和方法的方式
    var {title,link,go}=info1;
    console.log(title);
    console.log(link);
    go();
    </script>

运行结果

操作传播符

代码

    <script>
        var person={
            name:'Stars',
            address:'上海',
            link:'http://www.88sv.cn',
            go(){
                console.log('开始上班了');
            }
        }
        // name,address已经被解构，剩余属性方法被传入新对象person2
        var {name,address,...person2}=person;
        console.log(name);
        console.log(address);
        console.log(person2);
    </script>

运行结果