JavaScript學習筆記之數(shù)組(一)

數(shù)組基礎篇

一秦忿、數(shù)組概述

1. 數(shù)組的語法

數(shù)組(array)是按次序排列的一組值。每個值的位置都有編號(從0開始)宅静。
var arr=[1,2,3] //arr[0]=1
任何類型的數(shù)據(jù),都可以放入數(shù)組。

 var arr=[
            1,
            'a',
            undefined,
            null,
            true,
            {'name': 'jack','age': 18},
            function(){console.log(fn)}
        ]
arr[5]//對象:{name: "jack", age: 18}
arr[6]//函數(shù):? (){console.log(fn)}

多維數(shù)組

var a = [[1, 2], [3, 4]];
        console.log(a[0][0])//1
        console.log(a[1][1])//4

2. 數(shù)組的特點

數(shù)組是對象瞒滴,typeof運算符會返回數(shù)組的類型是object
數(shù)組的特殊性體現(xiàn)在,它的鍵名是按次序排列的一組整數(shù)(0,1妓忍,2…)虏两。

var arr = ['a','b','c'];
        console.log(typeof(arr))//object
         console.log(Object.keys(arr))// ["0", "1", "2"]

上面代碼中,可以看到數(shù)組成員的鍵名是固定的(默認總是0世剖、1定罢、2…)
JavaScript 語言規(guī)定,對象的鍵名一律為字符串旁瘫,所以祖凫,數(shù)組的鍵名其實也是字符串。之所以可以用數(shù)值讀取酬凳,是因為非字符串的鍵名會被轉為字符串惠况。


3. length屬性

數(shù)組的length屬性,返回數(shù)組的成員數(shù)量粱年。

JavaScript 使用一個32位整數(shù)售滤,保存數(shù)組的元素個數(shù)。這意味著台诗,數(shù)組成員最多只有 4294967295 個(2^32 - 1)個完箩,也就是說length屬性的最大值就是 4294967295。

只要是數(shù)組拉队,就一定有l(wèi)ength屬性弊知。該屬性是一個動態(tài)的值,等于整數(shù)鍵名中的最大整數(shù)加上1粱快。

通過設置length的值改變數(shù)組的長度
將length屬性設為0可以清空數(shù)組秩彤。
如果設置length大于當前數(shù)組元素個數(shù),則數(shù)組的長度會增加到這個值事哭,新增的位置都是空位漫雷,讀取新增的位置都會返回undefined。

length的值只能是正整數(shù)鳍咱,其他值會報錯

值得注意的是降盹,由于數(shù)組本質(zhì)上是一種對象,所以可以為數(shù)組添加屬性和屬性值谤辜,但是這不影響length屬性的值蓄坏。


4. in運算符

檢查某個鍵名是否存在的運算符in,適用于對象丑念,也適用于數(shù)組涡戳。

var arr=['a','b','c']
        console.log(1 in arr)//true 
        console.log(3 in arr)//false

如果數(shù)組的某個位置是空位,in運算符返回false脯倚。

var arr=['a','b','c']
        console.log(1 in arr)//true 
        console.log(3 in arr)//false
        arr[100]=2
        console.log(100 in arr)//true
        console.log(99 in arr)//false
        console.log(101 in arr)//false

5. for…in 循環(huán)和數(shù)組的遍歷
for...in循環(huán)不僅可以遍歷對象渔彰,也可以遍歷數(shù)組,因為數(shù)組也是對象。

var arr=['a','b','c']
        arr.dd='d'
        for(let i in arr){
            console.log(i)//0,1,2,dd
            console.log(arr[i])//a,b,c,d
        }

一般都是用for循環(huán)遍歷數(shù)組


6. 類數(shù)組

如果一個對象的所有鍵名都是正整數(shù)或零胳岂,并且有l(wèi)ength屬性编整,那么這個對象就很像數(shù)組,語法上稱為“類似數(shù)組的對象”乳丰。
類似數(shù)組的對象”并不是數(shù)組,因為它們不具備數(shù)組特有的方法内贮。

“類似數(shù)組的對象”的根本特征产园,就是具有l(wèi)ength屬性。這種length屬性不是動態(tài)值夜郁,不會隨著成員的變化而變化什燕。

將類數(shù)組轉換為數(shù)組的方法

  • var arr = Array.prototype.slice.call(arrayLike);
 var obj={
           0: "a",
           1: "b",
           2: "c",
           3: "d",
           "length": 4
       }
       console.log(obj instanceof Array)//false
       var arr=Array.prototype.slice.call(obj)
       console.log(arr instanceof Array)//true

類數(shù)組也可以通過call()方法可以調(diào)用數(shù)組的方法。

var obj={
           0: "a",
           1: "b",
           2: "c",
           3: "d",
           "length": 4
       }
      Array.prototype.forEach.call(obj,(value,key)=>console.log(key+':'+value))
//       0:a
//       1:b
//       2:c
//       3:d

