2017.12.7 AngularJS 一键复制、JavaScript数组、 动态添加、LINQ、通用的ajax请求工具

第一组:刘聪 AngularJS 一键复制功能

Html:


image.png

Js:


image.png

效果:

image.png

第二组:冯佳丽 JavaScript数组方法总结

中篇:
  1. findIndex

作用:findIndex()方法根据传入的测试条件(函数)遍历数组元素直到找到符合条件的元素。
返回值:Number,符合条件的第一个元素的索引位置,之后元素不会再执行,如果没有符合条件的元素返回-1
原数组:不改变
注意: findIndex()对于空数组,函数不执行,返回-1
语法:array.findIndex(function(currentValue, index, arr), thisValue)
语法参数解析:同上

var arr1=[6,3,32,16,19];
console.log(arr1.findIndex(function(i){
    return i>10;
}))     //-1
console.log(arr1);      //[6,3,32,16,9]
console.log(arr1.findIndex(function(i){
    return i>40;
}))     //-1
console.log(arr1.findIndex(function(i,index){
    return i>10;
}))     //2
console.log(arr1.findIndex(function(i,index,arr1){
    return i>10;
}))     //2
console.log(arr1.findIndex(function(i){
    return i>10;
},30))     //2
console.log([].findIndex(function(i){
    return i>10;
}))     //-1
  1. forEach

作用:forEach()方法用于调用数组的每个元素,并将元素传递给回调函数。
返回值:数组元素调用后的结果
原数组:不改变
注意: forEach() 对于空数组是不执行回调函数的。
语法:array.forEach(function(currentValue, index, arr), thisValue)
语法参数解析:同上

