js數(shù)組初探

基本概念

參照阮一峰老師的說(shuō)法

數(shù)組是按次序排列的一組值顾瞻。每個(gè)值的位置都有編號(hào)(從0開(kāi)始)膊存,整個(gè)數(shù)組用方括號(hào)表示判哥。

js中的數(shù)組

js中的數(shù)組其實(shí)并不是標(biāo)準(zhǔn)意義上的數(shù)組遥倦,其實(shí)是一種特殊的hash表谤绳,原型鏈中有Array.prototype。由于js中的數(shù)組數(shù)據(jù)在內(nèi)存中并不是連續(xù)的袒哥,所以很容易對(duì)數(shù)組進(jìn)行刪除缩筛,新增,修改等操作堡称。

//下面這種寫(xiě)法瞎抛,等同于于一個(gè)js數(shù)組
var arr = {
    '0':1,
    '1':2,
    '2':3,
    'length':3
}
arr.__proto__ = Array.prototype;

數(shù)組的聲明

  1. var arr = Array(3) 聲明一個(gè)數(shù)組長(zhǎng)度為3的數(shù)組
  2. var arr = Array(1,2,3) 聲明一個(gè)值為1,2,3的數(shù)組,即[1,2,3]
  3. var arr = new Array(3)聲明一個(gè)數(shù)組長(zhǎng)度為3的數(shù)組
  4. var arr = new Array(1,2,3)聲明一個(gè)值為1,2,3的數(shù)組却紧,即[1,2,3]
  5. var arr = [1,2,3]聲明一個(gè)數(shù)組[1,2,3]

通過(guò)以上代碼了解到桐臊,加不加關(guān)鍵字new對(duì)聲明數(shù)組無(wú)影響钞艇。
由于Array方法存在很強(qiáng)的不一致性,一般不用這種方式豪硅,常規(guī)的方式是最后一種聲明方式。

常用的api

Array.prototype提供了許多api挺物,其中常見(jiàn)的有:

  • Array.prototype.concat()連接兩個(gè)數(shù)組
  • Array.prototype.slice()獲取子數(shù)組
  • Array.prototype.sort()對(duì)數(shù)組排序(注意:此方法會(huì)改變?cè)瓟?shù)組懒浮,因?yàn)閟ort內(nèi)部使用的是快排,屬于原地排序方法)
  • Array.prototype.push()在數(shù)組尾部添加數(shù)據(jù)
  • Array.prototype.pop()彈出數(shù)組尾部數(shù)據(jù)
  • Array.prototype.shift()彈出數(shù)組第一個(gè)數(shù)據(jù)
  • Array.prototype.unshift()在數(shù)組開(kāi)頭位置添加一個(gè)數(shù)據(jù)
  • Array.prototype.splice()刪除數(shù)組中的數(shù)據(jù)
  • Array.prototype.join()連接數(shù)組中的所有數(shù)據(jù)识藤,并且放回組成的字符串
  • Array.prototype.indexOf()返回與值匹配的數(shù)組的下標(biāo)砚著,若沒(méi)有返回-1
  • Array.prototype.forEach()遍歷數(shù)組,無(wú)返回值
  • Array.prototype.map()遍歷數(shù)組痴昧,有返回值
  • Array.prototype.filter()過(guò)濾數(shù)組元素
  • Array.prototype.reduce()對(duì)數(shù)組中的每個(gè)元素應(yīng)用一個(gè)函數(shù)稽穆,將其減少為單個(gè)值

以下重點(diǎn)介紹一下sort,forEach,map,filter,reduce,join

Array.prototype.sort() 排序

sort方法接收一個(gè)函數(shù)參數(shù),函數(shù)接兩個(gè)參數(shù)赶撰,代表當(dāng)前值與下一個(gè)值舌镶,若返回一個(gè)正數(shù),交換兩個(gè)數(shù)的位置豪娜,否則不變餐胀。示例:

