資訊專欄INFORMATION COLUMN
摘要：前言開發項目和出沒社區有一段時間了，會遇上一些比較有印象業務需求。因為這些業務邏輯可以當做練習題一樣，可以給大家練手。測試學院獲獎統計學生申請優秀畢業生，并且符合條件的成績優秀，拿過獎學金，獲得過三好學生。
1.前言
開發項目和出沒社區有一段時間了，會遇上一些比較有印象業務需求。這些業務需求，可能是自己開發項目遇上的，可能是在社區看到的業務需求，或者其他情況接觸到的需求，但是這些業務需求的實現邏輯都值得一寫。因為這些業務邏輯可以當做練習題一樣，可以給大家練手。也希望大家從這些需求實現的邏輯里面可以能到javascript的相關知識，當然如果大家覺得代碼需要怎樣優化，或者有什么建議，更好的實現方案，覺得我哪里寫錯了，或者有覺得可以分享的需求，可以在評論提下！
2.月份坐標軸這個需求是，看下圖就懂了
實現方式其實很簡單，我在代碼打上注釋，大家就懂了！
var _date=[],dateData=["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
//準備一個月份反轉的數組
var dateDataRet=Object.assign([],dateData).reverse();
//獲取當前年份
var yearText=new Date().getFullYear();
//獲取當前月份 調試的時候，大家可以通過調整now調試 3月-now=2,12月now=11...
var now=new Date().getMonth();
for(let i=0;i<6;i++){
if(now-i<0){
//如果now-i<0，從dateDataRet里面拿數據，下標=|now-i|-1。
_date.push(yearText-1+"年"+dateDataRet[Math.abs(now-i)-1]);
}
else{
//從dateData里面拿數據，下標=now-i
_date.push(yearText+"年"+dateData[now-i]);
}
}
_date.reverse();
可能大家看著會懵，直接看下面的循環圖就懂了
3.數值區間如下圖，就是幾個數值區間，而且會有一個最小值和最大值
var _min=5,_max=50;
function checkArr(arr,min,max){
//排序
arr.sort(function(n1,n2){return n1.min-n2.min})
//遍歷
for(var i=0;i=arr[i].max){
console.log("區間的最小值不能大于等于區間最大值");
return;
}
//區間的最小值不能小于默認最小值
if(arr[i].minmax){
console.log("區間的最大值不能大于默認最大值");
return;
}
//元素對比，從第二個元素開始
if(i>0){
//minInclude，maxInclude，為false就是不包含，為true就是包含
//{min:10,max:20,minInclude:false,maxInclude:false}
//等同于(10,20)
//{min:20,max:30,minInclude:true,maxInclude:false}
//等同于[20,30);
//如果前一個的最大值和當前的最小值都是包含情況，那么當前區間的最小值一定要比前一個區間的最大值大1
if(arr[i].minInclude&&arr[i-1].maxInclude&&arr[i].min-arr[i-1].max!==1){
console.log("取值范圍錯誤-當前區間的最小值和前一個區間的最大值都是包含情況，當前區間的最小值一定要比前一個區間的最大值大1");
return;
}
//如果前一個的最大值和當前的最小值。一個是包含，一個是不包含，那么當前區間的的最小值一定要等于上一個區間的最大值
else if(arr[i].minInclude!==arr[i-1].maxInclude&&arr[i].min!==arr[i-1].max){
console.log("取值范圍錯誤-當前區間的最小值和前一個區間的最大值其中一個是包含，一個是不包含情況，當前區間的最小值一定要等于前一個區間的最大值");
return;
}
//如果前一個的最大值和當前的最小值都是不包含，肯定不滿足
else if((!arr[i].minInclude)&&(!arr[i-1].maxInclude)){
console.log("取值范圍錯誤-前一個的最大值和當前的最小值都是不包含情況，不滿足收尾相連");
return;
}
}
}
}
測試用例
var arr1=[{min:10,max:20,minInclude:false,maxInclude:true},{min:21,max:30,minInclude:true,maxInclude:true}],
arr2=[{min:10,max:20,minInclude:false,maxInclude:true},{min:20,max:30,minInclude:true,maxInclude:false}],
arr3=[{min:10,max:20,minInclude:false,maxInclude:true},{min:20,max:30,minInclude:false,maxInclude:false}],
arr4=[{min:10,max:20,minInclude:false,maxInclude:false},{min:20,max:30,minInclude:true,maxInclude:false}],
arr5=[{min:10,max:20,minInclude:false,maxInclude:false},{min:21,max:30,minInclude:true,maxInclude:false}],
arr6=[{min:10,max:20,minInclude:false,maxInclude:false},{min:15,max:30,minInclude:false,maxInclude:false}],
arr7=[{min:10,max:20,minInclude:false,maxInclude:false},{min:20,max:30,minInclude:false,maxInclude:false}],
arr8=[{min:1,max:20,minInclude:false,maxInclude:false},{min:20,max:30,minInclude:false,maxInclude:false}],
arr9=[{min:20,max:20,minInclude:false,maxInclude:false},{min:20,max:30,minInclude:false,maxInclude:false}],
arr10=[{min:20,max:30,minInclude:false,maxInclude:false},{min:20,max:70,minInclude:false,maxInclude:false}];
運行結果
4.數組對比這個基于我回答過的一個問題，現在化用，改寫一下
JavaScript如何對比兩個數組？數組B根據數組A來做出增刪？ (不用jquery，原生js)
具體問題是這樣的：
arryA
var arrayA = ["a","b","c"];
arryB
var arrayB = [{
key:"a",
num1:"1",
num2:"2",
num3:"3",
tot:"6"
},{
key:"b",
num1:"11",
num2:"22",
num3:"33",
tot:"66"
},{
key: "c",
num1: "111",
num2: "222",
num3: "333",
tot:666
}];
1、如果arryA中有a，arryB中沒有，那么在arryB中增加一個key值為a的boj，且其他屬性值可均為"0";如下： {key:"a",num1:"0",num2:"0",num3:"0",tot":0"}
2、如果arryA中有a，arryB中也有key值為a的obj,那么arryB則不改變，并且該obj里的其他屬性和屬性值均不變;
3、如果在arryA中刪除了a，那么arryB中key值為a的obj整個刪掉。
//準備臨時數組
function compareArr(arr1,arr2){
var result=[],arr;
//遍歷
for(var i=0;i
測試
var arrayA = ["b","c"];
var arrayB = [{
key:"a",
num1:"1",
num2:"2",
num3:"3",
tot:"6"
},{
key:"b",
num1:"11",
num2:"22",
num3:"33",
tot:"66"
},{
key: "c",
num1: "111",
num2: "222",
num3: "333",
tot:666
}];
compareArr(arrayA,arrayB);
5.學院獲獎
統計學生申請優秀畢業生，并且符合條件的（成績優秀，拿過獎學金，獲得過三好學生）。前提是要申請
大概的流程圖就是像下面這樣！
我在代碼上寫上注釋，相信不難理解了
//學生列表
//isApply：是否有申請優秀畢業生
let studentList = [
{
name: "aa",
isApply: false,
id: 1
},
{
name: "bb",
isApply: true,
id: 2
},
{
name: "cc",
isApply: true,
id: 3
}
];
//申請優秀畢業生的學生 isApply:true
let _student = studentList.filter(function (item) {
return item.isApply;
});
//isExcellent:優秀學生的id列表
//isScholarship:獲得過獎學金的學生的id列表
//isThreeGood:獲得過三好學生的學生的id列表
//accord:集合
let isExcellent = [1, 2, 3, 4, 5], isScholarship = [4, 2, 5, 6, 2, 1, 2], isThreeGood = [2, 1, 4, 52, 36], accord = [];
//數組去重函數
function removeRepeatArr(arr) {
return arr.filter(function (item, index, self) {
return self.indexOf(item) === index;
});
}
//統計數組中，一個遇上元素的出現次數
function getEleCount(obj, ele) {
let num = 0;
for (let i = 0, len = obj.length; i < len; i++) {
if (ele === obj[i]) {
num++;
}
}
return num;
}
//添加學生記錄，把獲得成績優秀的學生的id，獲得過獎學金的學生的id，獲得過三好學生的id添加進去。
//但是添加之前，要對獲得成績優秀的學生的id，獲得過獎學金的學生的id，獲得過三好學生的id。這個三個數組進行去重再添加進accord，因為一個學生可能不止一次成績優秀，不止一次獲得過獎學金，不止一次獲得過三好學生
//這樣就方便下面的判斷，只要學生的id在accord里面出現兩次及以上就符合條件
accord.push.apply(accord, removeRepeatArr(isExcellent));
accord.push.apply(accord, removeRepeatArr(isScholarship));
accord.push.apply(accord, removeRepeatArr(isThreeGood));
console.log(accord);
//符合條件的學生列表
let accordStudent = [];
for (let i = 0; i < _student.length; i++) {
//只要學生的id在accord里面出現兩次及以上
if (getEleCount(accord, _student[i].id) >= 2) {
//記錄哪些學生符合條件
accordStudent.push(_student[i]);
}
}
console.log(accordStudent);
6.數組連續的最大長度
這個也是出于我回答過的問題：如下
//假如有一個數組，下面這個數組最大的連續長度就是4——————8,9,10,11
var arr=[1,2,4,5,6,8,9,10,11];
//代碼實現
function countLen(arr){
//如果參數不是數組或者長度為0，直接返回0
if(arr.constructor!==Array||arr.length===0){return 0;}
//首先進入當前連續長度nowLen設初始化為1，最大連續長度maxLen初始化為0
var nowLen=1,maxLen=0;
for(var i=1,len=arr.length;i
7.答題連對數
這個和上面的代碼基本一樣，只是判斷條件毫厘之差，直接貼，大家看就好
function countTrue(arr){debugger;
//如果參數不是數組或者長度為0，直接返回0
if(arr.constructor!==Array||arr.length===0){return 0;}
//首先初始化連續答對長度nowLen為0，最大連續答對長度maxLen為0
var nowLen=0,maxLen=0;
for(var i=0,len=arr.length;i
8.命名方式轉換
比如駝峰命名方式轉"-"命名方式。
var str = "shouHou";
//$1-第一個括號匹配的內容
//這個實例，$1="H"
str = str.replace(/([A-Z])/g,"-$1").toLowerCase();
比如"-"命名方式轉駝峰命名方式
var str="shou-hou";
//$0-匹配的結果 $1-第一個括號匹配的內容
//這個實例$0="-h" $1="h"
str=str.replace(/-(w)/g,function($0,$1){
return $1.toUpperCase();
});
9.格式化字符
這個最常見的就是在金額方面的顯示需求上，比如后臺返回10000。前端要顯示成10,000或者其他格式等！
//str
//size-每隔幾個字符進行分割 默認3
//delimiter-分割符 默認","
function formatText(str,size,delimiter){
var _str=str.toString();
var _size=size||3,_delimiter=delimiter||",";
/*
如果_size是3
"d{1,3}(?=(d{3})+$)"
*/
var regText="d{1,"+_size+"}(?=(d{"+_size+"})+$)";
/*
/d{1,3}(?=(d{3})+$)/g 這個正則的意思：匹配連續的三個數字，但是這些三個數字不能是字符串的開頭1-3個字符
*/
var reg=new RegExp(regText,"g");
/*
(-?) 匹配前面的-號 (d+)匹配中間的數字 ((.d+)?)匹配小數點后面的數字
//$0-匹配結果，$1-第一個括號返回的內容----(-?) $2,$3如此類推
*/
return _str.replace(/^(-?)(d+)((.d+)?)$/, function ($0, $1, $2, $3) {
return $1 + $2.replace(reg, "$&,") + $3;
})
}
10.對象合并，并且記錄異常數據
這個需求，可能大家有點懵。下面實例分析
比如有兩個都地方記錄了我的信息
let info1={
name:"守候",
sex:"男",
age:24,
job:"web前端"
},info2={
name:"守候!",
country:"china",
interest:"basketball",
phone:"12345678910",
job:"web前端"
}
現在要合并我的信息，并且記錄可能有異常的信息。比如上面的name屬性，在兩個對象都有，而且兩個對象的值不一樣，那么就不知道到底是info1中的name屬性是正確的，還是info2中的name屬性是正確的。所以，就得把name這個屬性記錄起來，方便以后核對name這個屬性。
如下圖
下面，一步一步來，先不管3721，直接合并屬性
let objAll={};
function assignObj(objArr) {
let _obj={};
for(let i=0;i
然后先準備一個字段，記錄哪些異常信息
objAll.warnInfo=[];
最后檢查對象，判斷哪些信息有異常
function checkObj(_objAll,objList) {
//獲取所有屬性
let _keys=Object.keys(_objAll);
for(let i=0;i
11.篩選標簽
如下圖，在下面渲染這個標簽
大家可能第一可能覺得壓根沒難度
就是一個對象數組：比如
var searchTag=[
{label:"產品編碼",value:"100072236-8"},
{label:"產品名稱",value:"甘油"}
]
但是這樣的數據，顯然是要經過處理生成的
因為不可能這樣發送請求
http://example.com?產品編碼=100072236-8
發送過去的參數應該是這樣的
http://example.com?proId=100072236-8
var searchParam={proId:"100072236-8",proName:"甘油"}
怎么進行數據的處理呢，其實很簡單，代碼不打注釋，我想都看得懂
var searchTag=[];
var searchText={proId:"產品編碼",proName:"產品名稱"};
var searchParam={proId:"100072236-8",proName:"甘油"};
Object.keys(searchParam).forEach(function (item) {
searchTag.push({
label:searchText[item],
key:item,
value:searchParam[item]
})
})
console.log(searchTag)
有了這些數據，渲染到頁面這個就簡單了！
12.導入excel內容
就是excel上這樣的內容
轉成下面的數據
目錄如下
下面開始寫代碼，我們利用node.js來寫
let path = require("path");
//使用ejsexcel讀取excel文件 npm install ejsexcel --save
let ejsExcel=require("ejsexcel");
let fs=require("fs");
//讀取excel
let exBuf=fs.readFileSync(__dirname+"/resource/userList.xlsx");
let _data=[];
//獲取成功后
ejsExcel.getExcelArr(exBuf).then(exlJson=>{
//獲取excel數據
let workBook=exlJson;
//獲取excel第一張表 sheet1
let workSheets=workBook[0];
//導出js的路徑
let newfilepath=path.join(__dirname,"/resource/test.js");
//遍歷第一張表的的每一行數據
workSheets.forEach((item,index)=>{
//從第二行開始插入，避免連表頭也插入_data里面
if(index>0){
//往_data插入單元格個值，item[0]相當于excel中的姓名，item[1]就是excel中的聯系電話
_data.push({
name:item[0],
phone:item[1]
})
}
});
//寫入js文件
fs.writeFileSync(newfilepath, "let _data="+JSON.stringify(_data)+";export {_data}");
}).catch(error=>{
//打印獲取失敗信息
console.log("讀取錯誤!");
console.log(error);
});
然后命令行執行該js
$ node importFile.js
然后就發現多了一個test.js文件
excel的數據就這樣導入成js的一個數組了，只要引入這個數組，就可以正常的使用了！
13.隨機循環
當時接到的業務是實際顯示客戶的信息，感覺有點像音樂播放器的隨機循環。
要求有兩個：
1.一個提示列表里面，提示的信息每隔500ms隨機展示。
2.同一輪循環里面，一個提示信息只能展示一次。
3.列表的提示信息全部展示完了，進行下一輪展示。
這個邏輯沒什么，直接在代碼打上注釋，我想大家就明白了！
var tipList=["提示1","提示2","提示3","提示4","提示5","提示6","提示7","提示8","提示9"];
var tipListShow=[];
tipListShow=Object.assign([],tipList);
var i=0,timer=null;
function play() {
//隨機顯示一個，顯示了之后，把這個項從tipListShow中刪除掉，防止在同一輪重復出現！
console.log(tipListShow.splice(Math.floor(Math.random() * tipListShow.length),1)[0]);
//當循環完了之后，tipListShow的長度就會是0，然后就重新賦值，準備進行下一輪的隨機循環
if(tipListShow.length===0){
tipListShow=Object.assign([],tipList);
i=0;
}
//如果需要暫停或者停止的，清除這個定時器即可，下次執行就重新這樣創建定時器，執行play();！
timer=setTimeout(function () {
play();
},500);
}
play();
14.小結
好了，關于我收集到的一些業務需求邏輯，以及實現的方式，就說到這里了！接觸到的業務需求邏輯很多，但是值得寫的，可以當做練習題的，就記錄到這里了。我上面代碼實現可能會有點粗糙，大家有更好的實現方案，歡迎建議一下。如果大家有什么可以當做練習題的需求，可以提下。讓大家有多些練習題可以嘗試下，學習下！
-------------------------華麗的分割線--------------------
想了解更多，關注關注我的微信公眾號：守候書閣
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92273.html
摘要：我是一個知乎輕微重度用戶，之前寫了一只爬蟲幫我爬取并分析它的數據，我感覺這個過程還是挺有意思，因為這是一個不斷給自己創造問題又去解決問題的過程。所以這只爬蟲還有登陸知乎搜索題目的功能。 我一直覺得，爬蟲是許多web開發人員難以回避的點。我們也應該或多或少的去接觸這方面，因為可以從爬蟲中學習到web開發中應當掌握的一些基本知識。而且，它還很有趣。 我是一個知乎輕微重度用戶，之前寫了一只爬...
摘要：任務名稱響應式砸蛋頁面任務背景前輩方方啊最近項目也沒什么事情你看這個砸蛋頁面不是很好看要不你做一個響應式砸蛋頁面吧系統鄭方方接下前輩的任務鄭方方自動解析任務步驟任務響應式砸蛋頁面與入門閱讀秘籍響應式布局制作層搭配搭配控制器完成任務人物背 任務名稱:響應式砸蛋頁面 任務背景 前輩:方方啊,最近項目也沒什么事情,你看這個砸蛋頁面不是很好看,要不你做一個響應式砸蛋頁面吧? 系統:鄭方方接下前...
摘要：任務名稱響應式砸蛋頁面任務背景前輩方方啊最近項目也沒什么事情你看這個砸蛋頁面不是很好看要不你做一個響應式砸蛋頁面吧系統鄭方方接下前輩的任務鄭方方自動解析任務步驟任務響應式砸蛋頁面與入門閱讀秘籍響應式布局制作層搭配搭配控制器完成任務人物背 任務名稱:響應式砸蛋頁面 任務背景 前輩:方方啊,最近項目也沒什么事情,你看這個砸蛋頁面不是很好看,要不你做一個響應式砸蛋頁面吧? 系統:鄭方方接下前...
摘要：任務名稱響應式砸蛋頁面任務背景前輩方方啊最近項目也沒什么事情你看這個砸蛋頁面不是很好看要不你做一個響應式砸蛋頁面吧系統鄭方方接下前輩的任務鄭方方自動解析任務步驟任務響應式砸蛋頁面與入門閱讀秘籍響應式布局制作層搭配搭配控制器完成任務人物背 任務名稱:響應式砸蛋頁面 任務背景 前輩:方方啊,最近項目也沒什么事情,你看這個砸蛋頁面不是很好看,要不你做一個響應式砸蛋頁面吧? 系統:鄭方方接下前...
閱讀 955·2023-04-25 23:50
閱讀 1954·2021-11-19 09:40
閱讀 598·2019-08-30 13:50
閱讀 2727·2019-08-29 17:11
閱讀 1041·2019-08-29 16:37
閱讀 2985·2019-08-29 12:54
閱讀 2792·2019-08-28 18:17
閱讀 2636·2019-08-26 16:55
