數組方法應用案例
案例要求
target.png
目標：通過頂部的輸入框和按鈕來篩選后端傳送的數據并顯示在頁面上
案例分析
HTML部分
首先用一個大div盒子將所有的東西裝起來
盒子內部分為上下兩部分：篩選 + 結果展示，分別用兩個div盒子裝起來。
篩選部分包含一個input輸入框，和三個按鈕。按鈕用三個span標簽。
結果展示部分每一條信息用一個li標簽展示，li標簽內部包含一個img標簽和兩個p標簽
CSS部分
- 整體在頁面中顯示的位置和大小
- 篩選部分中輸入框大小、間距、按鈕顏色、被選中的狀態
- 結果展示圖片大小、位置、文字大小、顏色
JS部分
當通過HTML和CSS將靜態頁面的展示效果做好并滿足要求之后，開始JS部分
- 默認狀態下將顯示所有人員信息。通過
foreach將數組數據遍歷并顯示在頁面showMessage - 檢測input輸入的內容，與人員姓名進行比對
filterArrByText，將符合要求的數據顯示在頁面showMessage。用到的數組方法filter - 點擊按鈕，與人員性別進行比對
filterArrBySex，將符合條件的人員信息在頁面顯示出來showMessage - 符合條件下的信息顯示。
- 先通過文本篩選并顯示，然后再次基礎山篩選性別
- 先通過性別篩選，然后通過文本復合篩選
案例實踐
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- wrapper包含了所有內容，方便設置整體在頁面中的位置，和基本樣式 -->
<div class="wrapper">
<!-- 篩選部分 -->
<div class="filterFunc">
<input type="text" id="demo"></input>
<span class="btn" sex='m'>Male</span>
<span class="btn" sex='f'>Female</span>
<span class="btn active" sex='a'>All</span>
</div>
<!-- sex為自定義屬性 -->
<!-- 列表展示部分 -->
<div class="friendList">
<ul>
<!-- 具體展示部分，在項目實施開始階段實施，便于配合CSS設置樣式，
以此判斷是否復合要求，在靜態頁面完成之后注釋掉 -->
<!-- <li>
<img src="src/01.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/02.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/03.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/04.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li>
<li>
<img src="src/05.jfif" alt="">
<p class="name">15644gsgf</p>
<p class="des">15644gsgf</p>
</li> -->
</ul>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS
/* reset style */
*{
margin: 0;
padding: 0;
list-style: none;
}
/* filterFunc style*/
.wrapper{
width: 400px;
margin: 100px auto 0px;
border: 1px solid #000;
border-radius: 5px;
padding: 10px;
background-color: #f4f4f4;
}
.wrapper .filterFunc{
margin-bottom: 10px;
}
.wrapper .filterFunc input{
width: 220px;
height: 15px;
border-radius: 5px;
padding:5px;
outline: none;
}
.wrapper .filterFunc .btn{
color: #4171f2;
padding: 5px;
cursor: pointer;
}
.wrapper .filterFunc .active{
color: azure;
background-color: #4171f2;
border-radius: 5px;
}
/* friendList style */
.friendList ul li{
border-bottom: 1px solid gray;
position: relative;
padding: 5px 0 5px 50px;
}
.friendList ul li img{
width: 40px;
height: 40px;
position: absolute;
left: 0;
top: 5px;
}
.friendList ul li .des{
font-size: 10px;
color: gray;
margin-top: 3px;
}
JS
var personArr = [
{ name: '張三', sex: 'm', age: 18,des: '別叫我張三',src:'src/00.jfif'},
{ name: '王二', sex: 'f', age: 22,des: '別叫我李四',src:'src/01.jfif'},
{ name: '李四', sex: 'm', age: 28,des: '別叫我王二',src:'src/02.jfif'},
{ name: '李四兒', sex: 'm', age: 28,des: '別叫我王二',src:'src/05.jfif'},
{ name: '麻子', sex: 'f', age: 46,des: '叫我大帥比',src:'src/03.jfif'},
{ name: '小麻子', sex: 'm', age: 16,des: '人家是小美女啦',src:'src/04.jfif'}
];
var oUl = document.getElementsByClassName('friendList')[0].getElementsByTagName('ul')[0];
var btnText = {
text: '',
sex: 'a'
}//存儲輸入的文本和按鈕的sex屬性值，便于進行符合篩選，默認text為空串，sex為a，即顯示全部
//向頁面添加信息
function showMessage(data){
var htmlStr = '';
data.forEach(function(ele,index,self){
htmlStr +='<li><img src=' + ele.src + '><p class="name">' + ele.name + '</p><p class="des">' + ele.des + '</p></li>'
})
oUl.innerHTML = htmlStr;
}
showMessage(personArr);
//獲取輸入文本信息
var oInput = document.getElementsByTagName('input')[0];
function filterArrByText(data,text){//通過輸入的文本篩選,返回篩選后的數組
// 如果text為空就不遍歷，提高性能
if(!text){
return data;
}
return data.filter(function(ele,index,self){
return ele.name.indexOf(text) != -1;
});
// 通過indexOf方法判斷name中是否含有輸入的文本，這個方法比較low，
// 只能判斷text是否為name非空子集
// 后續可以寫一個方法，只要text中含有和name中相同的關鍵字就返回true
//即取交集
}
//綁定輸入事件
oInput.oninput = function(){
//當用戶輸入信息時調用方法filterArrByText
var filterArr = filterArrByText(personArr,this.value);
btnText.text = this.value;//將輸入的文本更新至全局
showMessage(filterArrBySex(filterArr,btnText.sex));
//這里將得到的數組再根據sex篩選一次，將結果展示到頁面
}
// 獲取btn按鈕，綁定事件
var btnObj = document.getElementsByClassName('btn');
btnArr = [].slice.call(btnObj,0);//通過數組的slice方法將類數組轉化為數組
var lastActiveBtn = btnArr[btnArr.length - 1];//默認選中最后一個按鈕
//給每個按鈕綁定鼠標單擊事件
btnArr.forEach(function(ele,index){
ele.onclick = function(){
// console.log(ele)
setActive(this);
var sex = ele.getAttribute('sex');//獲取自定義屬性值
btnText.sex = sex;//更新全局sex，便于符合篩選
var filterArr = filterArrBySex(personArr,sex);
showMessage(filterArrByText(filterArr,btnText.text));
};
})
//設置按鈕選中樣式
function setActive(obj){
obj.className = 'btn active';//單擊按鈕更改選中樣式
lastActiveBtn.className = 'btn';//清除原有樣式
lastActiveBtn = obj;//將選中按鈕設置為上一個選中按鈕，便于下一次清除樣式
}
// 通過btnSex篩選
function filterArrBySex(data,sex){
if(sex == 'a'){
return data;
}
return data.filter(function(ele,index){
return ele.sex == sex;
})
}
總結
通過前兩天對數組方法的學習，有了很大的收獲。在本次實例練習中，發現了幾個問題：
- 不知道如何獲取input標簽輸入的值
- 不知道如何將類數組對象轉化為數組（其實也并不清楚為什么獲得的是一個類數組對象）
- 如何獲取DOM元素，怎么得到各屬性的值，怎么更改屬性值（能不能更改屬性值 ），怎么添加屬性以及屬性值？DOM和BOM元素的操作這塊兒比較弱，還需要再學習學習。
