數(shù)組
在程序語(yǔ)言中數(shù)組的重要性不言而喻,JavaScript中數(shù)組也是最常使用的對(duì)象之一,數(shù)組是值的有序集合辐董,由于弱類(lèi)型的原因,JavaScript中數(shù)組十分靈活禀综、強(qiáng)大简烘,不像是Java等強(qiáng)類(lèi)型高級(jí)語(yǔ)言數(shù)組只能存放同一類(lèi)型或其子類(lèi)型元素,JavaScript在同一個(gè)數(shù)組中可以存放多種類(lèi)型的元素菇存,而且長(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)然也可以寫(xiě)多個(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ù)及以后填寫(xiě)要插入內(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