從零開始構建自己的js庫工具庫（二）——10個js處理陣列的方法

javascript對於陣列物件有很多函式，熟練的運用這些函式，對於我們日常的工作有很大的幫助。

下面簡單的分享一下10個簡單的js對於處理陣列的方法，希望能拋磚引玉。

1，陣列去重複，這個的實現原理和過程就是遍歷原來的陣列arrOld，判斷arr有沒有當前遍歷到的陣列元素，沒有加新增進去

function removeReapt(arrOld){
 var arr=[];
 for(var i=0,len=arrOld.length;i<len;i++){
 if(arr.indexOf(arrOld[i])==-1){
 arr.push(arrOld[i]);
 }
 }
 return arr;
}
​
removeReapt([1,2,3,6,5,2,2,5,6,2,1]) // [1, 2, 3, 6, 5]

2，陣列最大值最小值，這一塊的封裝，主要是針對數字型別的陣列，是通過js的Math 物件來實現的，我們還可以通過遍歷陣列，比較每一個值的大小來封裝

function maxArr(arr){
 return Math.max.apply(null,arr);
}
function minArr(arr){
 return Math.min.apply(null,arr);
}
​
maxArr([1,4,65,843,2,1,4]) // 843
minArr([1,4,65,843,2,10,4]) // 1

3，陣列求和，平均值，這一塊的封裝，主要也是是針對數字型別的陣列。其中對於平均值小數點可能會有很多位，這裡沒有做處理。如果要處理，我們可以用js的向下取整Math.floor或者向上取整Math.ceil等函式來實現

//求和
function sumArr(arr){
 var sumText=0;
 for(var i=0,len=arr.length;i<len;i++){
 sumText+=arr[i];
 }
 return sumText
}
// 平均值
​
function covArr(arr){
 var sumText=sumArr(arr);
 var covText=sumText/arr.length;
 return covText
}
​
sumArr([1,4,65,843,2,1,4]) // 920
covArr([1,4,65,843,2,1,4]) // 131.42857142857142

4，從陣列中隨機獲取元素

function randomOne(arr) {
 return arr[Math.floor(Math.random() * arr.length)];
}
​
randomOne([1,2,3,6,8,5,4,2,6]) // 1

5，返回對應元素在陣列中的下標

function isHasElementOne(arr,value){ 
 for(var i = 0,vlen = arr.length; i < vlen; i++){ 
 if(arr[i] == value){ 
 return i; 
 } 
 } 
 return -1; 
}
isHasElementOne([1,2,3,4,5],3) // 2

6，返回陣列（字串）一個元素出現的次數

function getEleCount (obj, ele) {
 var num = 0;
 for (var i = 0, len = obj.length; i < len; i++) {
 if (ele == obj[i]) {
 num++;
 }
 }
 return num;
}
​
getEleCount('asd56+asdasdwqe','a') // 3
getEleCount([1,2,3,4,5,66,77,22,55,22],22) // 2

7，得到n1-n2下標的陣列，即返回陣列下標arr[n1]到陣列arr[n2]的值

function getArrayNum(arr,n1,n2){
 var arr1=[],len=n2||arr.length-1;
 for(var i=n1;i<=len;i++){
 arr1.push(arr[i])
 }
 return arr1;
}
​
getArrayNum([0,1,2,3,4,5,6,7,8,9],5,9) // [5, 6, 7, 8, 9]

8，篩選陣列，這裡所做的就只是刪除相應的陣列，大家可以按需要擴充套件

/* arr:要進行操作的陣列
 val:要刪除的值
 type: 如果有值，則刪除陣列中所有含有val值的元素，如果沒值或者不指定，則刪除必須完全匹配val的值
*/
function removeArrayForValue(arr,val,type){
 return arr.filter(function (item) {
 return type? item.indexOf(val) === -1 : item !== val
 })
}
​
removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')  // ["aaa"]
removeArrayForValue(['test','test1','test2','test','aaa'],'test') 
// ["test1", "test2", "aaa"]

9，根據id的值獲取相應的item值，並存入相應的目標陣列，如果陣列裡面的物件裡面還有children的item的時候，我們可以使用遞迴

function findItemByOrgModuleId(arr, id, resArr) {
 arr.forEach(function(item){
 if (item.id === id) {
 resArr.push(item);
 }
 });
 return resArr;
}
​
var resArr = []; // 存放結果的目標陣列
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'ddd'},
 {id:4,name:'555'},
]; // 要操作的陣列
findItemByOrgModuleId(arr,4,resArr) // [{id:4,name:'ddd'},{id:4,name:'555'}]

10，根據id來刪除陣列中相應id的物件，這裡預設所有的id都是唯一的

function deleteById(arr, id) {
 arr.forEach(function(item, i){
 if (item.id === id) {
 arr.splice(i, 1);
 }
 });
 return arr;
}
​
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'ddd'},
 {id:5,name:'555'},
]; // 要操作的陣列
​
deleteById(arr,5) 
// [{id:1,name:'aaa'},{id:2,name:'bbb'},{id:3,name:'ccc'},{id:4,name:'ddd'}];

如果arr中的item值有子元素話，我們需要遍歷，如下

// 如果arr物件如下所示
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'555'},
 {id:5,name:'555',children: [
 {id: 6,name:'666'},
 {id: 7,name:'777'},
 {id: 8,name:'888'},
 ]},
]
​
function deleteById(arr, id) {
 arr.forEach(function(item, i){
 if (item.id === id) {
 arr.splice(i, 1);
 }
 if (item.children && item.children.length) {
 deleteById(item.children, id);
 }
 });
​
 return arr;
}
​
deleteById(arr,6)

結果返回了將id等於6的值刪除之後的新的陣列。如下圖所示

附加：下面是js的陣列常用的常用api，具體的使用方法大家可以參考相應的w3cschool相應的api的demo。

• concat()：連線兩個或更多的陣列，並返回結果

• join()：把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔

• pop()：刪除並返回陣列的最後一個元素

• push()：向陣列的末尾新增一個或更多元素，並返回新的長度

• reverse()：顛倒陣列中元素的順序

• shift()：刪除並返回陣列的第一個元素

• slice()：從某個已有的陣列返回選定的元素

• sort()：對陣列的元素進行排序

• splice()：刪除元素，並向陣列新增新元素

• toString()：把陣列轉換為字串，並返回結果

• unshift()：向陣列的開頭新增一個或更多元素，並返回新的長度

• valueOf()：返回陣列物件的原始值

結語：此篇文章是受了 編寫自己的程式碼庫（javascript常用例項的實現與封裝 作者的啟發。

文章中加了自己的一些測試資料和自己工作用到的幾個庫，希望能給大家帶來一點啟發。

來自一個奔跑在前端路上的前端小白。