var arr1=[6,3,32,16,19];
arr1.forEach(function(i){
    console.log(i+1);
})      //7 4 33 17 20
console.log(arr1);      //[6,3,32,16,9]
arr1.forEach(function(i,index){
    console.log(i+1);
})      //7 4 33 17 20
arr1.forEach(function(i,index,arr1){
    console.log(arr1[index]);
})      //6 3 32 16 19
arr1.forEach(function(i){
    console.log(i+1);
  1. map

作用:map() 方法通过指定函数处理数组的每个元素,并返回处理后的数组。
返回值:Array,新数组,数组元素为原始数组元素调用函数处理后的值
原数组:不改变
注意: map() 不会对空数组进行检测
语法:array.map(function(currentValue,index,arr), thisValue)
语法参数解析:同上

var arr1=[6,3,32,16,19];
console.log(arr1.map(function(i){
    return i+1;
}))     //[7, 4, 33, 17, 20]
console.log(arr1);      //[6,3,32,16,9]
console.log(arr1.map(function(i){
    return i+1;
}))     //[7, 4, 33, 17, 20]
console.log(arr1.map(function(i,index){
    return i+1;
}))     //[7, 4, 33, 17, 20]
console.log(arr1.map(function(i,index,arr1){
    return i+1;
}))     //[7, 4, 33, 17, 20]
console.log(arr1.map(function(i){
    return i+1;
},30))     //[7, 4, 33, 17, 20]
console.log([].map(function(i){
    return i+1;
}))     //[]
  1. reduce

作用:reduce()方法根据接收的函数将数组元素计算为一个值(从左到右)。
返回值:返回计算后的值
原数组:不改变
注意:reduce()对于空数组是不会执行回调函数的。
语法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
语法参数解析:function(total,currentValue,currentIndex,arr)函数必需,数组中每个元素都会执行这个函数;函数中的参数total必需,表示初始值或者计算结束后的返回值;currentValue必须,表示当前元素的值;currentIndex可选,表示当前元素的索引值;arr可选表示该数组;initialValue可选,表示传递给函数的初始值

var arr1=[6,3,32,16,19];
console.log(arr1.reduce(function(sum,val){
    return sum+val;
}))     //76
console.log(arr1);      //[6,3,32,16,9]
console.log([].reduce(function(sum,val){
    return sum+val;
}))     //报错
  1. reduceRight

作用:reduceRight()方法根据接收的函数将数组元素计算为一个值(从左到右)。
返回值:返回计算后的值
原数组:不改变
注意:reduce() 对于空数组是不会执行回调函数的。
语法:array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
语法参数解析:同上

var arr1=[6,3,32,16,19];
console.log(arr1.reduceRight(function(sum,val){
    return sum+val;
}))     //76
console.log(arr1);      //[6,3,32,16,9]
console.log([].reduceRight(function(sum,val){
    return sum+val;
}))     //报错
  1. fill

作用:fill()方法用于将一个固定值替换数组的元素。
返回值:Array,替换后的数组
是否改变原数组:改变
语法:array.fill(value, start, end)
语法参数解析:value为必需,表示填充的值;start可选,表示开始填充位置;end为可选,表示停止填充位置(默认为arr.length)

var arr1=[1,2,3,4,5,6];
console.log(arr1.fill('ab',2));     //[1, 2, "ab", "ab", "ab", "ab"]
console.log(arr1);     //[1, 2, "ab", "ab", "ab", "ab"]
var arr2=[1,2,3,4,5,6];
console.log(arr2.fill('fv',2,4));     //[1, 2, "fv", "fv", 5,6]
console.log(arr2);     //[1, 2, "fv", "fv", 5,6]
  1. indexOf

作用:indexOf()方法从头到尾地检索数组字符串stringObject,并返回某个指定的字符串值所在的位置。
返回值:Number,某个指定的字符串值在字符串中首次出现的位置,未找到则返回-1
原数组:不改变
语法:array.indexOf(item,start)
语法参数解析:item为必需,表示查找的元素;start可选的整数参数,表示开始查找的索引位置,默认为0

var arr1=['a','c','b','f','a','v','a'];
console.log(arr1.indexOf('a'));     //0
console.log(arr1);      //['a','c','b','f','a','v','a']
console.log(arr1.indexOf('a',3));   //4
console.log(arr1.indexOf('af'));    //-1
  1. lastIndexOf

作用:类似于indexOf()方法,lastIndexOf()方法从后往前检索数组字符串stringObject,并返回某个指定的字符串值所在的位置。
返回值:Number,某个指定的字符串值在字符串中最后出现的位置,未找到则返回-1
原数组:不改变
语法:array.lastIndexOf(item,start)
语法参数解析:item为必需,表示查找的元素;start可选的整数参数,表示开始查找的索引位置,默认为array.length-1

var arr1=['a','c','b','f','a','v','a'];
console.log(arr1.lastIndexOf('a'));     //6
console.log(arr1);      //['a','c','b','f','a','v','a']
console.log(arr1.lastIndexOf('a',3));   //0
console.log(arr1.lastIndexOf('a',5));   //4
console.log(arr1.lastIndexOf('af'));    //-1
  1. join

作用:join()方法用于把数组中的所有元素转换成一个字符串,元素是通过指定的分隔符进行分隔的。
返回值:String,转换后的字符串
原数组:不改变
语法:array.join(separator)
语法参数解析:separator可选,表示要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

var arr1=[1,2,3,4,5];
console.log(arr1.join());       //'1,2,3,4,5'
console.log(arr1);      //[1,2,3,4,5]
console.log(arr1.join('and'));      //'1and2and3and4and5'
  1. toString

作用:toString()方法可把数组转换为字符串,并返回结果,数组中的元素之间用逗号分隔
返回值:String,转换后的字符串
原数组:不改变
语法:array.toString()

var arr1=[1,2,3,4,5];
console.log(arr1.toString());   //'1,2,3,4,5'
console.log(arr1);      //[1,2,3,4,5]

第三组: 动态添加

点图中监督人员,然后弹出图中对话框,根据部门显示相关人员,并可以进行查询。下面是核心代码

image.png
///监督人员
$(function() {
    $(".DutyOfficerX").each(function() {
        $(this).attr("onClick", "selectPeople(this)");
        $(this).attr("readonly", "readonly");
    });
});
function selectPeople(a) {
    var controlId = $(a).attr("uid");
    var checkperson = a.id AlertPage('selectPeopleList.aspx?dutydept=质量管理分部' + '&idlist=' + controlId + '&tempid=' + checkperson, '选择人员', 250, 500, this)
}
function insertPeopleTpara(id, name, tempid) {
    if (id != "") {
        $("#" + tempid).val(name);
        $("#" + tempid).attr("uid", id);
    }
}

$(function() {
    dataInit();
}) function dataInit() {
    $("#<%=PmAsProblemCorActionsIm.ClientID%>").attr("uid");
    $("#<%=PmAsProblemCorActionsPre.ClientID%>").attr("uid");
}

selectPeopleList.aspx

$(function() {
    checked();
}) function checked() {
    var str = document.getElementsByName('cb');
    var a = '<%=Request["idlist"]%>';
    for (var i = 0; i < str.length; i++) {
        if (a.indexOf(str[i].value) > -1) {
            str[i].checked = true;
        }
    }
}

function savePeople() {
    var a1 = GetSelectValue('cb');
    if ($("#tblist").find("tr").length == 0 || a1 == "") {
        alert("无人员数据。");
        return false;
    }

    a1 = GetSelectValue('cb');
    var uid = '',
    uname = '';
    $("[name='cb']").each(function() {
        if ($(this).attr("checked") == true || $(this).attr("checked") == "checked") {
            uid += $(this).attr("value") + ",";
            uname += $(this).attr("u_name") + ",";
        }
    }) if (uname.length > 0) {
        uname = uname.substring(0, uname.length - 1);
    }
    ShowMsg(uid, uname);
}

function ShowMsg(id, name) {

    parent.insertPeopleTpara(id, name, '<%=Request["tempid"]%>');
    parent.CloseAlertPage();
}


第四组:李俊 LINQ的select方法查询from、where子句

上一次用到了LINQ的select方法查询,其实,它还有from、where子句。通常情况下,用var关键字声明结果变量,用from子句指定数据源,where子句指定条件,select子句选择元素。代码如下:

class IntroToLINQ
{        
    static void Main()
    {
        // The Three Parts of a LINQ Query:
        //  1. Data source.
        int[] numbers = new int[7] { 0, 1, 2, 3, 4, 5, 6 };

        // 2. Query creation.
        // numQuery is an IEnumerable<int>
        var numQuery =
            from num in numbers
            where (num % 2) == 0
            select num;

        // 3. Query execution.
        foreach (int num in numQuery)
        {
            Console.Write("{0,1} ", num);
        }
    }
}

其中,where子句是可选的,甚至可以忽略,但大多数情况下,都要指定where条件,把结果限制为我们需要的数据,可使用&&或||来连接多个条件,本例限制条件为偶数;select子句是必须的,因为必须指定结果集中有哪些元素;通常得到的数据放在一个数组中,此时就可以通过foreach遍历这些结果。


第五组:周倩宇 通用的ajax请求工具

直接调用 ajaxRequest 方法,传递需要的参数,即可ajax请求,节约时间

  • 通用的ajax请求函数
    • @param type 请求类型 get 或者 post
    • @param url 请求接口url
    • @param parmasMap Map类型的参数,key与value方式,其中,value统一为字符串
    • @param async 是否异步请求
    • @param successFun 请求成功回调函数的名称
function ajaxRequest(type, url, parmasMap, async, successFun) {
    //拼接参数
var parmas = "{";

    //遍历map,获取参数
    if(parmasMap != null){
        parmasMap.each(function(key,value,index){
            parmas += "\"" + key + "\"" + ":" + "\"" + value + "\"";
            if(index < parmasMap.size() - 1){
                parmas += ",";
            }
        });
        parmas += "}";
    }
    
    $.ajax({
        type : type,
        url : url,
        data : parmasMap == null ? null : eval("(" + parmas + ")"),
        async : async,
        cache : false,
        dataType : "text",
        contentType : "application/json",
        success : function(data) {
            var funObj = new runFun(successFun, data);
            try {
                funObj.func();
            } catch (e) {
                console.log(e);
                console.log(successFun + "()方法不存在或方法内部代码执行有错误");
            }
        }
    });
} 

//根据方法名称,调用执行方法
//successFun :请求成功回调的方法名称
//data : 后台返回的数据

function runFun(successFun, data) {
    this.func = new Function(successFun + "('" + data + "');");
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343

推荐阅读更多精彩内容

  • 数组的方法 首先我们先打印一下Array.prototype看一下数组都有哪些方法 concat1.定义和用法:c...
    黄鹤你不是人阅读 400评论 0 0
  • 86.复合 Cases 共享相同代码块的多个switch 分支 分支可以合并, 写在分支后用逗号分开。如果任何模式...
    无沣阅读 1,345评论 1 5
  • 一 2011年-2015年,我几乎每年去一次上海。前三次是被动,因为不同人的邀请,推脱不掉。而最后一次是主动去的,...
    顾子栀阅读 426评论 1 2
  • 下雨天最美好的事情之一就是:听着指弹曲、喝着茶、画着画 有同好者可以互相学习交流
    林玉枫阅读 214评论 5 8
  • 刚才在知乎看了一篇文章,里边有一句话说的非常好你的衣服不仅仅是衣服,也代表了个人的形象,公司的形象。 经常看奇葩说...
    AronGao阅读 790评论 0 0