Javascript數(shù)組Array方法解讀
接上一篇《Javascript數(shù)組Array基礎(chǔ)介紹》,這一篇詳細(xì)介紹Array的所有方法。
所有數(shù)組的方法都定義在Array.prototype上,而Array.prototype本身也是一個(gè)數(shù)組。
array.concat()
淺復(fù)制一份當(dāng)前數(shù)組,并把接收到的參數(shù)附加到新數(shù)組的末尾。原數(shù)組不改變。
語(yǔ)法
array.concat(value1, value2, ..., valueN)
參數(shù)為需要合并的數(shù)組或非數(shù)組值
var arr1 = [1, 2, 3]; var obj = {animal : 'monkey'}; var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]); // arr1 [1, 2, 3] // arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9] obj.animal = 'tiger'; // [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]
可以合并數(shù)組或非數(shù)組值,但是要注意如果包含對(duì)象,對(duì)象還是引用原來(lái)的對(duì)象。
array.join()
返回一個(gè)將數(shù)組所有元素用分隔符拼接成的字符串,默認(rèn)分隔符為逗號(hào)。
語(yǔ)法
array.join(seperator)
參數(shù)為分割符
var arr1 = [1, 2, 3]; var str = arr1.join(); // 1,2,3 str = arr1.join('#'); // 1#2#3
當(dāng)將大量字符串片段組裝時(shí),join方法比+元素運(yùn)算符要快。
利用new Array(3)將生成一個(gè)長(zhǎng)度為三的空數(shù)組,同時(shí)結(jié)合join()方法,可以實(shí)現(xiàn)重復(fù)某段字符串。
var str = new Array(3).join('-+'); // -+-+
重復(fù)的次數(shù)就是數(shù)組長(zhǎng)度減一,因?yàn)樽址欠指舴?/p>
由于數(shù)組本身是對(duì)象,擁有toString()方法,利用它也能實(shí)現(xiàn)將數(shù)組拼接成一個(gè)字符串,只不過(guò)分隔符只能是逗號(hào)了。
var arr1 = [1, 2, 3]; arr1.toString(); // 1,2,3
實(shí)際上它會(huì)先調(diào)用每一個(gè)元素的toString()方法。
array.push()
把一個(gè)或多個(gè)參數(shù)附加在數(shù)組末尾,返回?cái)?shù)組長(zhǎng)度。改變數(shù)組自身。
語(yǔ)法
array.push(value1, value2, ..., valueN);
實(shí)例
var arr1 = [1, 2, 3]; var len = arr1.push(4, 5); console.log(len); // 5 console.log(arr1); // [1, 2, 3, 4, 5]
另一種方法也可以實(shí)現(xiàn)在數(shù)組末尾插入值。
arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6] array.pop()
將數(shù)組最后一項(xiàng)刪除,并返回刪除項(xiàng)。改變數(shù)組自身。
var arr1 = [1, 2, 3]; arr.pop(); // [1, 2] 返回 3
如果數(shù)組為空,返回undefined。
array.unshift()
把一個(gè)或多個(gè)參數(shù)插入到數(shù)組頭部,返回?cái)?shù)組長(zhǎng)度。改變數(shù)組自身。
var arr1 = [1, 2, 3]; var len = arr1.unshift(4, 5); console.log(len); // 5 console.log(arr1); // [4, 5, 1, 2, 3]
array.shift()
將數(shù)組的第一項(xiàng)刪除,并返回刪除項(xiàng)。改變數(shù)組自身。
var arr1 = [1, 2, 3]; arr.shift(); // [2, 3] 返回 1
如果數(shù)組為空,返回undefined。
array.sort()
這個(gè)方法按照每個(gè)元素的toString()方法返回的值進(jìn)行排序,所以一般得不到期望的結(jié)果。
var arr1 = [1, 2, 3, 14, 24]; arr1.sort(); // [1, 14, 2, 24, 3]
但是sort()方法可以接收一個(gè)我們自定義的函數(shù)進(jìn)行比較。比較函數(shù)接受兩個(gè)參數(shù),尤其sort()默認(rèn)是升序,所以如果想讓第一個(gè)參數(shù)位于第二個(gè)參數(shù)前面就要返回負(fù)數(shù),相等返回0,位于后面返回正數(shù)。
var compare = function(a, b){ return a - b; } var arr2 = [1, 12, 2, 23, 3 , 5, 4]; arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]
比較字符串可以結(jié)合string.localeCompare()方法來(lái)用。
var arr3 = ['F', 'e', 'f', 'E']; arr3.sort(function(a, b){ return a.localeCompare(b); }); // ['e', 'E', 'f', 'F']
array.reverse()
反轉(zhuǎn)數(shù)組元素順序,返回?cái)?shù)組自身。
var arr1 = [1, 4, 3, 2]; arr1.reverse(); // [2, 3, 4, 1]
array.slice()
對(duì)數(shù)組淺復(fù)制其中的一段,不改變數(shù)組自身。
array.slice(start, end);
方法接受兩個(gè)參數(shù),最后一個(gè)可以省略,默認(rèn)是數(shù)組自身長(zhǎng)度。
var arr1 = [1, 2, 3, 4, 5, 6]; arr1.slice(4); // [5, 6] arr1.slice(2, 4); // [3, 4] arr1.slice(-3); // [4, 5, 6]
如果傳入負(fù)數(shù),那么會(huì)被自動(dòng)加上數(shù)組的長(zhǎng)度,試圖變成非負(fù)數(shù)。
傳入一個(gè)絕對(duì)值小于數(shù)組長(zhǎng)度的值,就是從后向前取負(fù)數(shù)絕對(duì)值個(gè)數(shù)的元素。例如例子中取了后三個(gè)元素。
array.splice()
這是數(shù)組中最強(qiáng)大也最常用對(duì)的方法了,可以實(shí)現(xiàn)刪除,插入,替換。
語(yǔ)法
array.slice(start, count, item);
該方法移除一個(gè)或多個(gè)元素,并用新的元素替代他們。start是開(kāi)始的位置,count是刪除的數(shù)量,item是新增加的元素(item不止一個(gè),也可省略),以數(shù)組形式返回刪除的元素。
var arr1 = [1, 2, 3, 4, 5]; //刪除 arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3] //插入 arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5] //替換 arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]
下面介紹一些ECMAScript5新增的方法,主要是ie8不支持。
indexOf() 與 lastIndexOf()
查找對(duì)應(yīng)項(xiàng)在數(shù)組中的索引位置,第二個(gè)參數(shù)表示對(duì)應(yīng)查找方向的起始位置,返回第一個(gè)匹配的位置,如果沒(méi)有找到則返回-1;
indexOf()是從前往后查找,lastIndexOf()是從后往前查找。
var arr1 = [1, 2, 3, 4, 3, 2, 1]; arr1.indexOf(2); // 1 arr1.indexOf(2, 3); // 5 arr1.lastIndexOf(3); // 4 arr1.lastIndexOf(3, 4) // 2
迭代方法
以下方法接受兩個(gè)參數(shù),第一個(gè)是每一項(xiàng)運(yùn)行的函數(shù),第二個(gè)函數(shù)運(yùn)行的作用域。
運(yùn)行函數(shù)有三個(gè)參數(shù),分別是當(dāng)前項(xiàng),位置,數(shù)組本身。
array.every()
運(yùn)行給定函數(shù),如果迭代每一項(xiàng)都返回true,則最終返回true。
var arr1 = [1, 2, 3, 4, 5]; arr1.every(function(item, index, array){ return item > 3; }); // false
array.some()
運(yùn)行給定函數(shù),如果迭代中有一項(xiàng)返回true,則最終返回true。
arr1.some(function(item, index, array){ return item > 3; }); // true
array.map()
運(yùn)行給定函數(shù),將迭代中返回的值組成數(shù)組,返回該數(shù)組。
arr1.map(function(item, index, array){ return item * 2; }); // [2, 4, 6, 8, 10]
array.filter()
運(yùn)行給定函數(shù),將迭代中返回true的元素以數(shù)組形式返回
arr1.filter(function(item, index, array){ return item > 3; }); // [4, 5]
array.forEach()
運(yùn)行給定函數(shù),不返回任何值。類(lèi)似于普通的for循環(huán)的功能。
歸并方法
函數(shù)接受兩個(gè)參數(shù),第一個(gè)參數(shù)是每一個(gè)運(yùn)行的自定義函數(shù),第二項(xiàng)是作為歸并基礎(chǔ)的初始值。
自定義函數(shù)接受四個(gè)參數(shù),分別是前一項(xiàng),當(dāng)前項(xiàng),位置,數(shù)組。
array.reduce() 與 array.reduceRight() var splitstr = function(prev, item, index, array){ return prev + '#' + item; } var arr1 = [1, 2, 3, 4, 5]; arr1.reduce(splitstr, 8); // 8#1#2#3#4#5 arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1
小結(jié)
這一篇介紹了數(shù)組方法的種種細(xì)節(jié)和注意問(wèn)題,下一篇將會(huì)介紹數(shù)組更高級(jí)的用法。本篇后續(xù)會(huì)添加ECMAScript6 新增加的數(shù)組方法的介紹。
- JavaScript中數(shù)組Array方法詳解
- javascript object array方法使用詳解
- JavaScript ES5標(biāo)準(zhǔn)中新增的Array方法
- JS array 數(shù)組詳解
- JS Array.slice 截取數(shù)組的實(shí)現(xiàn)方法
- js刪除Array數(shù)組中指定元素的兩種方法
- JavaScript判斷變量是否為數(shù)組的方法(Array)
- JS中數(shù)組Array的用法示例介紹
- 以JSON形式將JS中Array對(duì)象數(shù)組傳至后臺(tái)的方法
- JavaScript中Array方法你該知道的正確打開(kāi)方法
相關(guān)文章
window.showModalDialog使用手冊(cè)
window.showModalDialog使用手冊(cè)...2007-01-01JavaScript學(xué)習(xí)筆記之Cookie對(duì)象
本文主要簡(jiǎn)單介紹了javascript中cookie對(duì)象的概念,以及cookie的讀取,寫(xiě)入,刪除操作的方法,并附上示例,非常不錯(cuò),這里推薦給小伙伴們。2015-01-01Js中的onblur和onfocus事件應(yīng)用介紹
html頁(yè)面中,諸如按鈕、文本框等可視元素都具有擁有和失去焦點(diǎn)的事件,本文以文本框獲得和失去焦點(diǎn)為例簡(jiǎn)單講解onfocus和onblur的應(yīng)用2013-08-08JavaScript入門(mén)初體驗(yàn)書(shū)寫(xiě)方式
學(xué)了這么久,你真的了解javascript嗎?很多不知道的小白總是把它和java聯(lián)系在一起,在這里阿牛很負(fù)責(zé)任的告訴你們,兩者沒(méi)有任何關(guān)系,今天就來(lái)帶你們一起揭開(kāi)javascript的神秘面紗2022-03-03jquery和javascript的區(qū)別(常用方法比較)
jquery 就對(duì)javascript的一個(gè)擴(kuò)展,封裝,就是讓javascript更好用,更簡(jiǎn)單,為了說(shuō)明區(qū)別,下面與大家分享下JavaScript 與JQuery 常用方法比較2013-07-07JavaScript onclick 和 click 的區(qū)別詳解
onclick是綁定事件,click本身是方法作用是觸發(fā)onclick事件,只要執(zhí)行了元素的click()方法,本片文章講的很詳細(xì),大家可以看看,希望能夠給你帶來(lái)幫助2021-10-10Javascript SHA-1:Secure Hash Algorithm
Javascript SHA-1:Secure Hash Algorithm...2006-12-12