javascript

javascript對(duì)于數(shù)組對(duì)象有很多函數(shù)，熟練的運(yùn)用這些函數(shù)，對(duì)于我們?nèi)粘５墓ぷ饔泻艽蟮膸椭?/p>

下面簡(jiǎn)單的分享一下10個(gè)簡(jiǎn)單的js對(duì)于處理數(shù)組的方法，希望能拋磚引玉。

1，數(shù)組去重復(fù)，這個(gè)的實(shí)現(xiàn)原理和過(guò)程就是遍歷原來(lái)的數(shù)組arrOld，判斷arr有沒(méi)有當(dāng)前遍歷到的數(shù)組元素，沒(méi)有加添加進(jìn)去

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，數(shù)組最大值最小值，這一塊的封裝，主要是針對(duì)數(shù)字類型的數(shù)組，是通過(guò)js的Math 對(duì)象來(lái)實(shí)現(xiàn)的，我們還可以通過(guò)遍歷數(shù)組，比較每一個(gè)值的大小來(lái)封裝

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，數(shù)組求和，平均值，這一塊的封裝，主要也是是針對(duì)數(shù)字類型的數(shù)組。其中對(duì)于平均值小數(shù)點(diǎn)可能會(huì)有很多位，這里沒(méi)有做處理。如果要處理，我們可以用js的向下取整Math.floor或者向上取整Math.ceil等函數(shù)來(lái)實(shí)現(xiàn)

//求和
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，從數(shù)組中隨機(jī)獲取元素

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

5，返回對(duì)應(yīng)元素在數(shù)組中的下標(biāo)

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，返回?cái)?shù)組（字符串）一個(gè)元素出現(xiàn)的次數(shù)

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下標(biāo)的數(shù)組，即返回?cái)?shù)組下標(biāo)arr[n1]到數(shù)組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，篩選數(shù)組，這里所做的就只是刪除相應(yīng)的數(shù)組，大家可以按需要擴(kuò)展

/* arr:要進(jìn)行操作的數(shù)組
 val:要?jiǎng)h除的值
 type: 如果有值，則刪除數(shù)組中所有含有val值的元素，如果沒(méi)值或者不指定，則刪除必須完全匹配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，根據(jù)id的值獲取相應(yīng)的item值，并存入相應(yīng)的目標(biāo)數(shù)組，如果數(shù)組里面的對(duì)象里面還有children的item的時(shí)候，我們可以使用遞歸

function findItemByOrgModuleId(arr, id, resArr) {
 arr.forEach(function(item){
 if (item.id === id) {
 resArr.push(item);
 }
 });
 return resArr;
}
?
var resArr = []; // 存放結(jié)果的目標(biāo)數(shù)組
var arr = [
 {id:1,name:'aaa'},
 {id:2,name:'bbb'},
 {id:3,name:'ccc'},
 {id:4,name:'ddd'},
 {id:4,name:'555'},
]; // 要操作的數(shù)組
findItemByOrgModuleId(arr,4,resArr) // [{id:4,name:'ddd'},{id:4,name:'555'}]

10，根據(jù)id來(lái)刪除數(shù)組中相應(yīng)id的對(duì)象，這里默認(rèn)所有的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'},
]; // 要操作的數(shù)組
?
deleteById(arr,5) 
// [{id:1,name:'aaa'},{id:2,name:'bbb'},{id:3,name:'ccc'},{id:4,name:'ddd'}];

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

// 如果arr對(duì)象如下所示
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)

結(jié)果返回了將id等于6的值刪除之后的新的數(shù)組。如下圖所示

image

附加：下面是js的數(shù)組常用的常用api，具體的使用方法大家可以參考相應(yīng)的w3cschool相應(yīng)的api的demo。

• concat()：連接兩個(gè)或更多的數(shù)組，并返回結(jié)果

• join()：把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔

• pop()：刪除并返回?cái)?shù)組的最后一個(gè)元素

• push()：向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度

• reverse()：顛倒數(shù)組中元素的順序

• shift()：刪除并返回?cái)?shù)組的第一個(gè)元素

• slice()：從某個(gè)已有的數(shù)組返回選定的元素

• sort()：對(duì)數(shù)組的元素進(jìn)行排序

• splice()：刪除元素，并向數(shù)組添加新元素

• toString()：把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果

• unshift()：向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度

• valueOf()：返回?cái)?shù)組對(duì)象的原始值

結(jié)語(yǔ)：此篇文章是受了 編寫(xiě)自己的代碼庫(kù)（javascript常用實(shí)例的實(shí)現(xiàn)與封裝 作者的啟發(fā)。

文章中加了自己的一些測(cè)試數(shù)據(jù)和自己工作用到的幾個(gè)庫(kù)，希望能給大家?guī)?lái)一點(diǎn)啟發(fā)。

來(lái)自一個(gè)奔跑在前端路上的前端小白。