JS新手入門數(shù)組處理的實(shí)用方法匯總
join()方法：將數(shù)組中所有元素通過(guò)指定分隔符連接成一個(gè)字符串
舉例：
myArr.join('-') // 用'-'符號(hào)拼接
concat()方法：將兩個(gè)數(shù)組或多個(gè)數(shù)組合并成一個(gè)數(shù)組
舉例：
myArr.concat(arr1, arr2, ..., arrN)
注意：該方法不會(huì)改變現(xiàn)有的數(shù)組，所以可以和空數(shù)組合并實(shí)現(xiàn)復(fù)制舊數(shù)組，在操作新數(shù)組數(shù)據(jù)時(shí)不污染舊數(shù)組數(shù)據(jù)
sort() 方法：用于對(duì)數(shù)組的元素進(jìn)行排序
如果調(diào)用該方法時(shí)沒有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進(jìn)行排序，說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序。要實(shí)現(xiàn)這一點(diǎn)，首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串（如有必要），以便進(jìn)行比較
舉例：
myArr.sort() // 按字母排序
myArr.sort(function(a, b) {
return a - b
}) // 按數(shù)字升序，降序?yàn)閎 - a
// 箭頭函數(shù)寫法
myArr.sort((a, b) => a - b)
reverse() 方法：用于顛倒數(shù)組中元素的順序
舉例：
myArr.reverse()
push() / unshift()方法：向數(shù)組的末尾 / 開頭添加一個(gè)或多個(gè)元素，并返回新的長(zhǎng)度
舉例：
myArr.push(item1, item2, ..., itemN) myArr.unshift(item1, item2, ..., itemN)
shift()方法：刪除數(shù)組的第一個(gè)元素，并返回第一個(gè)元素的值
舉例：
myArr.shift()
pop()方法：刪除數(shù)組的一個(gè)元素（默認(rèn)最后一個(gè)元素），并且返回該元素的值
舉例：
myArr.pop() // 刪除數(shù)組最后一個(gè)元素 myArr.pop(1) // 刪除數(shù)組中索引為1的元素
splice()方法：向/從數(shù)組中添加/刪除項(xiàng)目，然后返回被刪除的項(xiàng)目
myArr.splice(index, count, item1, item2, ..., itemN) // index 必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置 // count 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目 // item1, item2, ..., itemN 可選。向數(shù)組添加的新項(xiàng)目
forEach()方法：方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)(相當(dāng)于for循環(huán))
舉例：
myArr.forEach(function (item, index, arr) {
if (index === 3) {
item = 123
}
}) // 循環(huán)數(shù)組，將索引為3的元素值更改為123
// 箭頭函數(shù)寫法
myArr.forEach((v, i, arr) => if (i === 3) { v = 123 })
注意：以下方法均不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)，不會(huì)改變?cè)紨?shù)組
indexOf()方法：查找數(shù)組是否存在某個(gè)元素，返回下標(biāo)，沒有則返回-1
舉例：
myArr.indexOf(item)
注意：indexOf() 方法對(duì)大小寫敏感！
slice()方法：可提取字符串的某個(gè)部分，并以新的字符串返回被提取的部分（淺拷貝數(shù)組的元素）
舉例：
const newArr = myArr.slice(0, 1) // 截取數(shù)組myArr索引從0到1的部分元素 // 參數(shù): // begin(可選): 索引數(shù)值,接受負(fù)值，從該索引處開始提取原數(shù)組中的元素,默認(rèn)值為0。 // end(可選):索引數(shù)值(不包括),接受負(fù)值，在該索引處前結(jié)束提取原數(shù)組元素，默認(rèn)值為數(shù)組末尾(包括最后一個(gè)元素)
every()方法：用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）(如某個(gè)值是否都為true)
如果有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false，且停止檢測(cè)；如果所有元素都滿足條件，則返回 true
舉例：
const state = myArr.every(function (item, index, arr) {
return item > 10
}) // 檢測(cè)數(shù)組myArr的所有元素是否都大于10，返回一個(gè)布爾值state
// 箭頭函數(shù)寫法
const state = myArr.every((v, i, arr) => v > 10)
some()方法：用于檢測(cè)數(shù)組中的元素是否滿足指定條件（函數(shù)提供）(如某個(gè)值是否都為true)
如果有一個(gè)元素滿足，則整個(gè)表達(dá)式返回 true ，且停止檢測(cè)；如果沒有滿足條件的元素，則返回false
舉例：
const state = myArr.some(function (item, index, arr) {
return item > 10
}) // 檢測(cè)數(shù)組myArr中是否存在元素大于10，返回一個(gè)布爾值state
// 箭頭函數(shù)寫法
const state = myArr.some((v, i, arr) => v > 10)
includes()方法：用于判斷數(shù)組是否包含指定的值，如果找到匹配的值則返回 true，否則返回 false
注意：includes() 方法區(qū)分大小寫
參數(shù):
searchvalue：必需，要查找的值
start：可選，設(shè)置從那個(gè)位置開始查找，默認(rèn)為 0
舉例：
const state = myArr.includes(3) // 檢測(cè)數(shù)組myArr中是否存在元素3，返回一個(gè)布爾值state const state = myArr.includes(3, 3) // 從索引3開始檢測(cè)數(shù)組myArr中是否存在元素3，返回一個(gè)布爾值state
filter()方法：創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素
舉例：
const newArr = myArr.filter(function (item, index, arr) {
return item > 10
}) // 檢測(cè)數(shù)組myArr中所有元素都大于10的元素，返回一個(gè)新數(shù)組newArr
// 箭頭函數(shù)寫法
const newArr = myArr.filter((v, i, arr) => v > 10)
map()方法：返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值
map()方法按照原始數(shù)組元素順序依次處理元素
舉例：
const newArr = myArr.map(function (item, index, arr) {
return item * 10
}) // 數(shù)組myArr中所有元素都乘于10，返回一個(gè)新數(shù)組newArr
// 箭頭函數(shù)寫法
const newArr = myArr.map((v, i, arr) => v * 10)
舉例（用于數(shù)組嵌套對(duì)象的類型）：
const newArr = myArr.map(function (item, index, arr) {
return {
id: item.id,
newItem: '123'
}
}) // 處理數(shù)組myArr中指定的對(duì)象元素里面的元素或新元素，返回一個(gè)新數(shù)組newArr
// 箭頭函數(shù)寫法
const newArr = myArr.map((v, i, arr) => {
return {
id: v.id,
newItem: '123'
}
})
find() / findIndex()方法：返回通過(guò)測(cè)試（函數(shù)內(nèi)判斷）的數(shù)組的第一個(gè)元素的 值 / 索引。如果沒有符合條件的元素返回 undefined / -1
舉例：
const val = myArr.find(function (item, index, arr) {
return item > 10
}) // 返回?cái)?shù)組myArr中第一個(gè)大于10的元素的值val，沒有則返回undefined
const val = myArr.findIndex(function (item, index, arr) {
return item > 10
}) // 返回?cái)?shù)組myArr中第一個(gè)大于10的元素索引，沒有則返回-1
reduce()方法：返回一個(gè)新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值
這個(gè)方法接收兩個(gè)參數(shù)：要執(zhí)行的函數(shù)，傳遞給函數(shù)的初始值
要執(zhí)行的函數(shù)(total, currentValue, currentValue, arr)：
total：必選，初始值, 或者計(jì)算結(jié)束后的返回值
currentValue：必選，當(dāng)前元素；
currentValue：可選，當(dāng)前元素索引；
arr：可選，當(dāng)前元素所屬的數(shù)組對(duì)象
舉例1：
const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
console.log(pre, cur)
return pre + cur
})
console.log(sum)
// 輸出值分別為
// 1, 2
// 3, 3
// 6
舉例2（設(shè)置初始迭代值）：
const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
console.log(pre, cur)
return prev + cur
}, 2)
console.log(sum)
// 輸出值分別為
// 2, 1
// 3, 2
// 5, 3
// 8
應(yīng)用：
1.求和、求乘積
const myArr = [1, 2, 3, 4]
const result1 = myArr.reduce(function(pre, cur) {
return pre + cur
})
const result2 = myArr.reduce(function(pre, cur) {
return pre * cur
})
console.log(result1) // 6
console.log(result2) // 24
2.計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的次數(shù)
const myArr = ['liang','qi','qi','liang','ge','liang']
const arrResult = myArr.reduce((pre,cur) =>{
if(cur in pre){
pre[cur]++
}else{
pre[cur] = 1
}
return pre
},{})
console.log(arrResult) // 結(jié)果：{liang: 3, qi: 2, ge: 1}
3.對(duì)對(duì)象的屬性求和
const myArr = [
{
name: 'liangqi',
weigth: 55
},{
name: 'mingming',
weigth: 66
},{
name: 'lele',
weigth: 77
}
]
const result = myArr.reduce((a,b) =>{
a = a + b.weigth
return a
},0)
console.log(result) // 結(jié)果：198
Array.of()方法：用于將一組值轉(zhuǎn)化為新數(shù)組
舉例：
Array.of() // [] Array.of(undefined) // [undefined] Array.of(1) // [1] Array.of(1, 2) // [1, 2]
flat()方法：數(shù)組拍平方法也叫數(shù)組扁平化、數(shù)組拉平、數(shù)組降維，用于將嵌套的數(shù)組變成一維數(shù)組，返回一個(gè)新數(shù)組
舉例：
const myArr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]] console.log(myArr.flat(Infinity)) // [1, 2, 3, 4, 5, 12, 3, "zs", 7, 8, 9, 10, 11, 1, 2, 3, 4]
總結(jié)
到此這篇關(guān)于JS新手入門數(shù)組處理的文章就介紹到這了,更多相關(guān)JS數(shù)組處理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機(jī)制是不同的，以onKeyPress事件為例。2009-10-10
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東商品分類側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
可以用鼠標(biāo)拖動(dòng)的DIV實(shí)現(xiàn)思路及代碼
DIV可以拖動(dòng)的效果，想必大家都有見到過(guò)吧,在本文也為大家實(shí)現(xiàn)一個(gè)不錯(cuò)的可以用鼠標(biāo)拖動(dòng)的div,感興趣的各位不要錯(cuò)過(guò)2013-10-10
JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)3D圖片旋轉(zhuǎn)展示效果代碼,可實(shí)現(xiàn)頁(yè)面元素的3D旋轉(zhuǎn)變換效果,涉及JavaScript動(dòng)態(tài)數(shù)學(xué)運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2015-09-09
JavaScript代碼實(shí)現(xiàn)左右上下自動(dòng)晃動(dòng)自動(dòng)移動(dòng)
最近幾天做了一個(gè)項(xiàng)目，原來(lái)是用css3動(dòng)畫做的，由于不兼容IE，改成用js做了，特此分享給大家，供大家參考2016-04-04
這篇文章主要介紹了小程序如何自主實(shí)現(xiàn)攔截器,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
javascript制作sql轉(zhuǎn)換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉(zhuǎn)換為stringBuffer的小工具，使用方法很簡(jiǎn)單，吧寫好的sql語(yǔ)句只要格式化好之后放進(jìn)去就可以了，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
用JS替換字符串時(shí)。只能替換掉字符串中第一個(gè)匹配對(duì)象,有時(shí)候需要替換全部的字符，下文是具體的實(shí)現(xiàn)方法，大家可以參考下2014-12-12
最近沒有項(xiàng)目做，有點(diǎn)空余時(shí)間，小編把日常比較常用的js表單驗(yàn)證代碼整理分享到腳本之家平臺(tái)，供大家學(xué)習(xí)，需要的朋友參考下吧2016-04-04
這篇文章主要介紹了JavaScript生成.xls文件的代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12