在程序語(yǔ)言中數(shù)組的重要性不言而喻,JavaScript中數(shù)組也是最常使用的對(duì)象之一,數(shù)組是值的有序集合穷遂,由于弱類型的原因,JavaScript中數(shù)組十分靈活娱据、強(qiáng)大塞颁,不像是Java等強(qiáng)類型高級(jí)語(yǔ)言數(shù)組只能存放同一類型或其子類型元素,JavaScript在同一個(gè)數(shù)組中可以存放多種類型的元素吸耿,而且長(zhǎng)度也是可以動(dòng)態(tài)調(diào)整的祠锣,可以隨著數(shù)據(jù)增加或減少自動(dòng)對(duì)數(shù)組長(zhǎng)度做更改。
創(chuàng)建數(shù)組
在JavaScript多種方式創(chuàng)建數(shù)組
構(gòu)造函數(shù)
Array作為構(gòu)造函數(shù)咽安,行為很不一致伴网。因此,不建議使用它生成新數(shù)組
// 無(wú)參數(shù)時(shí)妆棒,返回一個(gè)空數(shù)組
new Array() // []
// 單個(gè)正整數(shù)參數(shù)澡腾,表示返回的新數(shù)組的長(zhǎng)度
new Array(1) // [ ,]
new Array(2) // [ , ,]
// 非正整數(shù)的數(shù)值作為參數(shù)沸伏,會(huì)報(bào)錯(cuò)
new Array(3.2) // RangeError: Invalid array length
new Array(-3) // RangeError: Invalid array length
// 單個(gè)非正整數(shù)參數(shù)(比如字符串、布爾值动分、對(duì)象等)毅糟,
// 則該參數(shù)是返回的新數(shù)組的成員
new Array('abc') // ['abc']
new Array([1]) // [Array[1]]
// 多參數(shù)時(shí),所有參數(shù)都是返回的新數(shù)組的成員
new Array(1, 2) // [1, 2]
new Array('a', 'b', 'c') // ['a', 'b', 'c']
字面量
- 使用方括號(hào)澜公,創(chuàng)建空數(shù)組姆另,等同于調(diào)用無(wú)參構(gòu)造函數(shù)
var a4 = [];
- 使用中括號(hào),并傳入初始化數(shù)據(jù)坟乾,等同于調(diào)用帶有初始化數(shù)據(jù)的構(gòu)造函數(shù)
ar a5 = [10];
數(shù)組的索引與長(zhǎng)度
var arr = [1,2,3,4];
console.log(arr.length);//4
console.log(arr[0]);//1
console.log(arr[1]);//2
元素添加/刪除
刪除
pop()
pop方法用于刪除數(shù)組的最后一個(gè)元素迹辐,并返回該元素。注意甚侣,該方法會(huì)改變?cè)瓟?shù)組明吩。
var a = ['a', 'b', 'c'];
a.pop() // 'c'
a // ['a', 'b']
對(duì)空數(shù)組使用pop方法,不會(huì)報(bào)錯(cuò)殷费,而是返回undefined印荔。
[].pop() // undefined
shift()
shift方法用于刪除數(shù)組的第一個(gè)元素,并返回該元素详羡。注意仍律,該方法會(huì)改變?cè)瓟?shù)組。
var a = ['a', 'b', 'c'];
a.shift() // 'a'
a // ['b', 'c']
shift方法可以遍歷并清空一個(gè)數(shù)組殷绍。
var list = [1, 2, 3, 4, 5, 6];
var item;
while (item = list.shift()) {
console.log(item);
}
list // []
添加
push()
push方法用于在數(shù)組的末端添加一個(gè)或多個(gè)元素染苛,并返回添加新元素后的數(shù)組長(zhǎng)度。注意主到,該方法會(huì)改變?cè)瓟?shù)組茶行。
var a = [];
a.push(1) // 1
a.push('a') // 2
a.push(true, {}) // 4
a // [1, 'a', true, {}]
unshift()
unshift方法用于在數(shù)組的第一個(gè)位置添加元素,并返回添加新元素后的數(shù)組長(zhǎng)度登钥。注意畔师,該方法會(huì)改變?cè)瓟?shù)組。
var a = ['a', 'b', 'c'];
a.unshift('x'); // 4
a // ['x', 'a', 'b', 'c']
unshift方法可以在數(shù)組頭部添加多個(gè)元素
var arr = [ 'c', 'd' ];
arr.unshift('a', 'b') // 4
arr // [ 'a', 'b', 'c', 'd' ]
終極神器 splice
JavaScript提供了一個(gè)splice方法用于一次性解決數(shù)組添加牧牢、刪除(這兩種方法一結(jié)合就可以達(dá)到替換效果)看锉,方法有三個(gè)參數(shù)
開(kāi)始索引
刪除元素的位移
插入的新元素,當(dāng)然也可以寫多個(gè)
splice方法返回一個(gè)由刪除元素組成的新數(shù)組塔鳍,沒(méi)有刪除則返回空數(shù)組
刪除
指定前兩個(gè)參數(shù)伯铣,可以使用splice刪除數(shù)組元素,同樣會(huì)帶來(lái)索引調(diào)整及l(fā)ength調(diào)整
var a = [1, 2, 3, 4, 5];
console.log(a.splice(1,3));//[2, 3, 4]
console.log(a.length);//2
console.log(a);//[1,5]
插入與替換
只要方法第二個(gè)參數(shù)轮纫,也就是刪除動(dòng)作執(zhí)行的次數(shù)設(shè)為0腔寡,第三個(gè)參數(shù)及以后填寫要插入內(nèi)容就splice就能執(zhí)行插入操作,
而如果第二個(gè)參數(shù)不為0則變成了先在該位置刪除再插入掌唾,也就是替換效果
var a = [1, 2, 3, 4, 5];
a.splice(1,0,9,99,999);
console.log(a.length); //8
console.log(a);//[1, 9, 99, 999, 2, 3, 4, 5]
a.splice(1,3,8,88,888);
console.log(a.length);//8
console.log(a);//[1, 8, 88, 888, 2, 3, 4, 5]
一個(gè)例子:數(shù)組去重
var arr = [1, 2, 2, 3,4];
for(var i=0;i<arr.length; i++){
for(var j=i+1; j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice(j, 1);
j--;//刪除元素后放前,索引值相應(yīng)的發(fā)生變化
}
}
}
常用操作
sort()
sort方法對(duì)數(shù)組成員進(jìn)行排序忿磅,默認(rèn)是按照字典順序排序。排序后凭语,原數(shù)組將被改變葱她。
需要特殊注意。sort方法不是按照大小排序似扔,而是按照對(duì)應(yīng)字符串的字典順序排序吨些。
也就是說(shuō),數(shù)值會(huì)被先轉(zhuǎn)成字符串虫几,再按照字典順序進(jìn)行比較锤灿,所以101排在11的前面
['d', 'c', 'b', 'a'].sort()
// ['a', 'b', 'c', 'd']
[4, 3, 2, 1].sort()
// [1, 2, 3, 4]
[11, 101].sort()
// [101, 11]
[10111, 1101, 111].sort()
// [10111, 1101, 111]
如果想讓sort方法按照自定義方式排序挽拔,可以傳入一個(gè)函數(shù)作為參數(shù)辆脸,表示按照自定義方法進(jìn)行排序。
該函數(shù)本身又接受兩個(gè)參數(shù)螃诅,表示進(jìn)行比較的兩個(gè)元素啡氢。
如果返回值大于0,表示第一個(gè)元素排在第二個(gè)元素后面术裸;
其他情況下倘是,都是第一個(gè)元素排在第二個(gè)元素前面
[10111, 1101, 111].sort(function (a, b) {
return a - b;
})
// [111, 1101, 10111]
[
{ name: "張三", age: 30 },
{ name: "李四", age: 24 },
{ name: "王五", age: 28 }
].sort(function (o1, o2) {
return o1.age - o2.age;
})
// [
// { name: "李四", age: 24 },
// { name: "王五", age: 28 },
// { name: "張三", age: 30 }
// ]
練習(xí):
排列 '["1px", "20px", "80px", "10px"]', 根據(jù)數(shù)值從小到大排序
隨機(jī)打亂順序
這里就需要用到我們的Math.random隨機(jī)函數(shù),它會(huì)隨機(jī)產(chǎn)生0-1之間的數(shù)值
var arr = [1, 2, 3, 4, 5,6, 7, 8];
arr.sort(function(a, b){
return Math.random() - 0.5;
})
join(char)
join方法以參數(shù)作為分隔符,將所有數(shù)組成員組成一個(gè)字符串返回袭艺。如果不提供參數(shù)搀崭,默認(rèn)用逗號(hào)分隔。
var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"
如果數(shù)組成員是undefined或null或空位猾编,會(huì)被轉(zhuǎn)成空字符串瘤睹。
[undefined, null].join('#')
// '#'
['a',, 'b'].join('-')
// 'a--b'
slice(start,end)
slice方法用于提取原數(shù)組的一部分,返回一個(gè)新數(shù)組答倡,原數(shù)組不變轰传。
它的第一個(gè)參數(shù)為起始位置(從0開(kāi)始),第二個(gè)參數(shù)為終止位置(但該位置的元素本身不包括在內(nèi))瘪撇。如果省略第二個(gè)參數(shù)获茬,則一直返回到原數(shù)組的最后一個(gè)成員。
// 格式
arr.slice(start_index, upto_index);
// 用法
var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]
如果slice方法的參數(shù)是負(fù)數(shù)倔既,則表示倒數(shù)計(jì)算的位置恕曲。
var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]
concat(array)
concat方法用于多個(gè)數(shù)組的合并。它將新數(shù)組的成員渤涌,添加到原數(shù)組的尾部佩谣,然后返回一個(gè)新數(shù)組,原數(shù)組不變
['hello'].concat(['world'])
// ["hello", "world"]
['hello'].concat(['world'], ['!'])
// ["hello", "world", "!"]
reverse()
reverse方法用于顛倒數(shù)組中元素的順序歼捏,返回改變后的數(shù)組稿存。注意笨篷,該方法將改變?cè)瓟?shù)組。
var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]
map()
map方法對(duì)數(shù)組的所有成員依次調(diào)用一個(gè)函數(shù)瓣履,根據(jù)函數(shù)結(jié)果返回一個(gè)新數(shù)組率翅。
var numbers = [1, 2, 3];
numbers.map(function (n) {
return n + 1;
});
// [2, 3, 4]
numbers
// [1, 2, 3]
map方法接受一個(gè)函數(shù)作為參數(shù)。該函數(shù)調(diào)用時(shí)袖迎,map方法會(huì)將其傳入三個(gè)參數(shù)冕臭,分別是當(dāng)前成員、當(dāng)前位置和數(shù)組本身燕锥。
[1, 2, 3].map(function(elem, index, arr) {
return elem * index;
});
// [0, 2, 6]
filter()
filter方法的參數(shù)是一個(gè)函數(shù)辜贵,所有數(shù)組成員依次執(zhí)行該函數(shù),返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回归形。該方法不會(huì)改變?cè)瓟?shù)組托慨。
[1, 2, 3, 4, 5].filter(function (elem) {
return (elem > 3);
})
// [4, 5]
filter方法的參數(shù)函數(shù)可以接受三個(gè)參數(shù),第一個(gè)參數(shù)是當(dāng)前數(shù)組成員的值暇榴,這是必需的厚棵,后兩個(gè)參數(shù)是可選的,分別是當(dāng)前數(shù)組成員的位置和整個(gè)數(shù)組蔼紧。
[1, 2, 3, 4, 5].filter(function (elem, index, arr) {
return index % 2 === 0;
});
// [1, 3, 5]
indexOf()婆硬,lastIndexOf()
indexOf方法返回給定元素在數(shù)組中第一次出現(xiàn)的位置,如果沒(méi)有出現(xiàn)則返回-1奸例。
var a = ['a', 'b', 'c'];
a.indexOf('b') // 1
a.indexOf('y') // -1
indexOf方法還可以接受第二個(gè)參數(shù)彬犯,表示搜索的開(kāi)始位置。
['a', 'b', 'c'].indexOf('a', 1) // -1
lastIndexOf方法返回給定元素在數(shù)組中最后一次出現(xiàn)的位置查吊,如果沒(méi)有出現(xiàn)則返回-1谐区。
var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1