數(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驻子。