javascript打怪升級--把業(yè)務(wù)邏輯當(dāng)練習(xí)題做

heartFollower 發(fā)布于2019-08-22 11:22 / 2919人閱讀

摘要：前言開發(fā)項目和出沒社區(qū)有一段時間了，會遇上一些比較有印象業(yè)務(wù)需求。因為這些業(yè)務(wù)邏輯可以當(dāng)做練習(xí)題一樣，可以給大家練手。測試學(xué)院獲獎統(tǒng)計學(xué)生申請優(yōu)秀畢業(yè)生，并且符合條件的成績優(yōu)秀，拿過獎學(xué)金，獲得過三好學(xué)生。

1.前言

開發(fā)項目和出沒社區(qū)有一段時間了，會遇上一些比較有印象業(yè)務(wù)需求。這些業(yè)務(wù)需求，可能是自己開發(fā)項目遇上的，可能是在社區(qū)看到的業(yè)務(wù)需求，或者其他情況接觸到的需求，但是這些業(yè)務(wù)需求的實現(xiàn)邏輯都值得一寫。因為這些業(yè)務(wù)邏輯可以當(dāng)做練習(xí)題一樣，可以給大家練手。也希望大家從這些需求實現(xiàn)的邏輯里面可以能到j(luò)avascript的相關(guān)知識，當(dāng)然如果大家覺得代碼需要怎樣優(yōu)化，或者有什么建議，更好的實現(xiàn)方案，覺得我哪里寫錯了，或者有覺得可以分享的需求，可以在評論提下！

2.月份坐標軸

這個需求是，看下圖就懂了

實現(xiàn)方式其實很簡單，我在代碼打上注釋，大家就懂了！

var _date=[],dateData=["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
//準備一個月份反轉(zhuǎn)的數(shù)組
var dateDataRet=Object.assign([],dateData).reverse();
//獲取當(dāng)前年份
var yearText=new Date().getFullYear();
//獲取當(dāng)前月份  調(diào)試的時候，大家可以通過調(diào)整now調(diào)試  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里面拿數(shù)據(jù)，下標=|now-i|-1。
        _date.push(yearText-1+"年"+dateDataRet[Math.abs(now-i)-1]);
    }
    else{
        //從dateData里面拿數(shù)據(jù)，下標=now-i
        _date.push(yearText+"年"+dateData[now-i]);
    }

}
_date.reverse();

可能大家看著會懵，直接看下面的循環(huán)圖就懂了

3.數(shù)值區(qū)間

如下圖，就是幾個數(shù)值區(qū)間，而且會有一個最小值和最大值

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("區(qū)間的最小值不能大于等于區(qū)間最大值");
            return;
        }
        //區(qū)間的最小值不能小于默認最小值
        if(arr[i].minmax){
            console.log("區(qū)間的最大值不能大于默認最大值");
            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);
            
            //如果前一個的最大值和當(dāng)前的最小值都是包含情況，那么當(dāng)前區(qū)間的最小值一定要比前一個區(qū)間的最大值大1
            if(arr[i].minInclude&&arr[i-1].maxInclude&&arr[i].min-arr[i-1].max!==1){
                console.log("取值范圍錯誤-當(dāng)前區(qū)間的最小值和前一個區(qū)間的最大值都是包含情況，當(dāng)前區(qū)間的最小值一定要比前一個區(qū)間的最大值大1");
                   return;
                
            }
            //如果前一個的最大值和當(dāng)前的最小值。一個是包含，一個是不包含，那么當(dāng)前區(qū)間的的最小值一定要等于上一個區(qū)間的最大值
            else if(arr[i].minInclude!==arr[i-1].maxInclude&&arr[i].min!==arr[i-1].max){
                console.log("取值范圍錯誤-當(dāng)前區(qū)間的最小值和前一個區(qū)間的最大值其中一個是包含，一個是不包含情況，當(dāng)前區(qū)間的最小值一定要等于前一個區(qū)間的最大值");
                return;
            }
            //如果前一個的最大值和當(dāng)前的最小值都是不包含，肯定不滿足
            else if((!arr[i].minInclude)&&(!arr[i-1].maxInclude)){
                console.log("取值范圍錯誤-前一個的最大值和當(dāng)前的最小值都是不包含情況，不滿足收尾相連");
                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}];

