龙空技术网

JavaScript,ES6,对象优化,数组新增方法,Promise异步编排

古怪今人 363

前言:

现时我们对“jquery中怎么实现累加”都比较看重,看官们都需要分析一些“jquery中怎么实现累加”的相关资讯。那么小编在网摘上搜集了一些关于“jquery中怎么实现累加””的相关知识,希望你们能喜欢,大家快快来学习一下吧!

对象优化:

<script>    // Object(对象)    const user = {        id: 100,        name: 'xiaofendou',        address: ['山西太原市', '山西吕梁市']    };    console.log(Object.keys(user)); // ["id", "name", "address"]    console.log(Object.values(user)); //  [100, "xiaofendou", Array(2)]    console.log(Object.entries(user)); // [Array(2), Array(2), Array(2)]    const target = { a: 111 };    const source1 = { b: 222 };    const source2 = { c: 333 };    const source3 = { a: 0000 };    Object.assign(target, source1, source2, source3);    console.log(target); //{a: 0, b: 222, c: 333}</script>

对象的函数属性简写

<script>    // 对象的函数属性简写    let user={        id:1001,        name:"小奋斗",        login:function(userId,passwd){            console.log(this.id + "---------" + userId +","+passwd);        },        // 箭头函数中,不能使用this        login2:(userId,passwd)=> {            // undefined---------fuyue,123456            console.log(this.id + "---------" + userId +","+passwd);            console.log(user.id + "---------" + userId +","+passwd);        }    };       user.login("shun","123456");     user.login2("fuyue","123456");</script>

复制对象(深复制)和合并对象

<script>    // 对象拓展运算符    // 复制对象(深复制)        let user = {        id: 100,        name: 'xiaofendou',        address: ['山西太原市', '山西吕梁市']    };    let user2 = {...user};    console.log(user);    console.log(user2);    // 合并对象    let id = {id: 100};    let name = {name: 'xiaofendou'};    let address = {address: ['山西太原市', '山西吕梁市']};    let user3 = {...id,...name,...address};    console.log(user3);</script>
数组新增方法map()和reduce()
<script>    let array1 = [1,2,3,4,5,6];    console.log("array1=" + array1); //array1=1,2,3,4,5,6    array2 = array1.map(function(item){        return item = item+1;     });    console.log("array2=" + array2); // array2=2,3,4,5,6,7    array3 = array1.map(item=>item*2);    console.log("array3=" + array3); // array3=2,4,6,8,10,12    // reduce()方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。    // array.reduce(function(total, currentValue, currentIndex, arr), initialValue)    // total	必需。初始值, 或者计算结束后的返回值。    // currentValue	必需。当前元素    // currentIndex	可选。当前元素的索引    // arr	可选。当前元素所属的数组对象。    // initialValue	可选。传递给函数的初始值    let result1 = array1.reduce(function(a,b){        // a,上一次的值,b,当前正在处理的值        return a+b;    });    console.log(result1);    let result2 = array1.reduce((a,b)=>{return a+b});    console.log(result2);</script>
Promise异步编排

JavaScript的世界中,代码都是单线程执行的,直接导致JS的网络操作,事件,都必须是异步执行,异步执行可以用回调函数实现,如果后边的请求依赖前边的请求结果,就层层嵌套,形成回调地域。

Promise异步编排,可以将异步操作队列化,按照期望的预期顺序去执行。

案例说明:

// 1、查找到用户信息// 2、查找到角色信息// 3、查找到权限信息

数据准备:

user.json

{    "id": 1,    "name": "shun"}

role.json

{    "id": 1,    "role": "系统管理员"}

permission.json

[    {        "id": 1,        "permission": "add"    },    {        "id": 2,        "permission": "modify"    },    {        "id": 3,        "permission": "delete"    }]

HTTP服务器准备:

Node.js全局安装http-server:> npm install http-server -g启动服务(当前目录为根目录):> http-server

案例一(传统写法,不停的回调):

<script src=";></script><script>    // 不停的回调    $.ajax({        url: "user.json",        success(data) {            console.log(data);            $.ajax({                url: "role.json",                success(data) {                    console.log(data);                    $.ajax({                        url: "permission.json",                        success(data) {                            console.log(data);                        }, error(data) {                            console.log(data);                        }                    });                },                error(data) {                    console.log(data);                }            });        },        error(data) {            console.log(data);        }    });</script>

案例二(Promise异步编排):

<script src=";></script><script>    let p1 = new Promise((resolve, reject) => {        // resolve==>决定,reject==>拒绝        $.ajax({            url: "user.json",            success(data) {                resolve(data);            },            error(err) {                reject(err);            }        });    });    // 继续往下传递    p1.then(obj => {        console.log(obj);        return new Promise((resolve, reject) => {            $.ajax({                url: "role.json",                success(data) {                    resolve(data);                },                error(err) {                    reject(err);                }            });        });    }).catch(err => {        console.log(err);    }).then(obj => {        console.log(obj);        // 不继续往下传递        $.ajax({            url: "permission.json",            success(data) {                console.log(data);            }, error(data) {                console.log(data);            }        });    }).catch(err => {        console.log(err);    });</script>

案例三(Promise异步编排,优化):

<script src=";></script><script>    // 1、查找到用户信息    // 2、查找到角色信息    // 3、查找到权限信息    get("user.json")        .then(data => {            console.log(data);            return get("role.json");        }).then(data => {            console.log(data);            return get("permission.json");        }).then(data => {            console.log(data);        }).catch(err => {            console.log("error==>" + err);        });    function get(url) {        return new Promise((resolve, reject) => {            $.ajax({                url: url,                success: function (data) {                    resolve(data);                },                error: function (err) {                    reject(err);                }            });        });    }</script>

标签: #jquery中怎么实现累加 #jquery新增方法