>>>>> 數(shù)組

在程序語(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']

字面量

  1. 使用方括號(hào)澜公,創(chuàng)建空數(shù)組姆另,等同于調(diào)用無(wú)參構(gòu)造函數(shù)
var a4 = [];
  1. 使用中括號(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ù)

  1. 開(kāi)始索引

  2. 刪除元素的位移

  3. 插入的新元素,當(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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市菩貌,隨后出現(xiàn)的幾起案子卢佣,更是在濱河造成了極大的恐慌,老刑警劉巖箭阶,帶你破解...
    沈念sama閱讀 221,273評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件虚茶,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡仇参,警方通過(guò)查閱死者的電腦和手機(jī)嘹叫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評(píng)論 3 398
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)诈乒,“玉大人罩扇,你說(shuō)我怎么就攤上這事。” “怎么了喂饥?”我有些...
    開(kāi)封第一講書人閱讀 167,709評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵消约,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我员帮,道長(zhǎng)或粮,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 59,520評(píng)論 1 296
  • 正文 為了忘掉前任捞高,我火速辦了婚禮氯材,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘硝岗。我一直安慰自己氢哮,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,515評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布型檀。 她就那樣靜靜地躺著冗尤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贱除。 梳的紋絲不亂的頭發(fā)上生闲,一...
    開(kāi)封第一講書人閱讀 52,158評(píng)論 1 308
  • 那天媳溺,我揣著相機(jī)與錄音月幌,去河邊找鬼。 笑死悬蔽,一個(gè)胖子當(dāng)著我的面吹牛扯躺,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蝎困,決...
    沈念sama閱讀 40,755評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼录语,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了禾乘?” 一聲冷哼從身側(cè)響起澎埠,我...
    開(kāi)封第一講書人閱讀 39,660評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎始藕,沒(méi)想到半個(gè)月后蒲稳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,203評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伍派,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,287評(píng)論 3 340
  • 正文 我和宋清朗相戀三年江耀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诉植。...
    茶點(diǎn)故事閱讀 40,427評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡祥国,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出晾腔,到底是詐尸還是另有隱情舌稀,我是刑警寧澤啊犬,帶...
    沈念sama閱讀 36,122評(píng)論 5 349
  • 正文 年R本政府宣布,位于F島的核電站壁查,受9級(jí)特大地震影響椒惨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜潮罪,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,801評(píng)論 3 333
  • 文/蒙蒙 一康谆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧嫉到,春花似錦沃暗、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,272評(píng)論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至细层,卻和暖如春惜辑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背疫赎。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,393評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工盛撑, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捧搞。 一個(gè)月前我還...
    沈念sama閱讀 48,808評(píng)論 3 376
  • 正文 我出身青樓抵卫,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親胎撇。 傳聞我的和親對(duì)象是個(gè)殘疾皇子介粘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,440評(píng)論 2 359

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