當前位置:
首頁 > 知識 > javascript數組集錦

javascript數組集錦


設計數組的函數方法

toString, toLocaleString, valueOf,

concat, splice, slice

indexOf,lastIndexOf,

push, pop, shift, unshift,

sort, reverse

map, reduce, reduceRight, filter, every, some, forEach


創建數組

  • 數組字面量創建:var arr = [val1, val2, val3];
  • 數組構造函數:

    var arr = new Array; var arr = new Array(1, 2, 3, 5);//返回[1, 2, 3, 4, 5] var arr = new Array(2);// 返回 [ , , ] 一個參數時是數組的長度length

清空數組

清空數組有兩種方法

  • arr.length = 0;
  • arr = ;

兩者區別:js 中數組是對象,所以arr是一個指向數組值的鏈接,arr.length = 0時,把數組所有值清除,執行速度慢;arr = 時把arr的鏈接指向一個新的空數組,原數組值存在於內存中如果未被其它變數引用時則被回收。

var arr1 = [1, 2, 3];
var arr2 = arr1;
arr2 = ;
console.log(arr1);// [1, 2, 3] arr1 還在
arr2 = arr1;
arr2.length = 0;
console.log(arr1); // arr1同時也被清空了

轉換方法

arr.toString 返回由數組中的每個值的字元串形式拼接(以逗號分隔)的字元串

arr.toLocaleString 和toString作用相同,不同之處在於對數組的每一項調用toString方法

arr.valueOf 和toString類似,不過返回數組最適合的原始類型

arr.join toString只能使用逗號分隔字元串,而join可以指定分隔符

var arr1 = ["h", ["e", "g"], "n"];
var arr2 = [1, 2, 3, 4];
arr1.toString;//"h,e,g,n"
arr1.toLocaleString;// "h,e,g,n"
arr2.valueOf;//[1, 2, 3, 4]
arr2.toString;//"1,2,3,4"
arr1.valueOf;//["h", Array(2), "n"]
arr2.join("-");//"1-2-3-4" 指定 - 分隔符

堆棧、隊列方法

push(item) 在數組末尾壓入數組項,可以是多項 ,返回修改後的數組長度

pop 彈出並返回數組最後一項

shift 彈出並返回數組第一項

unshift 在數組前端壓入數組項並返回數組長度

var arr = [4, 5, 6];
arr.push(7, 8);
arr; //[4, 5, 6, 7, 8]
arr.push([9, 10]);
arr; //[4, 5, 6, 7, 8, [9, 10]]

arr.pop;
arr; //[4, 5, 6, 7, 8]
arr.shift ;// arr [5, 6 ,7, 8]
arr,unshift(1, 2, 3, 4); //arr [1, 2, 3, 4, 5, 6, 7, 8]

重排序 sort和reverse

arr.reverse 反轉數組,第一項變最後一項,最後一項變第一項,依次類推 sort 對數組重排序,默認從小到大排序(按字元比較而非數值 如 2 > 100) ,可以傳入排序函數

var arr = [1, 2, 3, 100];
arr.reverse; //[100, 3, 2, 1]
arr.sort;//[1, 100, 2, 3]
arr.sort(compare); //[1, 2, 3, 100]
function compare(value1, currentValue){
console.log(value1, currentValue);
return value1 - currentValue;
}
/*
排序函數列印出來的,可以看出是插入排序
1 100
100 2
1 2
100 3
2 3
*/

操作方法與位置方法 concat,slice, splice, indexOf ,lastIndexOf

arr.concat 基於當前數組的所有項創建一個新數組,傳入的項被添加到數組末尾構成新數組

arr.slice(start, end ) 基於當前數組中的一項或多項創建新數組,start為開始位置,end為結束位置,end沒有的話默認為到數組結束

arr.splice(start, num, arr1, arr2......) 從start位置開始刪除num項數組,然後在start位置插入arr1 ,arr2 ,,,,,,,,,。num為0時沒有刪除項, arr1, arr2 ,,,,,可以沒有

arr.indexOf(value, start) 搜索value值在數組中的索引值 ,start為開始項默認為0,未找到返回 -1