var arr = [3,2,1,4,5]
arr.sort(function(a,b){ //a當(dāng)前值,b下一個(gè)值
  return a-b;
})  // [1,2,3,4,5]

Array.prototype.forEach 遍歷數(shù)組

forEach方法接收一個(gè)函數(shù)為參數(shù)瘤载,函數(shù)接收三個(gè)參數(shù)(value,index,arr),一般只用到前面兩個(gè)參數(shù)否灾,無(wú)返回值。示例:

var arr = [3,2,1,4,5]
var res = arr.forEach(function(value,index){
  console.log(value,index);
  return value*value;
})
//3 0
//2 1
//3 2
//4 3
//5 4
console.log(res) //undefined

Array.prototype.map 遍歷數(shù)組鸣奔,返回每次返回值所組成的數(shù)組

map方法與forEach方法基本一致墨技,只是有一個(gè)返回值的差別。示例:

var arr = [3,2,1,4,5]
var res = arr.map(function(value,index){
  console.log(value,index);
  return value*value;
})
//3 0
//2 1
//3 2
//4 3
//5 4
console.log(res) //[9, 4, 1, 16, 25]

Array.prototype.filter 過(guò)濾器

filter方法用于過(guò)濾數(shù)據(jù)挎狸,接收一個(gè)函數(shù)參數(shù)扣汪,函數(shù)接收三個(gè)參數(shù)(value,index,array),若返回值為true伟叛,把value添加到返回?cái)?shù)組中私痹。示例:

var arr = [3,2,1,4,5]
var res = arr.filter(function(value){
  return value%2===0;
})
console.log(res) //[2,4]

Array.prototype.reduce 縮減,壓縮

reduce方法對(duì)數(shù)組中的每個(gè)元素(從左到右)應(yīng)用一個(gè)函數(shù)统刮,將其減少為單個(gè)值紊遵。接收兩個(gè)參數(shù),第一個(gè)參數(shù)是函數(shù)侥蒙,第二個(gè)是起始值(可省略)暗膜。函數(shù)可接受四個(gè)參數(shù),一般情況下只用前面兩個(gè)(累計(jì)值鞭衩,當(dāng)前值)学搜,若省略第二個(gè)參數(shù)娃善,則函數(shù)累計(jì)值從下標(biāo)0開(kāi)始。示例:

//reduce實(shí)現(xiàn)累加
var arr = [3,2,1,4,5]
var res = arr.reduce(function(a,b){
  return a+b;
}瑞佩,0)
console.log(res) //15
//求最大值
var max = arr.reduce(function(a,b){
  return a>b?a:b;  
})
console.log(max) //5

Array.prototype.join 連接數(shù)據(jù)聚磺,返回字符串

join方法可以將數(shù)組轉(zhuǎn)換成字符串,中間用給定的連接符炬丸,默認(rèn)連接符是,瘫寝。示例:

var arr = [3,2,1,4,5]
console.log(arr.join('-'))  //3-2-1-4-5

Array.prototype.slice 獲取子數(shù)組

slice方法接收兩個(gè)參數(shù)(起始位置,結(jié)束位置的后一個(gè)位置)稠炬,默認(rèn)從0開(kāi)始焕阿。返回子數(shù)組。示例:

var arr = [3,2,1,4,5]
var sub1 = arr.slice();  //[3,2,1,4,5]
var sub2 = arr.slice(1,2); //[2]

偽數(shù)組

關(guān)于js中的偽數(shù)組首启,常見(jiàn)的有NodeList類(lèi)型和arguments暮屡。所謂的偽數(shù)組就是可以通過(guò)下標(biāo)取值和獲取length的值,但是并不可以使用數(shù)組中的api毅桃,即原型鏈中沒(méi)有Array.prototype褒纲。一般情況,為了使用數(shù)組的的api需要把偽數(shù)組轉(zhuǎn)為數(shù)組钥飞,一般使用slice將偽數(shù)組轉(zhuǎn)為數(shù)組外厂。例如:Array.prototype.slice.call(arguments)

