JS入門數(shù)組處理實用方法總結(jié)

2021-4-7    前端達(dá)人

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

舉例:

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

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

舉例:

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

注意:該方法不會改變現(xiàn)有的數(shù)組,所以可以和空數(shù)組合并實現(xiàn)復(fù)制舊數(shù)組,在操作新數(shù)組數(shù)據(jù)時不污染舊數(shù)組數(shù)據(jù)

sort() 方法:用于對數(shù)組的元素進(jìn)行排序

如果調(diào)用該方法時沒有使用參數(shù),將按字母順序?qū)?shù)組中的元素進(jìn)行排序,說得更精確點,是按照字符編碼的順序進(jìn)行排序。要實現(xiàn)這一點,首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串(如有必要),以便進(jìn)行比較

舉例:

myArr.sort() // 按字母排序
myArr.sort(function(a, b) {
    return a - b
}) // 按數(shù)字升序,降序為b - a
// 箭頭函數(shù)寫法
myArr.sort((a, b) => a - b)  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

舉例:

myArr.reverse()  
  • 1

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

舉例:

myArr.push(item1, item2, ..., itemN)
myArr.unshift(item1, item2, ..., itemN)  
  • 1
  • 2

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

舉例:

myArr.shift()  
  • 1

pop()方法:刪除數(shù)組的一個元素(默認(rèn)最后一個元素),并且返回該元素的值

舉例:

myArr.pop() // 刪除數(shù)組最后一個元素
myArr.pop(1) // 刪除數(shù)組中索引為1的元素  
  • 1
  • 2

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

myArr.splice(index, count, item1, item2, ..., itemN)
// index 必需。整數(shù),規(guī)定添加/刪除項目的位置,使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置
// count 必需。要刪除的項目數(shù)量。如果設(shè)置為 0,則不會刪除項目
// item1, item2, ..., itemN 可選。向數(shù)組添加的新項目  
  • 1
  • 2
  • 3
  • 4

forEach()方法:方法用于調(diào)用數(shù)組的每個元素,并將元素傳遞給回調(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 })  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

注意:以下方法均不會對空數(shù)組進(jìn)行檢測,不會改變原始數(shù)組

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

舉例:

myArr.indexOf(item)  
  • 1

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

slice()方法:可提取字符串的某個部分,并以新的字符串返回被提取的部分(淺拷貝數(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ù)組末尾(包括最后一個元素)  
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

舉例:

const state = myArr.every(function (item, index, arr) {
    return item > 10
}) // 檢測數(shù)組myArr的所有元素是否都大于10,返回一個布爾值state
// 箭頭函數(shù)寫法
const state = myArr.every((v, i, arr) => v > 10)  
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

舉例:

const state = myArr.some(function (item, index, arr) {
    return item > 10
}) // 檢測數(shù)組myArr中是否存在元素大于10,返回一個布爾值state
// 箭頭函數(shù)寫法
const state = myArr.some((v, i, arr) => v > 10)  
  • 1
  • 2
  • 3
  • 4
  • 5

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

注意:includes() 方法區(qū)分大小寫
參數(shù):
searchvalue:必需,要查找的值
start:可選,設(shè)置從那個位置開始查找,默認(rèn)為 0

舉例:

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

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

舉例:

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

map()方法:返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值

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

舉例:

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

舉例(用于數(shù)組嵌套對象的類型):

const newArr = myArr.map(function (item, index, arr) {
    return {
        id: item.id,
        newItem: '123'
    }
}) // 處理數(shù)組myArr中指定的對象元素里面的元素或新元素,返回一個新數(shù)組newArr
// 箭頭函數(shù)寫法
const newArr = myArr.map((v, i, arr) => {
    return {
        id: v.id,
        newItem: '123'
    }
})  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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

舉例:

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

const val = myArr.findIndex(function (item, index, arr) {
    return item > 10
}) // 返回數(shù)組myArr中第一個大于10的元素索引,沒有則返回-1  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

reduce()方法:返回一個新數(shù)組,數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值

這個方法接收兩個參數(shù):要執(zhí)行的函數(shù),傳遞給函數(shù)的初始值
要執(zhí)行的函數(shù)(total, currentValue, currentValue, arr):
total:必選,初始值, 或者計算結(jié)束后的返回值
currentValue:必選,當(dāng)前元素;
currentValue:可選,當(dāng)前元素索引;
arr:可選,當(dāng)前元素所屬的數(shù)組對象

舉例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  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

舉例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  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

應(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.計算數(shù)組中每個元素出現(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.對對象的屬性求和
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  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41

Array.of()方法:用于將一組值轉(zhuǎn)化為新數(shù)組

舉例:

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

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


轉(zhuǎn)自:csdn論壇, 作者:Assam180


藍(lán)藍(lán)設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至:

日歷

鏈接

個人資料

存檔