JS新手入門數組處理的實用方法匯總

join()方法:將數組中所有元素通過指定分隔符連接成一個字符串

舉例:

myArr.join('-') // 用'-'符號拼接

concat()方法:將兩個數組或多個數組合並成一個數組

舉例:

myArr.concat(arr1, arr2, ..., arrN)

註意:該方法不會改變現有的數組,所以可以和空數組合並實現復制舊數組,在操作新數組數據時不污染舊數組數據

sort() 方法:用於對數組的元素進行排序

如果調用該方法時沒有使用參數,將按字母順序對數組中的元素進行排序,說得更精確點,是按照字符編碼的順序進行排序。要實現這一點,首先應把數組的元素都轉換成字符串(如有必要),以便進行比較

舉例:

myArr.sort() // 按字母排序
myArr.sort(function(a, b) {
	return a - b
}) // 按數字升序,降序為b - a
// 箭頭函數寫法
myArr.sort((a, b) => a - b)

reverse() 方法:用於顛倒數組中元素的順序

舉例:

myArr.reverse()

push() / unshift()方法:向數組的末尾 / 開頭添加一個或多個元素,並返回新的長度

舉例:

myArr.push(item1, item2, ..., itemN)
myArr.unshift(item1, item2, ..., itemN)

shift()方法:刪除數組的第一個元素,並返回第一個元素的值

舉例:

myArr.shift()

pop()方法:刪除數組的一個元素(默認最後一個元素),並且返回該元素的值

舉例:

myArr.pop() // 刪除數組最後一個元素
myArr.pop(1) // 刪除數組中索引為1的元素

splice()方法:向/從數組中添加/刪除項目,然後返回被刪除的項目

myArr.splice(index, count, item1, item2, ..., itemN)
// index 必需。整數,規定添加/刪除項目的位置,使用負數可從數組結尾處規定位置
// count 必需。要刪除的項目數量。如果設置為 0,則不會刪除項目
// item1, item2, ..., itemN 可選。向數組添加的新項目

forEach()方法:方法用於調用數組的每個元素,並將元素傳遞給回調函數(相當於for循環)

舉例:

myArr.forEach(function (item, index, arr) {
 if (index === 3) {
 item = 123
 } 
}) // 循環數組,將索引為3的元素值更改為123
// 箭頭函數寫法
myArr.forEach((v, i, arr) => if (i === 3) { v = 123 })

註意:以下方法均不會對空數組進行檢測,不會改變原始數組

indexOf()方法:查找數組是否存在某個元素,返回下標,沒有則返回-1

舉例:

myArr.indexOf(item)

註意:indexOf() 方法對大小寫敏感!

slice()方法:可提取字符串的某個部分,並以新的字符串返回被提取的部分(淺拷貝數組的元素)

舉例:

const newArr = myArr.slice(0, 1)
// 截取數組myArr索引從0到1的部分元素
// 參數:
// begin(可選): 索引數值,接受負值,從該索引處開始提取原數組中的元素,默認值為0。
// end(可選):索引數值(不包括),接受負值,在該索引處前結束提取原數組元素,默認值為數組末尾(包括最後一個元素)

every()方法:用於檢測數組中的元素是否滿足指定條件(函數提供)(如某個值是否都為true)

如果有一個元素不滿足,則整個表達式返回 false,且停止檢測;如果所有元素都滿足條件,則返回 true

舉例:

const state = myArr.every(function (item, index, arr) {
 return item > 10
}) // 檢測數組myArr的所有元素是否都大於10,返回一個佈爾值state
// 箭頭函數寫法
const state = myArr.every((v, i, arr) => v > 10)

some()方法:用於檢測數組中的元素是否滿足指定條件(函數提供)(如某個值是否都為true)

如果有一個元素滿足,則整個表達式返回 true ,且停止檢測;如果沒有滿足條件的元素,則返回false

舉例:

const state = myArr.some(function (item, index, arr) {
 return item > 10
}) // 檢測數組myArr中是否存在元素大於10,返回一個佈爾值state
// 箭頭函數寫法
const state = myArr.some((v, i, arr) => v > 10)

includes()方法:用於判斷數組是否包含指定的值,如果找到匹配的值則返回 true,否則返回 false

註意:includes() 方法區分大小寫

參數:
searchvalue:必需,要查找的值

start:可選,設置從那個位置開始查找,默認為 0

舉例:

const state = myArr.includes(3) // 檢測數組myArr中是否存在元素3,返回一個佈爾值state
const state = myArr.includes(3, 3) // 從索引3開始檢測數組myArr中是否存在元素3,返回一個佈爾值state

filter()方法:創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素

舉例:

const newArr = myArr.filter(function (item, index, arr) {
 return item > 10
}) // 檢測數組myArr中所有元素都大於10的元素,返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.filter((v, i, arr) => v > 10)

map()方法:返回一個新數組,數組中的元素為原始數組元素調用函數處理後的值

map()方法按照原始數組元素順序依次處理元素

舉例:

const newArr = myArr.map(function (item, index, arr) {
 return item * 10
}) // 數組myArr中所有元素都乘於10,返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.map((v, i, arr) => v * 10)

舉例(用於數組嵌套對象的類型):

const newArr = myArr.map(function (item, index, arr) {
 return {
 id: item.id,
 newItem: '123'
 }
}) // 處理數組myArr中指定的對象元素裡面的元素或新元素,返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.map((v, i, arr) => {
 return {
 id: v.id,
 newItem: '123'
 }
})

find() / findIndex()方法:返回通過測試(函數內判斷)的數組的第一個元素的 值 / 索引。如果沒有符合條件的元素返回 undefined / -1

舉例:

const val = myArr.find(function (item, index, arr) {
 return item > 10
}) // 返回數組myArr中第一個大於10的元素的值val,沒有則返回undefined

const val = myArr.findIndex(function (item, index, arr) {
 return item > 10
}) // 返回數組myArr中第一個大於10的元素索引,沒有則返回-1

reduce()方法:返回一個新數組,數組中的元素為原始數組元素調用函數處理後的值

這個方法接收兩個參數:要執行的函數,傳遞給函數的初始值

要執行的函數(total, currentValue, currentValue, arr):

total:必選,初始值, 或者計算結束後的返回值

currentValue:必選,當前元素;

currentValue:可選,當前元素索引;

arr:可選,當前元素所屬的數組對象

舉例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(設置初始迭代值):

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

應用:

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.計算數組中每個元素出現的次數

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) // 結果:{liang: 3, qi: 2, ge: 1}

3.對對象的屬性求和

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) // 結果:198

Array.of()方法:用於將一組值轉化為新數組

舉例:

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]

flat()方法:數組拍平方法也叫數組扁平化、數組拉平、數組降維,用於將嵌套的數組變成一維數組,返回一個新數組

舉例:

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]

總結

到此這篇關於JS新手入門數組處理的文章就介紹到這瞭,更多相關JS數組處理內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!