5_对象属性简化

最新推荐文章于 2024-05-24 20:47:11 发布

P_ning

最新推荐文章于 2024-05-24 20:47:11 发布

阅读量120

点赞数

分类专栏： Es6

本文链接：https://blog.csdn.net/p_ning/article/details/115334945

版权

Es6 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>
        var name = "Pning";
        var professional = "JavaWeb开发";
        //原本的一种写法
        var info_1 = {
            name:name,
            professional:professional,
            go:function(){
                console.log(info_1);
            }
        };
        info_1.go();
        //简化为：
        //1、如果key的值与变量名的值一直，只需要写一次即可
        //2、如果属性的value是一个函数方法，那可以把:function删去，只留下()即可
        var info_2 = {
            name:name,
            professional:professional,
            go(){
                console.log(info_2);
            }
        };
        info_2.go();
    </script>
</body>
</html>

实际案例

<!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>
        账号：<input type="text" id="username"/><br/>
        密码：<input type="password" id="password"/><br/>
        <input type="button" value="登录" id="login" />
    </form>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		document.querySelector("#login").onclick = function(){
            var username  = document.getElementById("username").value;
            var password  = document.getElementById("password").value;
            var params = {username,password};
            console.log(params);
			axios.post("localhost:8080/login",params)
			.then(function(response){
				console.log(response);
			},function(err){
				console.log(err);
			})
		}
	</script>
</body>
</html>