第一組：劉聰 AngularJS 一鍵復制功能
Html：
Js：
效果：
第二組：馮佳麗 JavaScript數組方法總結
中篇：
- 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
- 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);
- 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;
})) //[]
- 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;
})) //報錯
- 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;
})) //報錯
- 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]
- 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
- 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
- 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'
- 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]
第三組： 動態添加
點圖中監督人員，然后彈出圖中對話框，根據部門顯示相關人員，并可以進行查詢。下面是核心代碼
///監督人員
$(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 + "');");
}