arr.lastIndexOf(value, start) 從數組的末尾開始查找(倒序查找),沒找到返回 -1

var arr1 = [1, 2];
var arr2 = arr1.concat(3, [4, 5]);//[ 1, 2, 3, 4, 5 ]
arr2.slice
//[ 1, 2, 3, 4, 5 ]
arr2.slice(1)
//[ 2, 3, 4, 5 ]
arr2.slice(1,4)
//[ 2, 3, 4 ]

arr2
//[ 1, 2, 3, 4, 5 ]

//以下為node環境下, > 為js表達式,回車後是輸出
> arr2.slice(1)
[ 2, 3, 4, 5 ]
> arr2.slice(1,2)
[ 2 ]
> arr2.slice(1,4)
[ 2, 3, 4 ]
> arr2
[ 1, 2, 3, 4, 5 ]
> arr2.splice(0,1)
[ 1 ]
> arr2
[ 2, 3, 4, 5 ]
> arr2.splice(0,1,1)
[ 2 ]
> arr2
[ 1, 3, 4, 5 ]
> arr2.splice(1,0,2)

> arr2
[ 1, 2, 3, 4, 5 ]
> arr2.splice(5,0,6, 7, 8)

> arr2
[ 1, 2, 3, 4, 5, 6, 7, 8 ]
> arr2.indexOf(8)
7
> arr2.lastIndexOf(8)
7
// 當查找的值在數組中有多個時indexOf 和lastIndexOf返回不同

迭代方法 map, filter, every, some, forEach, reduce, reduceRight

arr.map 對數組中的每一項運行給定的函數,返回每次調用的結果組成的數組。

arr.filter 對數組中的每一項運行給定的函數,返回由給定函數返回ture的項組成的新數組。

arr.every對數組中的每一項運行給定的函數,如果該函數對每一項都返回true則返回true

arr.some對數組中的每一項運行給定的函數,如果該函數對任一項返回true則返回true

arr.forEach對數組中的每一項運行給定的函數,沒有返回值

以上5個方法傳入的函數有三個參數 分別是item、index、arr,分別是當前項,當前項的索引,數組

arr.reduce,arr.reduceRight 迭代所有項,然後構建一個最終返回值,只是迭代的順序不同,reduce從左到右,reduceRight從右到左。傳入的函數的參數有prev、cur、index、arr,分別是前一項迭代的結果,當前項,當前項的索引,數組arr

var arr = [1, 2, 3, 4, 5];

arr.map(function(item, index, arr){
return item * 2;
}); //數組的每項都乘2 ,返回 [2, 4, 6, 8, 10]

arr.filter(function(item, index, arr){
return item % 2 == 0;
}); // 返回偶數項 [2, 4]

arr.every(function(item, index, arr){
return item > 0;
}); // 數組所有項都大於0 ,返回 true

arr.some(function(item, index, arr){
return item < 2; });// 數組裡有小於2的項? 返回true arr.forEach(function( item, index, arr){ console.log(item, index, arr); });// 沒有返回項 /* forEach列印出來的 1 0 [ 1, 2, 3, 4, 5 ] 2 1 [ 1, 2, 3, 4, 5 ] 3 2 [ 1, 2, 3, 4, 5 ] 4 3 [ 1, 2, 3, 4, 5 ] 5 4 [ 1, 2, 3, 4, 5 ] */ arr.reduce(function(prev, cur, index, array){ console.log(prev,cur); return prev * cur; });// 返回數組所有項相乘的結果120 /* 列印結果 1 2 2 3 6 4 24 5 */ arr.reduceRight(function(prev, cur, index, array){ console.log(prev,cur); return prev * cur; });// 返回數組所有項相乘的結果120 /* 列印結果 5 4 20 3 60 2 120 1 */

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 達人科技 的精彩文章:

14:40-15:00博客站點web伺服器雪崩似的CPU 100%
Elasticsearch學習隨筆(一)——原理理解與5.0核心插件部署過程
net 中web.config一個配置文件解決方法 (其他配置文件引入方式)
MVC通過遞歸+部分視圖實現評論
JDBC02 利用JDBC連接資料庫

TAG:達人科技 |