總結(jié)

本文簡(jiǎn)單介紹了數(shù)組的常見(jiàn)api,并沒(méi)有很詳細(xì)的列舉所有的api。也當(dāng)做學(xué)習(xí)筆記來(lái)使用代承,僅供學(xué)習(xí)與交流汁蝶。轉(zhuǎn)載請(qǐng)注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末论悴,一起剝皮案震驚了整個(gè)濱河市掖棉,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌膀估,老刑警劉巖幔亥,帶你破解...
    沈念sama閱讀 217,406評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異察纯,居然都是意外死亡帕棉,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門(mén)饼记,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)香伴,“玉大人,你說(shuō)我怎么就攤上這事具则〖锤伲” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,711評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵博肋,是天一觀的道長(zhǎng)低斋。 經(jīng)常有香客問(wèn)我蜂厅,道長(zhǎng),這世上最難降的妖魔是什么膊畴? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,380評(píng)論 1 293
  • 正文 為了忘掉前任掘猿,我火速辦了婚禮,結(jié)果婚禮上唇跨,老公的妹妹穿的比我還像新娘术奖。我一直安慰自己,他們只是感情好轻绞,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,432評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著佣耐,像睡著了一般政勃。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上兼砖,一...
    開(kāi)封第一講書(shū)人閱讀 51,301評(píng)論 1 301
  • 那天奸远,我揣著相機(jī)與錄音,去河邊找鬼讽挟。 笑死懒叛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的耽梅。 我是一名探鬼主播薛窥,決...
    沈念sama閱讀 40,145評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼眼姐!你這毒婦竟也來(lái)了诅迷?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,008評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤众旗,失蹤者是張志新(化名)和其女友劉穎罢杉,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體贡歧,經(jīng)...
    沈念sama閱讀 45,443評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡滩租,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,649評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了利朵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片律想。...
    茶點(diǎn)故事閱讀 39,795評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖绍弟,靈堂內(nèi)的尸體忽然破棺而出蜘欲,到底是詐尸還是另有隱情,我是刑警寧澤晌柬,帶...
    沈念sama閱讀 35,501評(píng)論 5 345
  • 正文 年R本政府宣布姥份,位于F島的核電站郭脂,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏澈歉。R本人自食惡果不足惜展鸡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,119評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望埃难。 院中可真熱鬧莹弊,春花似錦、人聲如沸涡尘。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,731評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)考抄。三九已至细疚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間川梅,已是汗流浹背疯兼。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,865評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贫途,地道東北人吧彪。 一個(gè)月前我還...
    沈念sama閱讀 47,899評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像丢早,于是被迫代替她去往敵國(guó)和親姨裸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,724評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 第2章 基本語(yǔ)法 2.1 概述 基本句法和變量 語(yǔ)句 JavaScript程序的執(zhí)行單位為行(line)怨酝,也就是一...
    悟名先生閱讀 4,148評(píng)論 0 13
  • Javascript有很多數(shù)組的方法啦扬,有的人有W3C的API,還可以去MDN上去找凫碌,但是我覺(jué)得API上說(shuō)的不全扑毡,M...
    頑皮的雪狐七七閱讀 4,083評(píng)論 0 6
  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,233評(píng)論 0 4
  • ??引用類(lèi)型的值(對(duì)象)是引用類(lèi)型的一個(gè)實(shí)例瞄摊。 ??在 ECMAscript 中,引用類(lèi)型是一種數(shù)據(jù)結(jié)構(gòu)苦掘,用于將數(shù)...
    霜天曉閱讀 1,054評(píng)論 0 1
  • 男閨蜜打電話說(shuō)换帜,我在你家樓下了,你干嘛了鹤啡,我說(shuō)我在別人家里吃飯了惯驼,他淺淺的說(shuō),噢,那你忙你的吧祟牲。 我聽(tīng)得出他心情不...
    MrR的兔小姐閱讀 195評(píng)論 0 1