es6-

lm吹梦到西洲

于 2021-01-26 18:36:19 发布

阅读量118

点赞数

文章标签： js

本文链接：https://blog.csdn.net/baidu_40508667/article/details/113186673

版权

es6 在node.js uniapp 微信小程序大胆使用

web 开发用var 因为低版本浏览器不支持 let,const

对象简化实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1/jquery-3.3.1.js"></script>
</head>
<body>
<form action="">
    <p>账号：<input type="text" placeholder="请输入账号" id="username"></p>
    <p>密码：<input type="password" placeholder="请输入密码" id="password"></p>
    <input type="button" value="提交" id="loginButtton">
</form>
</body>
<script>
    $('#loginButtton').on('click', function () {
        var username = $('#username').val();
        var password = $('#password').val();
        params = {username, password}; //对象简写的案例
        $.ajax({
            type: "post",
            url: "xxx",
            // data:{username:username,password:password},
            data: params,
            // success:function (){
            // }
            success() {

            }
        })
    })

</script>
</html>

对象结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    /**
     * 对象是以key:value存在 ，获取对象方法和属性：
     * 1. 使用 。
     * 2. 使用[]
     *  * 问题： 为什么要使用两种方式？
     * 3. ES6 使用对象结构快速获取属性和方法
     */
    var title = "广东学相伴";
    var link = "https://www.kuangstudy.com";
    var obj = {
        title,
        link,
        go() {
            console.log("hello")
        }
    }

    console.log(obj.title)
    console.log(obj.link)
    console.log(obj.go())
    //
    console.log(obj["title"])
    console.log(obj["link"])
    obj["go"]();
    //
    var {title, link, go} = obj;
    console.log(title, link)
    go();
</script>
</html>

对象操作符实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1/jquery-3.3.1.js"></script>
</head>
<body>

</body>
<script>
    // 对象传播操作符
    var title = "广东学相伴";
    var link = "https://www.kuangstudy.com";
    var obj = {
        title,
        link,
        go() {
            console.log("hello")
        }
    }
    var {title, ...other} = obj;
    console.log(title)
    console.log(other)
    // 对象传播操作符 实例
    // java后台 异步请求  数据格式： var userPage={pages:10,users:[{},{}],pageNo:1,PageSize:200,total:100};
    $.post("/user/search", function (res) {
        var userPage = {pages: 10, users: [{}, {}], pageNo: 1, PageSize: 200, total: 100};
        // var {users,total,pageNo,pages}=userPage;
        var {users, ...other} = userPage;
    })
</script>
</html>

map

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    var arr=[1,2,3,4];
    // var newArr=[];
    // for (let i = 0; i < arr.length; i++) {
    //     newArr.push(arr[i]*2);
    // }

    //
    // var newArr=arr.map(function (ele){
    //     return ele*2;
    //
    // })

    // map 自带的循环，把处理的数据自动回填到对应的位置
    var newArr=arr.map(ele=>ele*2);
    console.log(newArr.toString())

    //map 处理对象的数据
    var users=[{age:18,name:"tom"},{age:22,name:"jerry"},{age:78,name:"james"}];
    // var newUsers=users.map(function (ele){
    //     ele.age=ele.age+1;
    //     return ele;
    // })

    var newUsers=users.map(ele=>{
        ele.age=ele.age+1;
        return ele;
    })
    console.log(users)

</script>
</html>

reduce

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    var arr = [1, 2, 3, 4, 5]
    var res = arr.reduce(function (a, b) {
        return a + b;
    })
    console.log(res)  //  15
    // a=1,b=2    ----3
    // a=3,b=3    ----6
    // a=6,b=4    ----10
    // a=10, b=5  -----15

</script>
</html>

lm吹梦到西洲

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6-

对象简化实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1/jquery-3.3.1.js"></script></head><body><form action="">
复制链接

扫一扫