js數組集錦

設計數組的函數方法

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
*/
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,412評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,514評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,373評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,975評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,743評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,199評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,262評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,414評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,951評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,780評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,527評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,218評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,649評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,889評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,673評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容

  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,261評論 0 4
  • 由于最近都在freecodecamp上刷代碼,運用了很多JavaScript數組的方法,因此做了一份關于JavaS...
    2bc5f46e925b閱讀 1,992評論 0 16
  • 有人說過,很多彎路到最后都成了直路,所有的坑到最后也都成了坦途;所謂的直路和坦途并不是擺在眼前的,都是不斷的的...
    老衲法號一眉道人閱讀 1,349評論 0 4
  • 數組是值的有序集合。每個值叫做一個元素,而每個元素在數組中有一個位置,以數字表示,稱為索引。 JavaScript...
    劼哥stone閱讀 1,142評論 6 20
  • 本章內容 使用對象 創建并操作數組 理解基本的 JavaScript 類型 使用基本類型和基本包裝類型 引用類型的...
    悶油瓶小張閱讀 693評論 0 0