JavaScript原生數(shù)組Array常用方法
棧方法
push方法和pop方法, 可以使數(shù)組的行為類似于棧, 先進(jìn)后出, 并且推入和彈出操作只發(fā)生在一端.
push方法
push方法可以接收一個(gè)或多個(gè)參數(shù), 把它們追加到數(shù)組末尾, 并返回修改后數(shù)組的長(zhǎng)度.
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.push('f'); console.info('temp: ' + temp); // temp: 6 console.info(arr); // ["a", "b", "c", "d", "e", "f"] temp = arr.push('g', 'h'); console.info('temp: ' + temp); // temp: 8 console.info(arr); // ["a", "b", "c", "d", "e", "f", "g", "h"]
合并兩個(gè)數(shù)組
我們可以通過Array.prototype.push.apply()來合并兩個(gè)數(shù)組, 示例如下:
var arr1 = ['a', 'b', 'c'], arr2 = ['x', 'y', 'z']; var temp = Array.prototype.push.apply(arr1, arr2); console.info(arr1); // ["a", "b", "c", "x", "y", "z"] console.info(arr2); // ["x", "y", "z"] console.info(temp); // 6
pop方法
pop方法是將數(shù)組的最后一項(xiàng)移除, 將數(shù)組長(zhǎng)度減1, 并返回移除的項(xiàng).
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.pop(); console.info('temp: ' + temp); // temp: e console.info('length: ' + arr.length); // length: 4
如果在一個(gè)空數(shù)組上使用pop方法, 則返回undefined
隊(duì)列方法
隊(duì)列的訪問規(guī)則是先進(jìn)先出, 并且隊(duì)尾添加項(xiàng), 隊(duì)頭移除項(xiàng). push方法和shift方法結(jié)合使用, 就可以像操作隊(duì)列一樣操作數(shù)組.
shift方法
shift方法將移除數(shù)組的第一項(xiàng), 將數(shù)組長(zhǎng)度減1, 并返回移除的項(xiàng).
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.shift(); console.info('temp: ' + temp); // temp: a console.info('length: ' + arr.length); // length: 4
unshift方法
相反地, 還有一個(gè)unshift方法, 它的用途與shift方法相反
unshift也可以在接收一個(gè)或多個(gè)參數(shù), 把它們依次添加到數(shù)組的前端, 并返回修改后數(shù)組的長(zhǎng)度.
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.unshift('x', 'y', 'z'); console.info('temp: ' + temp); // temp: 8 console.info(arr); // ["x", "y", "z", "a", "b", "c", "d", "e"]
重排序方法
sort方法和reverse方法
sort方法和reverse方法是可以直接用來重排序的兩個(gè)方法.
其中, reverse方法是用來反轉(zhuǎn)數(shù)組的.
var arr = [1, 3, 2, 5, 4]; arr.reverse(); console.info(arr); // [4, 5, 2, 3, 1]
關(guān)于sort方法, 默認(rèn)情況下, 它是對(duì)數(shù)組的每一項(xiàng)進(jìn)行升序排列, 即最小的值在前面. 但sort方法會(huì)調(diào)用toString方法將每一項(xiàng)轉(zhuǎn)成字符串進(jìn)行比較(字符串通過Unicode位點(diǎn)進(jìn)行排序), 那么這種比較方案在多數(shù)情況下并不是最佳方案. 例如:
var arr = [1, 3, 2, 5, 4]; arr.sort(); console.info(arr); // [1, 2, 3, 4, 5] arr = [1, 5, 10, 20, 25, 30]; arr.sort(); console.info(arr); // [1, 10, 20, 25, 30, 5]
因此, sort方法可以接收一個(gè)比較函數(shù)作為參數(shù), 由我們來決定排序的規(guī)則. 比較函數(shù)接收兩個(gè)參數(shù), 如果第一個(gè)參數(shù)小于第二個(gè)參數(shù)(即第一個(gè)參數(shù)應(yīng)在第二個(gè)參數(shù)之前)則返回一個(gè)負(fù)數(shù), 如果兩個(gè)參數(shù)相等則返回0, 如果第一個(gè)參數(shù)大于第二個(gè)參數(shù)則返回一個(gè)正數(shù), 例如:
var arr = [1, 5, 10, 20, 25, 30]; arr.sort(function(value1, value2){ if(value1 < value2) { return -1; } else if(value1 > value2) { return 1; } else { return 0; } }); console.info(arr); // [1, 5, 10, 20, 25, 30]
操作方法
concat方法
concat方法可以將多個(gè)數(shù)組合并成一個(gè)新的數(shù)組. concat可以接收的參數(shù)可以是數(shù)組, 也可以是非數(shù)組值.
var arr1 = ['a', 'b', 'c'], arr2 = ['x', 'y', 'z'], val = 'hello'; var temp = arr1.concat(val, arr2); console.info('arr1: ' + arr1); // arr1: a,b,c console.info('arr2: ' + arr2); // arr2: x,y,z console.info('val: ' + val); // val: hello console.info('temp: ' + temp); // temp: a,b,c,hello,x,y,z
concat方法并不操作原數(shù)組, 而是新創(chuàng)建一個(gè)數(shù)組, 然后將調(diào)用它的對(duì)象中的每一項(xiàng)以及參數(shù)中的每一項(xiàng)或非數(shù)組參數(shù)依次放入新數(shù)組中, 并且返回這個(gè)新數(shù)組.
concat方法并不操作調(diào)用它的數(shù)組本身, 也不操作各參數(shù)數(shù)組, 而是將它們的每個(gè)元素拷貝一份放到新創(chuàng)建的數(shù)組中. 而拷貝的過程, 對(duì)于對(duì)象類型來說, 是將對(duì)象引用復(fù)制一份放到新數(shù)組中, 而對(duì)于基本類型來說, 是將其值放到新數(shù)組中.
slice方法
slice方法可以基于源數(shù)組中的部分元素, 對(duì)其進(jìn)行淺拷貝, 返回包括從開始到結(jié)束(不包括結(jié)束位置)位置的元素的新數(shù)組.
var arr = ['a', 'b', 'c', 'd', 'e']; var temp1 = arr.slice(), temp2 = arr.slice(1), temp3 = arr.slice(1, 2); console.info(arr); // ["a", "b", "c", "d", "e"] console.info(temp1); // ["a", "b", "c", "d", "e"] console.info(temp2); // ["b", "c", "d", "e"] console.info(temp3); // ["b"]
從示例中可以看出:
- slice方法并沒有操作原數(shù)組, 而是創(chuàng)建了一個(gè)新的數(shù)組.
- 當(dāng)沒有傳參數(shù)給slice方法時(shí), 則返回從索引0開始拷貝的新數(shù)組.
- 傳入一個(gè)參數(shù), 如: arr.slice(1), 表示從索引1位置開始拷貝, 一直到原數(shù)組的最后一個(gè)元素.
- 傳入兩個(gè)參數(shù), 如: arr.slice(1, 2), 表示從索引1位置開始拷貝, 一直拷貝到位置2但不包括位置2上的元素.
參數(shù)如果為負(fù)數(shù), 表示從數(shù)組最后面的元素可以算起.
slice方法同樣不操作調(diào)用它的數(shù)組本身, 而是將原數(shù)組的每個(gè)元素拷貝一份放到新創(chuàng)建的數(shù)組中. 而拷貝的過程, 也于concat方法相同.
splice方法
splice方法可以用途刪除或修改數(shù)組元素. 它有如下幾種用法:
刪除:
當(dāng)給splice方法中傳入一個(gè)或兩個(gè)參數(shù)時(shí), 就可以從數(shù)組中刪除任意元素.
傳入一個(gè)參數(shù): 要?jiǎng)h除的的第一個(gè)元素的位置, 此時(shí)將會(huì)刪除從要?jiǎng)h除的第一個(gè)元素的位置起, 后面的所有元素.
傳入兩個(gè)參數(shù): 要?jiǎng)h除的第一個(gè)元素的位置和要?jiǎng)h除的項(xiàng)數(shù),
返回值均為刪除的元素組成的數(shù)組, 例如:
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.splice(2); console.info(arr); // ["a", "b"] console.info(temp); // ["c", "d", "e"] arr = ['a', 'b', 'c', 'd', 'e']; temp = arr.splice(2, 2); console.info(arr); // ["a", "b", "e"] console.info(temp); // ["c", "d"]
插入:
使用splice方法可以向數(shù)組的指定位置插入任務(wù)數(shù)量的元素, 此時(shí)需要提供三個(gè)參數(shù): 起始位置(要插入的位置), 0(表示要?jiǎng)h除的項(xiàng)數(shù), 0為不刪除), 要插入的元素, 如果要插入多個(gè)元素可以添加更多的參數(shù), 例如:
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.splice(2, 0, 'x', 'y', 'z'); console.info(arr); // ["a", "b", "x", "y", "z", "c", "d", "e"] console.info(temp); // [], 并沒有刪除元素
替換:
當(dāng)splice接收三個(gè)參數(shù), 且第二個(gè)參數(shù)不為0時(shí), 可達(dá)到在數(shù)組中替換元素的效果. 例如:
var arr = ['a', 'b', 'c', 'd', 'e']; var temp = arr.splice(2, 2, 'x', 'y', 'z'); console.info(arr); // ["a", "b", "x", "y", "z", "e"] console.info(temp); // ["c", "d"]
此示例表示, 從arr數(shù)組的位置為2的元素起, 刪除2個(gè)元素, 并在位置2添加三個(gè)元素.
如果移除的元素個(gè)數(shù)不等于添加的元素個(gè)數(shù), 那么數(shù)組的長(zhǎng)度將發(fā)生變化.
另外,
從ECMAScript5開始, 還提供了數(shù)組的迭代方法, 歸并方法等, 這些方法將在后面做出補(bǔ)充.
相關(guān)文章
IE6,IE7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤
ie6,7下js動(dòng)態(tài)加載圖片不顯示錯(cuò)誤,碰到這類問題的朋友可以參考下。2010-07-07使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能
這篇文章主要介紹了使用 UniApp 實(shí)現(xiàn)小程序的微信登錄功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法)
下面小編就為大家分享一篇js實(shí)現(xiàn)把時(shí)間戳轉(zhuǎn)換為yyyy-MM-dd hh:mm 格式(es6語法),具有很的參考價(jià)值,希望對(duì)大家有所幫助2017-12-12javascript中的緩動(dòng)效果實(shí)現(xiàn)程序
javascript中的緩動(dòng)效果可以應(yīng)用于很多地方,比如距離位移上的變化:圖片的滾動(dòng)、焦點(diǎn)圖的輪轉(zhuǎn)切換,透明度上的變化:漸隱漸現(xiàn)。凡是存在運(yùn)動(dòng)的狀態(tài)都適用,下面以最基本的塊在容器內(nèi)從左到右滑動(dòng)為例,講下幾種不同的緩動(dòng)處理方式2012-12-12js實(shí)現(xiàn)選中復(fù)選框文字變色的方法
這篇文章主要介紹了js實(shí)現(xiàn)選中復(fù)選框文字變色的方法,涉及javascript鼠標(biāo)事件及頁面元素的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08Bootstrap組合上、下拉框簡(jiǎn)單實(shí)現(xiàn)代碼
這篇文章主要介紹了Bootstrap組合上、下拉框的簡(jiǎn)單實(shí)現(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03js內(nèi)存泄漏場(chǎng)景、如何監(jiān)控及分析詳解
js內(nèi)存泄漏的含義就是當(dāng)已經(jīng)不需要某塊內(nèi)存時(shí)這塊內(nèi)存還存在著,垃圾回收機(jī)制就是間歇的不定期的尋找到不再使用的變量,并釋放掉它們所指向的內(nèi)存,這篇文章主要給大家介紹了關(guān)于js內(nèi)存泄漏場(chǎng)景、如何監(jiān)控及分析的相關(guān)資料,需要的朋友可以參考下2021-11-11ImageZoom 圖片放大鏡效果(多功能擴(kuò)展篇)
上一篇ImageZoom已經(jīng)對(duì)圖片放大效果做了詳細(xì)的分析,這次在ImageZoom的基礎(chǔ)上進(jìn)行擴(kuò)展,實(shí)現(xiàn)更多的效果。2010-04-04