字符串也是類似數(shù)組的對象竞端,所以也可以用Array.prototype.forEach.call遍歷屎即。

 Array.prototype.forEach.call('string', (str,key)=>console.log(key+':'+str))
        // 0:s
        // 1:t
        // 2:r
        // 3:i
        // 4:n
        // 5:g

call()方法比直接使用數(shù)組原生的forEach要慢,所以最好還是先將類數(shù)組轉為真正的數(shù)組事富,再調(diào)用數(shù)組的forEach方法技俐。


二、數(shù)組對象

1. 聲明數(shù)組的方法

Array是 JavaScript 的原生對象统台,同時也是一個構造函數(shù)雕擂,可以用它生成新的數(shù)組。

var arr =new Array(3);//length:3等同于var arr=Array(3);
不建議使用上面的方法生成新數(shù)組

推薦使用這種方法生成數(shù)組var arr = [1, 2];


2. 數(shù)組的方法

2.1 Array.isArray()
Array.isArray方法返回一個布爾值贱勃,表示參數(shù)是否為數(shù)組井赌。


2.2 valueOf(),toString()
valueOf方法是一個所有對象都擁有的方法贵扰,表示對該對象求值仇穗。不同對象的valueOf方法不盡一致,數(shù)組的valueOf方法返回數(shù)組本身戚绕。

toString方法也是對象的通用方法纹坐,數(shù)組的toString方法返回數(shù)組的字符串形式。


2.3 push()列肢,pop()
push方法用于在數(shù)組的末端添加一個或多個元素恰画,并返回添加新元素后的數(shù)組長度。
pop方法用于刪除數(shù)組的最后一個元素瓷马,并返回該元素拴还。對空數(shù)組使用pop方法,不會報錯欧聘,而是返回undefined片林。


2.4 shift(),unshift()
shift方法用于刪除數(shù)組的第一個元素,并返回該元素费封。
unshift方法用于在數(shù)組的第一個位置添加元素焕妙,并返回添加新元素后的數(shù)組長度。


2.5 join()
join方法以指定參數(shù)作為分隔符弓摘,將所有數(shù)組成員連接為一個字符串返回焚鹊。
通過call方法,這個方法也可以用于字符串或類似數(shù)組的對象韧献。


2.6 concat()
concat方法用于多個數(shù)組的合并末患。它將新數(shù)組的成員,添加到原數(shù)組成員的后部锤窑,然后返回一個新數(shù)組璧针,原數(shù)組不變。
除了數(shù)組作為參數(shù)渊啰,concat也接受其他類型的值作為參數(shù)探橱,添加到目標數(shù)組尾部。


2.7 reverse()
reverse方法用于顛倒排列數(shù)組元素绘证,返回改變后的數(shù)組隧膏。


2.8 slice()
slice方法用于提取目標數(shù)組的一部分,返回一個新數(shù)組迈窟,原數(shù)組不變私植。
arr.slice(start, end);
slice沒有參數(shù),等于返回一個原數(shù)組的拷貝车酣。


2.9 splice()
splice方法用于刪除原數(shù)組的一部分成員曲稼,并可以在刪除的位置添加新的數(shù)組成員,返回值是被刪除的元素湖员。

arr.splice(start, count, addElement1, addElement2, ...);

splice的第一個參數(shù)是刪除的起始位置(從0開始)贫悄,第二個參數(shù)是被刪除的元素個數(shù)。如果后面還有更多的參數(shù)娘摔,則表示這些就是要被插入數(shù)組的新元素窄坦。


2.10 sort()
sort方法對數(shù)組成員進行排序

 var arr = [1,7,3,5,9,6];
        arr.sort(function(a,b){
            return a-b
        })
        console.log(arr)// [1, 3, 5, 6, 7, 9]
var arr = [
            {name:"張三",age:18},
            {name:"王五",age:3},
            {name:"李四",age:9}
        ];
        arr.sort(function(a,b){
            return a.age-b.age
        })
        console.log(arr)
       // [{name:"王五",age:3},{name:"李四",age:9},{name:"張三",age:18}]

2.11 map()
map方法將數(shù)組的所有成員依次傳入?yún)?shù)函數(shù),然后把每一次的執(zhí)行結果組成一個新數(shù)組返回凳寺。

var arr=[1,2,3,4]
    var arr1=arr.map(function(n){
        return n+1
    })
    console.log(arr1)//[2, 3, 4, 5]
    console.log(arr)//[1, 2, 3, 4]

map方法接受一個函數(shù)作為參數(shù)鸭津。該函數(shù)調(diào)用時,map方法向它傳入三個參數(shù):當前成員肠缨、當前位置和數(shù)組本身逆趋。


2.12 forEach()
forEach方法與map方法很相似,也是對數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù)晒奕。但是闻书,forEach方法不返回值名斟,只用來操作數(shù)據(jù)。這就是說魄眉,如果數(shù)組遍歷的目的是為了得到返回值砰盐,那么使用map方法,否則使用forEach方法坑律。

