join()方法：將數組中所有元素通過指定分隔符連接成一個字符串
舉例：
|
1
|
myArr.join('-') // 用'-'符號拼接 |
concat()方法：將兩個數組或多個數組合并成一個數組
舉例：
|
1
|
myArr.concat(arr1, arr2, ..., arrN) |
注意：該方法不會改變現有的數組，所以可以和空數組合并實現復制舊數組，在操作新數組數據時不污染舊數組數據
sort() 方法：用于對數組的元素進行排序
如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較
舉例：
|
1
2
3
4
5
6
|
myArr.sort() // 按字母排序myArr.sort(function(a, b) { return a - b}) // 按數字升序，降序為b - a// 箭頭函數寫法myArr.sort((a, b) => a - b) |
reverse() 方法：用于顛倒數組中元素的順序
舉例：
|
1
|
myArr.reverse() |
push() / unshift()方法：向數組的末尾 / 開頭添加一個或多個元素，并返回新的長度
舉例：
|
1
2
|
myArr.push(item1, item2, ..., itemN)myArr.unshift(item1, item2, ..., itemN) |
shift()方法：刪除數組的第一個元素，并返回第一個元素的值
舉例：
|
1
|
myArr.shift() |
pop()方法：刪除數組的一個元素（默認最后一個元素），并且返回該元素的值
舉例：
|
1
2
|
myArr.pop() // 刪除數組最后一個元素myArr.pop(1) // 刪除數組中索引為1的元素 |
splice()方法：向/從數組中添加/刪除項目，然后返回被刪除的項目
|
1
2
3
4
|
myArr.splice(index, count, item1, item2, ..., itemN)// index 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置// count 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目// item1, item2, ..., itemN 可選。向數組添加的新項目 |
forEach()方法：方法用于調用數組的每個元素，并將元素傳遞給回調函數(相當于for循環)
舉例：
|
1
2
3
4
5
6
7
|
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
舉例：
|
1
|
myArr.indexOf(item) |
注意：indexOf() 方法對大小寫敏感！
slice()方法：可提取字符串的某個部分，并以新的字符串返回被提取的部分（淺拷貝數組的元素）
舉例：
|
1
2
3
4
5
|
const newArr = myArr.slice(0, 1)// 截取數組myArr索引從0到1的部分元素// 參數:// begin(可選): 索引數值,接受負值，從該索引處開始提取原數組中的元素,默認值為0。// end(可選):索引數值(不包括),接受負值，在該索引處前結束提取原數組元素，默認值為數組末尾(包括最后一個元素) |
every()方法：用于檢測數組中的元素是否滿足指定條件（函數提供）(如某個值是否都為true)
如果有一個元素不滿足，則整個表達式返回 false，且停止檢測；如果所有元素都滿足條件，則返回 true
舉例：
|
1
2
3
4
5
|
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
舉例：
|
1
2
3
4
5
|
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
舉例：
|
1
2
|
const state = myArr.includes(3) // 檢測數組myArr中是否存在元素3，返回一個布爾值stateconst state = myArr.includes(3, 3) // 從索引3開始檢測數組myArr中是否存在元素3，返回一個布爾值state |
filter()方法：創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素
舉例：
|
1
2
3
4
5
|
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()方法按照原始數組元素順序依次處理元素
舉例：
|
1
2
3
4
5
|
const newArr = myArr.map(function (item, index, arr) { return item * 10}) // 數組myArr中所有元素都乘于10，返回一個新數組newArr// 箭頭函數寫法const newArr = myArr.map((v, i, arr) => v * 10) |
舉例（用于數組嵌套對象的類型）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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
舉例：
|
1
2
3
4
5
6
7
|
const val = myArr.find(function (item, index, arr) { return item > 10}) // 返回數組myArr中第一個大于10的元素的值val，沒有則返回undefinedconst val = myArr.findIndex(function (item, index, arr) { return item > 10}) // 返回數組myArr中第一個大于10的元素索引，沒有則返回-1 |
reduce()方法：返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值
這個方法接收兩個參數：要執行的函數，傳遞給函數的初始值
要執行的函數(total, currentValue, currentValue, arr)：
total：必選，初始值, 或者計算結束后的返回值
currentValue：必選，當前元素；
currentValue：可選，當前元素索引；
arr：可選，當前元素所屬的數組對象
舉例1：
|
1
2
3
4
5
6
7
8
9
10
|
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（設置初始迭代值）：
|
1
2
3
4
5
6
7
8
9
10
11
|
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.求和、求乘積
|
1
2
3
4
5
6
7
8
9
|
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) // 6console.log(result2) // 24 |
2.計算數組中每個元素出現的次數
|
1
2
3
4
5
6
7
8
9
10
|
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.對對象的屬性求和
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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()方法：用于將一組值轉化為新數組
舉例：
|
1
2
3
4
|
Array.of() // []Array.of(undefined) // [undefined]Array.of(1) // [1]Array.of(1, 2) // [1, 2] |
flat()方法：數組拍平方法也叫數組扁平化、數組拉平、數組降維，用于將嵌套的數組變成一維數組，返回一個新數組
舉例：
|
1
2
|
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數組處理內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://blog.csdn.net/Assam1997/article/details/115443456