運行結(jié)果

4.數(shù)組對比

這個基于我回答過的一個問題，現(xiàn)在化用，改寫一下

JavaScript如何對比兩個數(shù)組？數(shù)組B根據(jù)數(shù)組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整個刪掉。

//準備臨時數(shù)組
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.學(xué)院獲獎
統(tǒng)計學(xué)生申請優(yōu)秀畢業(yè)生，并且符合條件的（成績優(yōu)秀，拿過獎學(xué)金，獲得過三好學(xué)生）。前提是要申請
大概的流程圖就是像下面這樣！

我在代碼上寫上注釋，相信不難理解了
//學(xué)生列表
//isApply：是否有申請優(yōu)秀畢業(yè)生
let studentList = [
    {
        name: "aa",
        isApply: false,
        id: 1
    },
    {
        name: "bb",
        isApply: true,
        id: 2
    },
    {
        name: "cc",
        isApply: true,
        id: 3
    }
];

//申請優(yōu)秀畢業(yè)生的學(xué)生 isApply:true

let _student = studentList.filter(function (item) {
    return item.isApply;
});
//isExcellent:優(yōu)秀學(xué)生的id列表
//isScholarship:獲得過獎學(xué)金的學(xué)生的id列表
//isThreeGood:獲得過三好學(xué)生的學(xué)生的id列表
//accord:集合
let isExcellent = [1, 2, 3, 4, 5], isScholarship = [4, 2, 5, 6, 2, 1, 2], isThreeGood = [2, 1, 4, 52, 36], accord = [];
//數(shù)組去重函數(shù)
function removeRepeatArr(arr) {
    return arr.filter(function (item, index, self) {
        return self.indexOf(item) === index;
    });
}

//統(tǒng)計數(shù)組中，一個遇上元素的出現(xiàn)次數(shù)
function getEleCount(obj, ele) {
    let num = 0;
    for (let i = 0, len = obj.length; i < len; i++) {
        if (ele === obj[i]) {
            num++;
        }
    }
    return num;
}

//添加學(xué)生記錄，把獲得成績優(yōu)秀的學(xué)生的id，獲得過獎學(xué)金的學(xué)生的id，獲得過三好學(xué)生的id添加進去。
//但是添加之前，要對獲得成績優(yōu)秀的學(xué)生的id，獲得過獎學(xué)金的學(xué)生的id，獲得過三好學(xué)生的id。這個三個數(shù)組進行去重再添加進accord，因為一個學(xué)生可能不止一次成績優(yōu)秀，不止一次獲得過獎學(xué)金，不止一次獲得過三好學(xué)生
//這樣就方便下面的判斷，只要學(xué)生的id在accord里面出現(xiàn)兩次及以上就符合條件
accord.push.apply(accord, removeRepeatArr(isExcellent));
accord.push.apply(accord, removeRepeatArr(isScholarship));
accord.push.apply(accord, removeRepeatArr(isThreeGood));
console.log(accord);
//符合條件的學(xué)生列表
let accordStudent = [];
for (let i = 0; i < _student.length; i++) {
    //只要學(xué)生的id在accord里面出現(xiàn)兩次及以上
    if (getEleCount(accord, _student[i].id) >= 2) {
        //記錄哪些學(xué)生符合條件
        accordStudent.push(_student[i]);
    }
}
console.log(accordStudent);

6.數(shù)組連續(xù)的最大長度
這個也是出于我回答過的問題：如下
//假如有一個數(shù)組，下面這個數(shù)組最大的連續(xù)長度就是4——————8,9,10,11
var arr=[1,2,4,5,6,8,9,10,11];