forEach的用法與map方法一致岩梳,參數(shù)是一個函數(shù),該函數(shù)同樣接受三個參數(shù):當前值脾歇、當前位置蒋腮、整個數(shù)組。

var arr=[1,2,3,4]
    arr.forEach(function(value,key){
        console.log(key+':'+value)
    })

2.13 filter()
filter方法用于過濾數(shù)組成員藕各,滿足條件的成員組成一個新數(shù)組返回。
它的參數(shù)是一個函數(shù)焦除,所有數(shù)組成員依次執(zhí)行該函數(shù)激况,返回結果為true的成員組成一個新數(shù)組返回。該方法不會改變原數(shù)組膘魄。


2.14 some()乌逐,every()
這兩個方法,返回一個布爾值创葡,表示判斷數(shù)組成員是否符合某種條件浙踢。

它們接受一個函數(shù)作為參數(shù),所有數(shù)組成員依次執(zhí)行該函數(shù)灿渴。該函數(shù)接受三個參數(shù):當前成員洛波、當前位置和整個數(shù)組,然后返回一個布爾值骚露。

some方法是只要一個成員的返回值是true蹬挤,則整個some方法的返回值就是true,否則返回false棘幸。
every方法是所有成員的返回值都是true焰扳,整個every方法才返回true,否則返回false误续。


2.15 reduce()吨悍,reduceRight()
reduce方法和reduceRight方法依次處理數(shù)組的每個成員,最終累計為一個值蹋嵌。它們的差別是育瓜,reduce是從左到右處理(從第一個成員到最后一個成員),reduceRight則是從右到左(從最后一個成員到第一個成員)欣尼,其他完全一樣爆雹。

var arr=[1,2,3,4]
    arr.reduce(function(a,b){
        console.log(a+b)//3,6
        return a+b//15
    })
//15

2.16 indexOf()停蕉,lastIndexOf()
indexOf方法返回給定元素在數(shù)組中第一次出現(xiàn)的位置,如果沒有出現(xiàn)則返回-1钙态。
indexOf方法還可以接受第二個參數(shù)慧起,表示搜索的開始位置。

lastIndexOf方法返回給定元素在數(shù)組中最后一次出現(xiàn)的位置册倒,如果沒有出現(xiàn)則返回-1蚓挤。
這兩個方法不能用來搜索NaN的位置,即它們無法確定數(shù)組成員是否包含NaN驻子。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末灿意,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子崇呵,更是在濱河造成了極大的恐慌缤剧,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件域慷,死亡現(xiàn)場離奇詭異荒辕,居然都是意外死亡,警方通過查閱死者的電腦和手機犹褒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評論 3 399
  • 文/潘曉璐 我一進店門抵窒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人叠骑,你說我怎么就攤上這事李皇。” “怎么了宙枷?”我有些...
    開封第一講書人閱讀 168,083評論 0 360
  • 文/不壞的土叔 我叫張陵掉房,是天一觀的道長。 經(jīng)常有香客問我朦拖,道長圃阳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,640評論 1 296
  • 正文 為了忘掉前任璧帝,我火速辦了婚禮捍岳,結果婚禮上,老公的妹妹穿的比我還像新娘睬隶。我一直安慰自己锣夹,他們只是感情好,可當我...
    茶點故事閱讀 68,640評論 6 397
  • 文/花漫 我一把揭開白布苏潜。 她就那樣靜靜地躺著银萍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪恤左。 梳的紋絲不亂的頭發(fā)上贴唇,一...
    開封第一講書人閱讀 52,262評論 1 308
  • 那天搀绣,我揣著相機與錄音,去河邊找鬼戳气。 笑死链患,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的瓶您。 我是一名探鬼主播麻捻,決...
    沈念sama閱讀 40,833評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼呀袱!你這毒婦竟也來了贸毕?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,736評論 0 276
  • 序言:老撾萬榮一對情侶失蹤夜赵,失蹤者是張志新(化名)和其女友劉穎明棍,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體寇僧,經(jīng)...
    沈念sama閱讀 46,280評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡击蹲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,369評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了婉宰。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,503評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡推穷,死狀恐怖心包,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情馒铃,我是刑警寧澤蟹腾,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站区宇,受9級特大地震影響娃殖,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜议谷,卻給世界環(huán)境...
    茶點故事閱讀 41,870評論 3 333
  • 文/蒙蒙 一炉爆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧卧晓,春花似錦芬首、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至胜宇,卻和暖如春耀怜,著一層夾襖步出監(jiān)牢的瞬間恢着,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評論 1 272
  • 我被黑心中介騙來泰國打工财破, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留掰派,地道東北人。 一個月前我還...
    沈念sama閱讀 48,909評論 3 376
  • 正文 我出身青樓狈究,卻偏偏與公主長得像碗淌,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子抖锥,可洞房花燭夜當晚...
    茶點故事閱讀 45,512評論 2 359

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