JavaScrip-->數(shù)組

數(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']

字面量

  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)然也可以寫(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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市檐晕,隨后出現(xiàn)的幾起案子雕欺,更是在濱河造成了極大的恐慌,老刑警劉巖棉姐,帶你破解...
    沈念sama閱讀 222,104評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件屠列,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡伞矩,警方通過(guò)查閱死者的電腦和手機(jī)笛洛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)乃坤,“玉大人苛让,你說(shuō)我怎么就攤上這事∈铮” “怎么了狱杰?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,697評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)厅须。 經(jīng)常有香客問(wèn)我仿畸,道長(zhǎng),這世上最難降的妖魔是什么朗和? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,836評(píng)論 1 298
  • 正文 為了忘掉前任错沽,我火速辦了婚禮,結(jié)果婚禮上眶拉,老公的妹妹穿的比我還像新娘千埃。我一直安慰自己,他們只是感情好忆植,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,851評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布放可。 她就那樣靜靜地躺著谒臼,像睡著了一般。 火紅的嫁衣襯著肌膚如雪耀里。 梳的紋絲不亂的頭發(fā)上蜈缤,一...
    開(kāi)封第一講書(shū)人閱讀 52,441評(píng)論 1 310
  • 那天,我揣著相機(jī)與錄音备韧,去河邊找鬼。 笑死痪枫,一個(gè)胖子當(dāng)著我的面吹牛织堂,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播奶陈,決...
    沈念sama閱讀 40,992評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼易阳,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了吃粒?” 一聲冷哼從身側(cè)響起潦俺,我...
    開(kāi)封第一講書(shū)人閱讀 39,899評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎徐勃,沒(méi)想到半個(gè)月后事示,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,457評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡僻肖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,529評(píng)論 3 341
  • 正文 我和宋清朗相戀三年肖爵,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片臀脏。...
    茶點(diǎn)故事閱讀 40,664評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡劝堪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出揉稚,到底是詐尸還是另有隱情秒啦,我是刑警寧澤,帶...
    沈念sama閱讀 36,346評(píng)論 5 350
  • 正文 年R本政府宣布搀玖,位于F島的核電站余境,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏灌诅。R本人自食惡果不足惜葛超,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,025評(píng)論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望延塑。 院中可真熱鬧绣张,春花似錦、人聲如沸关带。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,511評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至芜飘,卻和暖如春务豺,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嗦明。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,611評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工笼沥, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人娶牌。 一個(gè)月前我還...
    沈念sama閱讀 49,081評(píng)論 3 377
  • 正文 我出身青樓奔浅,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親诗良。 傳聞我的和親對(duì)象是個(gè)殘疾皇子汹桦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,675評(píng)論 2 359

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

  • 第5章 引用類(lèi)型(返回首頁(yè)) 本章內(nèi)容 使用對(duì)象 創(chuàng)建并操作數(shù)組 理解基本的JavaScript類(lèi)型 使用基本類(lèi)型...
    大學(xué)一百閱讀 3,238評(píng)論 0 4
  • 第三章 類(lèi)型、值和變量 1鉴裹、存取字符串舞骆、數(shù)字或布爾值的屬性時(shí)創(chuàng)建的臨時(shí)對(duì)象稱(chēng)做包裝對(duì)象,它只是偶爾用來(lái)區(qū)分字符串值...
    坤少卡卡閱讀 643評(píng)論 0 1
  • 由于最近都在freecodecamp上刷代碼径荔,運(yùn)用了很多JavaScript數(shù)組的方法督禽,因此做了一份關(guān)于JavaS...
    2bc5f46e925b閱讀 1,983評(píng)論 0 16
  • 前言 把《C++ Primer》[https://book.douban.com/subject/25708312...
    尤汐Yogy閱讀 9,523評(píng)論 1 51
  • 在翻譯實(shí)戰(zhàn)或平行語(yǔ)料庫(kù)創(chuàng)建過(guò)程,往往需要把“雙語(yǔ)交錯(cuò)段落”進(jìn)行分離总处,也就是把第1赂蠢、3、5辨泳、7虱岂、……段的整段英語(yǔ)或漢...
    靜_靜_閱讀 423評(píng)論 0 0