ES6语法新特性之----对象初始化简写_es6 对象初始化-CSDN博客

本文链接：https://blog.csdn.net/aaa123_456aaa/article/details/121200107

1.简写的规律：

a.如果key和变量的名字一致，可以只定义一次。
b.如果value是一个函数，可以把":function"函数去除，只剩下括号即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //这是我们传统的对象，包含数据与函数
        let info1 = {
            title:"java入门到放弃",
            name:"xianyu_fanshen",
            go:function(){
                console.log("但是坚持就是胜利！");
            }
        };

        //那么ES6如何简写呢
        var title = "java入门到放弃";
        var name = "xianyu_fanshen";
        let info2 = {
            title:title,
            name:name,
            go(){
                console.log("但是坚持就是胜利！");
            }   
        };
        let info3 = {
            title,
            name,
            go(){
                console.log("但是坚持就是胜利！");
            }   
        };
        console.log(info1);
        console.log(info2);
        console.log(info3);
    </script>
</body>
</html>

在这里插入图片描述

2.我们再来看一下实际开发中使用到的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <p>账号：<input type="text" id="username"/></p>
        <p>密码：<input type="text" id="password"/></p>
        <p><input type="button" value="登陆" id="loginbtn" /></p>
    </form>

    <script>
        //1.传统方式
        $("#loginbtn").on("click",function(){
            var username = $("#username").val();
            var password = $("#password").val();
            //执行异步请求
            $.ajax({
                type:"post",
                url:"http://.....",
                data:{username:username,password:password},
                success:function(){

                }
            })
        })

        //2.这是简写方式
        $("#loginbtn").on("click",function(){
            var username = $("#username").val();
            var password = $("#password").val();
            //对象简写的应用场景
            var params = {username,password};
            $.ajax({
                type:"post",
                url:"http://.....",
                data:params,
                success(){

                }
            })
        })
    </script>
</body>
</html>