//代碼實現(xiàn)
function countLen(arr){
    //如果參數(shù)不是數(shù)組或者長度為0，直接返回0
    if(arr.constructor!==Array||arr.length===0){return 0;}
    //首先進入當(dāng)前連續(xù)長度nowLen設(shè)初始化為1，最大連續(xù)長度maxLen初始化為0
    var nowLen=1,maxLen=0;
    
    for(var i=1,len=arr.length;i


7.答題連對數(shù)
這個和上面的代碼基本一樣，只是判斷條件毫厘之差，直接貼，大家看就好
function countTrue(arr){debugger;
    //如果參數(shù)不是數(shù)組或者長度為0，直接返回0
    if(arr.constructor!==Array||arr.length===0){return 0;}
    //首先初始化連續(xù)答對長度nowLen為0，最大連續(xù)答對長度maxLen為0
    var nowLen=0,maxLen=0;
    for(var i=0,len=arr.length;i

8.命名方式轉(zhuǎn)換
比如駝峰命名方式轉(zhuǎn)"-"命名方式。
var str = "shouHou";
//$1-第一個括號匹配的內(nèi)容
//這個實例，$1="H"
str = str.replace(/([A-Z])/g,"-$1").toLowerCase();


比如"-"命名方式轉(zhuǎn)駝峰命名方式
var str="shou-hou";
//$0-匹配的結(jié)果   $1-第一個括號匹配的內(nèi)容
//這個實例$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     這個正則的意思：匹配連續(xù)的三個數(shù)字，但是這些三個數(shù)字不能是字符串的開頭1-3個字符  
     */
    var reg=new RegExp(regText,"g");
    /* 
    (-?) 匹配前面的-號   (d+)匹配中間的數(shù)字   ((.d+)?)匹配小數(shù)點后面的數(shù)字
    //$0-匹配結(jié)果，$1-第一個括號返回的內(nèi)容----(-?)    $2,$3如此類推  
    */
    return _str.replace(/^(-?)(d+)((.d+)?)$/, function ($0, $1, $2, $3) {
          return $1 + $2.replace(reg, "$&,") + $3;
    })
}



10.對象合并，并且記錄異常數(shù)據(jù)
這個需求，可能大家有點懵。下面實例分析
比如有兩個都地方記錄了我的信息
let info1={
        name:"守候",
        sex:"男",
        age:24,
        job:"web前端"
    },info2={
        name:"守候!",
        country:"china",
        interest:"basketball",
        phone:"12345678910",
        job:"web前端"
    }
現(xiàn)在要合并我的信息，并且記錄可能有異常的信息。比如上面的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.篩選標簽
如下圖，在下面渲染這個標簽

大家可能第一可能覺得壓根沒難度
就是一個對象數(shù)組：比如
var searchTag=[
    {label:"產(chǎn)品編碼",value:"100072236-8"},
    {label:"產(chǎn)品名稱",value:"甘油"}
]
但是這樣的數(shù)據(jù)，顯然是要經(jīng)過處理生成的
因為不可能這樣發(fā)送請求
http://example.com?產(chǎn)品編碼=100072236-8   
發(fā)送過去的參數(shù)應(yīng)該是這樣的
http://example.com?proId=100072236-8

var searchParam={proId:"100072236-8",proName:"甘油"}   
怎么進行數(shù)據(jù)的處理呢，其實很簡單，代碼不打注釋，我想都看得懂
var searchTag=[];
var searchText={proId:"產(chǎn)品編碼",proName:"產(chǎn)品名稱"};
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)    


有了這些數(shù)據(jù)，渲染到頁面這個就簡單了！
12.導(dǎo)入excel內(nèi)容
就是excel上這樣的內(nèi)容

轉(zhuǎn)成下面的數(shù)據(jù)


目錄如下

下面開始寫代碼，我們利用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數(shù)據(jù)
    let workBook=exlJson;
    //獲取excel第一張表 sheet1
    let workSheets=workBook[0];
    //導(dǎo)出js的路徑
    let newfilepath=path.join(__dirname,"/resource/test.js");
    //遍歷第一張表的的每一行數(shù)據(jù)
    workSheets.forEach((item,index)=>{
        //從第二行開始插入，避免連表頭也插入_data里面
        if(index>0){
            //往_data插入單元格個值，item[0]相當(dāng)于excel中的姓名，item[1]就是excel中的聯(lián)系電話
            _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);
});
然后命令行執(zhí)行該js
$ node importFile.js

然后就發(fā)現(xiàn)多了一個test.js文件

excel的數(shù)據(jù)就這樣導(dǎo)入成js的一個數(shù)組了，只要引入這個數(shù)組，就可以正常的使用了！
13.隨機循環(huán)
當(dāng)時接到的業(yè)務(wù)是實際顯示客戶的信息，感覺有點像音樂播放器的隨機循環(huán)。
要求有兩個：
1.一個提示列表里面，提示的信息每隔500ms隨機展示。
2.同一輪循環(huán)里面，一個提示信息只能展示一次。
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中刪除掉，防止在同一輪重復(fù)出現(xiàn)！
    console.log(tipListShow.splice(Math.floor(Math.random() * tipListShow.length),1)[0]);
    //當(dāng)循環(huán)完了之后，tipListShow的長度就會是0，然后就重新賦值，準備進行下一輪的隨機循環(huán)
    if(tipListShow.length===0){
        tipListShow=Object.assign([],tipList);
        i=0;
    }
    //如果需要暫停或者停止的，清除這個定時器即可，下次執(zhí)行就重新這樣創(chuàng)建定時器，執(zhí)行play();！
    timer=setTimeout(function () {
        play();
    },500);
}
play();


14.小結(jié)
好了，關(guān)于我收集到的一些業(yè)務(wù)需求邏輯，以及實現(xiàn)的方式，就說到這里了！接觸到的業(yè)務(wù)需求邏輯很多，但是值得寫的，可以當(dāng)做練習(xí)題的，就記錄到這里了。我上面代碼實現(xiàn)可能會有點粗糙，大家有更好的實現(xiàn)方案，歡迎建議一下。如果大家有什么可以當(dāng)做練習(xí)題的需求，可以提下。讓大家有多些練習(xí)題可以嘗試下，學(xué)習(xí)下！
-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號：守候書閣

云服務(wù)器 GPU云服務(wù)器 javascript練習(xí)題如何把筆記當(dāng)服務(wù)器怎么把電腦當(dāng)云服務(wù)器把云服務(wù)器當(dāng)電腦用

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92273.html

發(fā)表評論

登陸后可評論

0條評論

heartFollower

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 965·2023-04-25 23:50
App穩(wěn)定性測試-Fastbot使用筆記

閱讀 1998·2021-11-19 09:40
深入理解行內(nèi)元素的布局

閱讀 611·2019-08-30 13:50
微信小程序性能優(yōu)化入門指南

閱讀 2739·2019-08-29 17:11
定時器以及定時器的幾個案例

閱讀 1052·2019-08-29 16:37
CSS border屬性--妙用

閱讀 2997·2019-08-29 12:54
CSS 盒模型

閱讀 2807·2019-08-28 18:17
UCloud云主機硬件隔離組

閱讀 2649·2019-08-26 16:55

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript打怪升級--把業(yè)務(wù)邏輯當(dāng)練習(xí)題做

相關(guān)文章

一只node爬蟲的升級打怪之路

鄭方方打怪升級日記 — 初識HTML5與CSS3

鄭方方打怪升級日記 — 初識HTML5與CSS3

鄭方方打怪升級日記 — 初識HTML5與CSS3

發(fā)表評論

0條評論

heartFollower

男|高級講師

TA的文章

tensorflow

App穩(wěn)定性測試-Fastbot使用筆記

深入理解行內(nèi)元素的布局

微信小程序性能優(yōu)化入門指南

定時器以及定時器的幾個案例

CSS border屬性--妙用

CSS 盒模型

UCloud云主機硬件隔離組

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

javascript打怪升級--把業(yè)務(wù)邏輯當(dāng)練習(xí)題做

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！