詳解JavaScript數(shù)組的常用方法
數(shù)組的常用方法
- push() 改方法可以向數(shù)組末尾添加一個(gè)或多個(gè)元素,并返回?cái)?shù)組的新長(zhǎng)度
- 可以將添加的元素作為方法的參數(shù)傳遞,這些元素會(huì)自動(dòng)添加加到數(shù)組的末尾
- 改方法會(huì)將數(shù)組新的長(zhǎng)度作為返回值返回
var arr = ["小和尚","小猴","小豬","小沙","小龍"]; var result = arr.push("江流","心猿","木龍","刀圭","意馬"); console.log("返回值:"+result); console.log("新數(shù)組:"+arr);
pop()
該方法可以刪除數(shù)組最后一個(gè)元素,并將被刪除的元素作為返回值
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.pop(); console.log("返回值:"+result); console.log("新數(shù)組:"+arr);
unshift()
- 想數(shù)組開頭添加一個(gè)或多個(gè)元素,并返回新的數(shù)組長(zhǎng)度
- 向前邊插入元素以后,其他的元素索引會(huì)依次調(diào)整
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.unshift(); console.log("返回值:"+result); console.log("新數(shù)組:"+arr);
shift()
可以刪除數(shù)組第一個(gè)元素,并將被刪除的元素作為返回值
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.shift(); console.log("返回值:"+result); console.log("新數(shù)組:"+arr);
slice()
- 可以用來(lái)從數(shù)組提取指定元素
- 該方法不會(huì)改變?cè)財(cái)?shù)組,而是將截取到的元素封裝到一個(gè)新的數(shù)組中返回
參數(shù):
- 第一個(gè)參數(shù):截取開始位置的索引,包含開始索引
- 第二個(gè)參數(shù):截取結(jié)束位置的索引,不包含結(jié)束索引(截取到數(shù)組不包括該值)
- 第二個(gè)參數(shù)可以省略不寫,此時(shí)會(huì)截取從開始索引往后的所有元素
- 索引可以傳遞一個(gè)負(fù)值,如果傳遞一個(gè)負(fù)值,則從后往前計(jì)算
- 1倒數(shù)第一個(gè)
- 2倒數(shù)第二個(gè)
- 索引可以傳遞一個(gè)負(fù)值,如果傳遞一個(gè)負(fù)值,則從后往前計(jì)算
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.slice(1,3); console.log("截取到的數(shù)組:"+result); console.log("原數(shù)組不會(huì)發(fā)生改變:"+arr);
splice()
- 可以用來(lái)刪除數(shù)組中的指定元素
- 使用該方法會(huì)影響到原數(shù)組,會(huì)將指定元素從原數(shù)組中刪除,并將被刪除的元素作為返回值
參數(shù)
- 第一個(gè)參數(shù):表示開始位置的索引,包含開始索引
- 第二個(gè)參數(shù):表示刪除的個(gè)數(shù),不包含結(jié)束索引(截取到數(shù)組不包括該值)
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.splice(1,3); console.log("刪除到的元素:"+result); console.log("原數(shù)組會(huì)發(fā)生改變:"+arr);
- 第三個(gè)參數(shù)及以后:可以傳遞一些新的元素,這些元素將hi自動(dòng)插入到開始位置索引前邊
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.splice(1,2,"孫悟空","豬八戒"); console.log("刪除的元素:"+result); console.log("原數(shù)組會(huì)發(fā)生改變:"+arr);
數(shù)組元素去重
var arr = [1, 1, 5, 6, 4, 5, 2, 3, 7, 9, 4, 4, 4, 1]; for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1);//刪除當(dāng)前j所在位置的元素 j--;//刪除j所在元素后,后邊元素會(huì)自動(dòng)補(bǔ)位,需要重新在j這位置重新比較一次 } } } console.log(arr);
concat()
- 該方法可以連接兩個(gè)或多個(gè)數(shù)組,并將新的數(shù)組返回
- 該方法不會(huì)對(duì)原數(shù)組產(chǎn)生影響
var arr1 = ["江流","心猿","木龍","刀圭","意馬"]; var arr2 = ["唐僧","孫悟空","豬八戒","沙僧","白龍馬"]; var result = arr1.concat(arr2,"心猿意馬"); console.log("新數(shù)組:"+result);
join()
- 該方法可以將數(shù)組轉(zhuǎn)換為一個(gè)字符串
- 該方法不會(huì)對(duì)原數(shù)組產(chǎn)生影響,而是將轉(zhuǎn)換后的字符串作為結(jié)果返回
- 在
join()
中可以指定一個(gè)字符串作為參數(shù),這個(gè)字符串將會(huì)成為數(shù)組中元素的連接詞,如果不指定連接詞符,則默認(rèn)使用,作為連接符
var arr = ["江流","心猿","木龍","刀圭","意馬"]; var result = arr.join("-"); console.log("新數(shù)組:"+result); console.log("result的類型為:"+typeof(result));
reverse()
- 該方法用來(lái)反轉(zhuǎn)數(shù)組(前面的元素到后邊去,后邊的到前邊去)
- 該方法會(huì)影響到原數(shù)組
var arr = ["江流","心猿","木龍","刀圭","意馬"]; arr.reverse(); console.log("顛倒后的arr數(shù)組:"+arr);
sort()
該方法可以對(duì)數(shù)組中的元素進(jìn)行排序該方法會(huì)影響原數(shù)組,則默認(rèn)會(huì)按照Unicode編碼進(jìn)行排序
var arr = ["a","d","g","f","k",'v',"d","x"]; arr.sort(); console.log("排序后的arr數(shù)組:"+arr);
即使對(duì)于純數(shù)字的數(shù)組,使用sort()排序時(shí),也會(huì)按照Unicode編碼進(jìn)行排序,所以對(duì)于數(shù)字進(jìn)行排序,可能會(huì)得到錯(cuò)誤答案
var arr = [2,14,12,3,5,53,7,31,13]; arr.sort(); console.log("排序后的arr數(shù)組:"+arr);
可以自己指定排序的規(guī)則
在sort()添加一個(gè)回調(diào)函數(shù),來(lái)指定排序規(guī)則
回調(diào)函數(shù)中需要定義兩個(gè)形參 (a, b)
瀏覽器會(huì)分別使用數(shù)組中的元素作為實(shí)參去調(diào)用回調(diào)函數(shù)
瀏覽器會(huì)根據(jù)回調(diào)函數(shù)的返回值來(lái)決定元素的順序
- 如果返回一個(gè)大于0的值,則元素會(huì)交換位置
- 如果返回一個(gè)小于0的值,則元素位置不變
- 如果返回一個(gè)0,則認(rèn)為兩個(gè)元素相等,也不交換位置
- 如果需要升序排序,則返回a - b
- 如果需要降序排序,則返回b - a
var arr = [2, 14, 12, 3, 5, 53, 7, 31, 13]; arr.sort(function (a, b) { return a - b;//升序 //return b - a;降序 }); console.log("排序后的arr數(shù)組:" + arr);
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Ant Design Blazor 組件庫(kù)的路由復(fù)用多標(biāo)簽頁(yè)功能
在 Ant Design Blazor 組件庫(kù)中實(shí)現(xiàn)多標(biāo)簽頁(yè)組件的呼聲日益高漲。于是,我利用周末時(shí)間,結(jié)合 Blazor 內(nèi)置路由組件實(shí)現(xiàn)了基于 Tabs 組件的 ReuseTabs 組件,需要的朋友跟隨小編一起看看吧2021-07-07Javascript拖拽&拖放系列文章3之細(xì)說(shuō)事件對(duì)象
Javascript中的事件對(duì)象其實(shí)和.NET中繼承自EventArgs類的派生類類似,用來(lái)給事件處理程序傳遞狀態(tài)信息,從而進(jìn)行相應(yīng)的操作。這一篇文章將講述Javascript事件對(duì)象中和實(shí)現(xiàn)拖拽功能相關(guān)的幾個(gè)屬性,并在最后將IE事件模型和標(biāo)準(zhǔn)DOM事件模型的差異封裝到一個(gè)類中,從而適應(yīng)所有的瀏覽器。2008-09-09vscode錄音及語(yǔ)音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記!
以目前的vscode版本來(lái)說(shuō),作者并沒(méi)有開放訪問(wèn)本地媒體權(quán)限,所以插件市場(chǎng)里面的所有語(yǔ)音相關(guān)插件也并沒(méi)有直接獲取vscode的媒體權(quán)限,這篇文章主要介紹了vscode錄音及語(yǔ)音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記!,需要的朋友可以參考下2023-05-05js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù)
這篇文章主要介紹了js變量值傳到php過(guò)程詳解 將php解析成數(shù)據(jù),傳參數(shù)去后臺(tái),用ajax,或者原生js方式拼接url。明白原理,洞悉系統(tǒng)是先解析php,再執(zhí)行html代碼和js代碼。,需要的朋友可以參考下2019-06-06JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能,結(jié)合實(shí)例形式分析了javascript鼠標(biāo)事件響應(yīng)及針對(duì)圖形元素的屬性操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05javascript事件捕獲機(jī)制【深入分析IE和DOM中的事件模型】
這篇文章主要介紹了javascript事件捕獲機(jī)制,結(jié)合實(shí)例形式分析了冒泡的原理、事件捕獲、各瀏覽器事件處理機(jī)制與IE和DOM中的事件模型等,需要的朋友可以參考下2016-12-12Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框
這篇文章主要為大家詳細(xì)介紹了Bootstrap實(shí)現(xiàn)帶動(dòng)畫過(guò)渡的彈出框,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08