目錄

• • 改變原數組的方法：push、unshift、pop、shift、sort、splice、reverse、
  • • push：向數組尾部添加一個數值，返回值是數組的長度
    • unshift：向頭部添加一個或多個數值，返回數組的長度
    • pop：刪除數組尾部元素，并且將刪除的元素返回，不接受指定參數
    • shift：刪除數組的第一個元素并將其返回，然后把所有隨后的元素下移一個位置來填補數組頭部的空缺
    • sort：將數組中的元素排序并返回排序后的數組，當不帶參數調用sort()時，數組元素以字母表順序排列
    • splice：在數組中插和或刪除元素。返回一個由刪除元素數組組成的數組，或者如果沒有刪除元素就返回一個空數組
    • reverse：將數組中的元素顛倒順序，返回逆序的數組。它不通過重新排列的元素創建新的數組，而是在原先的數組中重新排列他們
  • 不改變原數組的方法：concat、join、slice、reduce、forEach、map、filter、findIndex
  • • concat 創建并返回一個新數組
    • join 將數組中所有元素都轉化為字符串并連接在一起，返回最后生成的字符串
    • slice 返回指定數組的一個片段或子數組
    • reduce和reduceRight 將數組元素進行組合，生成單個值。也可以稱之為“注入”和“折疊”
    • map：將調用的數組的每個元素傳遞給指定的函數，并返回一個數組，它包含該函數的返回值
    • forEach ：從頭至尾遍歷數組，為每個元素調用指定的函數
    • • • 中斷forEach循環
    • filter：返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的：該函數返回true或false。調用判定函數就像調用forEach和map一樣。如果返回值為true或能轉化為true的值，那么傳遞給判定函數的元素就是這個子集的成員，它將被添加到一個作為返回值的數組中
    • find：找到第一個滿足測試函數的元素并返回那個元素的值，如果找不到則返回undefined
    • findIndex：返回傳入一個測試條件（函數）符合條件的數組第一個元素位置
  • 其他方法：some、every、indexOf、lastIndexOf
  • • some和every ：是數組的邏輯判定：它們對數組元素應用指定的函數進行判定，返回true或false
    • indexOf和lastIndexOf ：indexOf和lastIndexOf搜索整個數組中具有給定值的元素，返回找到的第一個元素的索引或者如果沒有找到就返回-1.indexOf從頭至尾搜索，而lastIndexOf則反向搜索。
  • 數組遍歷時刪除某項元素
  • • filter

改變原數組的方法：push、unshift、pop、shift、sort、splice、reverse、

push：向數組尾部添加一個數值，返回值是數組的長度

let arr = [1, 3, 5, 6, 7]console.log(arr.push(2)) // 6console.log(arr) // [1, 3, 5, 6, 7, 2]// 向尾部添加多個數值 arr.push(1, 2, 3) // [1, 3, 5, 6, 7, 1, 2, 3] // 若是寫成數組的形式，會把整個數組當成一個元素添加進數組的尾部； arr.push([4,5,6,7]) // [1, 3, 5, 6, 7, [4,5,6,7]]

unshift：向頭部添加一個或多個數值，返回數組的長度

let arr = [1, 3, 5, 6, 7]console.log(arr.unshift(2)) // 6console.log(arr) // [2, 1, 3, 5, 6, 7]//若是寫成數組的形式，會把整個數組當成一個元素添加進數組的頭部；arr.unshift([2,2,2]) // [[2, 2, 2],1, 3, 5, 6, 7]//向數組頭部添加多個值arr.unshift(3,4,5) // [3, 4, 5, 1, 3, 5, 6, 7]

pop：刪除數組尾部元素，并且將刪除的元素返回，不接受指定參數

let arr = [1, 3, 5, 6, 7] console.log(arr.pop()) // 7 console.log(arr) // [1, 3, 5, 6] // 不接受指定參數，仍舊刪除數組尾部的一個元素 arr.pop(3) // 6 console.log(arr) // [1, 3, 5]

shift：刪除數組的第一個元素并將其返回，然后把所有隨后的元素下移一個位置來填補數組頭部的空缺

let a = [1, 2, 3] console.log(a.shift()) // 1 (被刪除的數組元素) console.log(a) // [2, 3]

sort：將數組中的元素排序并返回排序后的數組，當不帶參數調用sort()時，數組元素以字母表順序排列

let a = new Array("banana","cherry","apple"); a.sort(); // a: ['apple', 'banana', 'cherry']

(一)為了按照其他方式而非字母順序進行數組排序，必須給sort方法傳遞一個比較函數，該函數決定了它的兩個參數在排好序的數組中的先后順序。假設第一個參數應該在前，比較函數應該返回一個小于0的數值。反之，假設第一個參數應該在后，函數應該返回一個大于0的數值。并且，假設兩個值相等(也就是說，它們的順序無關緊要)，函數應該返回0

let a = [33,4,1111,222]; a.sort(); //字母表順序:1111,222,33,4 a.sort(function(a,b){ //數值順序：4，33，222，1111return a-b; //根據順序，返回負數、0、正數 }) a.sort(function(a,b){return b-a}); //數值大小相反的順序 結合一下： function sortArr(isOrder = true) { // 默認為升序return function(a, b) {if (isOrder) {return a - b} else{return b - a}} } a.sort(sortArr()) // a：[4, 33, 222, 1111] a.sort(sortArr(false)) // a：[1111, 222, 33, 4]

(二)數組對象排序

let a = [{ id: 33, name: '夜雨聲煩' },{ id: 4, name: '石不轉' },{ id: 1111, name: '冰雨' },{ id: 222, name: '沐雨橙風' }, ]; function dateSort(property, isOrder = true) { //默認代表升序，false為降序return function(a, b) {let value1 = a[property]let value2 = b[property]if (isOrder) {return value1 - value2} else {return value2 - value1}} } a.sort(dateSort('id')) // a如下： 0: {id: 4, name: '石不轉'} 1: {id: 33, name: '夜雨聲煩'} 2: {id: 222, name: '沐雨橙風'} 3: {id: 1111, name: '冰雨'}a.sort(dateSort('id', false)) // a如下： 0: {id: 1111, name: '冰雨'} 1: {id: 222, name: '沐雨橙風'} 2: {id: 33, name: '夜雨聲煩'} 3: {id: 4, name: '石不轉'}

(三)對一個字符串數組執行不區分大小寫的字母表排序，比較函數首先將參數都轉化為小寫字符串(使用toLowerCase()方法)，再開始比較

let a = ['ant','Bug','cat','Dog']; a.sort(); // 區分大小寫的排序：['Bug','Dog','ant','cat'] a.sort(function(s,t){ //不區分大小寫的排序var a = s.toLowerCase();var b = s.toLowerCase();if(a < b) return -1;if(a > b) return 1;return 0; }) // => ['ant','Bug','cat','Dog']

splice：在數組中插和或刪除元素。返回一個由刪除元素數組組成的數組，或者如果沒有刪除元素就返回一個空數組

第一個參數指定了插入和(或)刪除的起始位置。
第二個參數指定了應該從數組中刪除的元素的個數。
如果省略第二個參數，從起始點開始到數組結尾的所有元素都將被刪除。
緊隨其后的任意個數的參數指定了需要插入到數組中的元素，從第一個參數指定的位置開始插入

let a = [1,2,3,4,5,6,7,8]; a.splice(4); //返回[5,6,7,8]; a是[1,2,3,4] a.splice(1,2); //返回[2,3]; a是[1,4] a.splice(1,1); //返回[4]; a是[1]// ----刪除并插入數組元素 let a = [1,2,3,4,5]; a.splice(2,0,'a','b'); //返回[]; a是[1,2,'a','b',3,4,5] a.splice(2,2,[1,2],3); //返回['a','b']; a是[1,2,[1,2],3,3,4,5]

將數組的某一項移動到首位

var layers = [3,4,2,5]; layers.unshift(layers.splice(2,1)[0]) console.log(layers); // => [2, 3, 4, 5]

reverse：將數組中的元素顛倒順序，返回逆序的數組。它不通過重新排列的元素創建新的數組，而是在原先的數組中重新排列他們

let a = [1,2,3]; a.reverse().join() // => "3,2,1"，并且現在的a是[3,2,1]

不改變原數組的方法：concat、join、slice、reduce、forEach、map、filter、findIndex

concat 創建并返回一個新數組

元素包括調用concat()的原始數組的元素和concat()的每個參數。如果這些參數中的任何一個自身是數組，則連接的是數組的元素，而非數組本身。

let a = [1,2,3]; a.concat(4,5) ; // 返回[1,2,3,4,5] a.concat([4,5]); //返回[1,2,3,4,5] a.concat([4,5],[6,7]) //返回[1,2,3,4,5,6,7] a.concat(4,[5,[6,7]]) //返回[1,2,3,4,5,[6,7]]

join 將數組中所有元素都轉化為字符串并連接在一起，返回最后生成的字符串

可以指定一個可選的字符串在生成的字符串中來分隔數組的各個元素。如果不指定分隔符，默認使用逗號

let a = [1,2,3]; a.join(); // => "1,2,3" a.join(" "); // => "1 2 3" a.join("") // => "123"; var b = new Array(10); //長度為10的空數組 b.join('-') // => '---------':9個連字號組成的字符串

slice 返回指定數組的一個片段或子數組

兩個參數分別指定了片段的開始和結束的位置。返回的數組包含第一個參數指定的位置和所有到但不含第二個參數指定的位置之間的所有數組元素。如果只指定一個參數，返回的數組將包含從開始位置到數組結束的所有元素。如果參數中出現負數，它表示相對于數組中最后一個元素的位置

let a = [1,2,3,4,5]; a.slice(0,3); //返回[1,2,3] a.slice(3); //返回[4,5] a.slice(1,-1); //返回[2,3,4] a.slice(-3,-2); //返回[3]

(一)純js 分頁

<div id="div"></div> <button onclick="jump(1)">第一頁</button> <button onclick="jump(2)">第二頁</button> <button onclick="jump(3)">第二頁</button> <script>let div = document.getElementById('div')let currentList = [1, 2, 3, 4, 5, 6, 7, 8, 9, '夜雨聲煩', '石不轉', '輝月', '沐雨橙風']let pageNum = 1let pageSize = 5jump()function jump(num=1) {pageNum = numlet array = currentList.slice((pageNum - 1) * pageSize, pageNum * pageSize)const HTMLString = `${array.map(element => {return `<p>${element}</p>`}).join('')}`div.innerHTML = HTMLString} </script>

reduce和reduceRight 將數組元素進行組合，生成單個值。也可以稱之為“注入”和“折疊”

需要兩個參數，第一個是執行化簡操作的函數，第二個(可選)的參數是一個傳遞給函數的初始值。

reduce使用的函數與foreach和map使用的函數不同。數組元素、元素的索引和數組本身將作為第2~4個參數傳遞給函數。第一個參數是到目前為止的化簡操作累積的結果。第一次調用函數時，第一個參數是一個初始值，它就是傳遞給reduce的第二個參數。在接下來的調用中，這個值就是上一次化簡函數的返回值。

在空數組上，不帶初始值參數調用reduce將導致類型錯誤異常。如果調用它的時候只有一個值–數組只有一個元素并且沒有指定初始值，或者有一個空數組并且指定一個初始值–reduce只是簡單地返回那個值而不會調用化簡函數

reduceRight的工作原理和reduce一樣，不同的是它按照數組索引從高到低(從右到左)處理數組，而不是從低到高

reduce和reduceRight都能接收一個可選的參數，它指定了化簡函數調用時的this關鍵字的值。可選的初始值參數仍然需要占一個位置

var a = [1,2,3,4,5]; var sum = a.reduce(function(x,y) {return x+y},0); //數組求和 var product = a.reduce(function(x,y) {return x*y}, 1);//數組求積 var max = a.reduce(function(x,y) {return (x>y)? x :y;});//求最大值sun：第一次調用化簡函數時的參數是0和1.將兩者相加并返回1.再次調用時的參數是1和2，他返回3.然后計算3+3=6、6+4=10，最后計算10+5=15；最后的值是15，reduce返回這個值

map：將調用的數組的每個元素傳遞給指定的函數，并返回一個數組，它包含該函數的返回值

傳遞給map的函數的調用方式和傳遞給forEach的函數的調用方式不一樣。但傳遞給map的函數應該有返回值

如果是稀疏數組，返回的也是相同方式的稀疏數組：它具有相同的長度，相同的缺失元素

let a = [1,2,3]; let b = a.map(function(x) {return x*x;}) //b是[1,4,9]

forEach ：從頭至尾遍歷數組，為每個元素調用指定的函數

傳遞的函數作為forEach的第一個參數。然后forEach使用三個參數調用該函數：數組元素、元素的索引和數組本身。

如果只關心數組元素的值，可以編寫只有一個參數的函數–額外的參數將忽略

var data = [1,2,3,4,5]; //要求和的數組 //計算數組元素的和值 var sum = 0; //初始為0 data.forEach(function(value) {sum += value})//將每個值累加到sum上 sum // => 15 //每個數組元素的值自加1 data.forEach(function(v,i,a) {a[i] = v+1;}) data // =>[2,3,4,5,6]

中斷forEach循環

break、continue、return均無法中斷forEach循環，break和continue會報錯，return只是中斷當前項，并沒有斷掉循環

let arr = [1, 2, 3, 4]arr.forEach(item => {if (item === 3) returnconsole.log(item)})

forEach無法在所有元素都傳遞給調用的函數之前終止遍歷：沒有像for循環中使用的相應的break語句。如果要提前終止，必須把forEach方法放在一個try中，并能拋出一個異常。如果forEach調用的函數拋出foreach.break異常，循環會提前終止；

let arr = [1, 2, 3, 4]try {arr.forEach((item) => {if (item === 3) throw('中斷啦')console.log(item)})}catch(e) {console.log(e)}

javascript權威指南中代碼如下

function foreach(a, f, t) {try {a.forEach(f,t);}catch(e) {if(e === foreach.break) return;else throw e;} } foreach.break = new Error("stopIteration");

filter：返回的數組元素是調用的數組的一個子集。傳遞的函數是用來邏輯判定的：該函數返回true或false。調用判定函數就像調用forEach和map一樣。如果返回值為true或能轉化為true的值，那么傳遞給判定函數的元素就是這個子集的成員，它將被添加到一個作為返回值的數組中

let a = [5,4,3,2,1]; smallvalue = a.filter(function(x) {return x<3;}); //[2,1] everyother = a.filter(function(x,i) {return i%2 == 0}); // [5,3,1]

filter會跳過稀疏數組中缺少的元素，它的返回數組總是稠密的。為了壓縮稀疏數組的空缺，代碼如下

let sparse = [1, , 3, 4, undefined, null, 6 ] var dense = sparse.filter(function() {return true;}); // dense：[1, 3, 4, undefined, null, 6]，下標為1的過濾掉了

甚至，壓縮空缺并刪除undefined和null元素，可以這樣使用filter

let a= [1, , 3, 4, undefined, null, 6 ] a = a.filter(function(x) {return x !== undefined && x != null;}) // a： [1, 3, 4, 6] 下標為1、4、5的元素都過濾掉了

find：找到第一個滿足測試函數的元素并返回那個元素的值，如果找不到則返回undefined

[1, 5, 10, 15].find(function(value, index, arr) { // 參數：當前值、當前的位置、原數組return value > 9; }) // 10

findIndex：返回傳入一個測試條件（函數）符合條件的數組第一個元素位置

為數組中的每個元素都調用一次函數執行：

當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之后的值不會再調用執行函數。

如果沒有符合條件的元素返回 -1；

注意: findIndex() 對于空數組，函數是不會執行的。

注意: findIndex() 并沒有改變數組的原始值。

find與findIndex都可以接受第二個參數，用來綁定回調函數中的this對象；都發現NaN，彌補了數組的indexOf的不足。

[NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0 findIndex()方法可以借助Object.is()方法做到識別NaN

find和findIndex都是從數組的0號位，依次向后檢查，ES2022新增findLast和findLastIndex從數組的最后一個成員開始，依次向前檢查，其他都保持不變

const array = [{ value: 1 },{ value: 2 },{ value: 3 },{ value: 4 } ]; // 尋找第一個value屬性為奇數的成員。結果，該成員是{ value: 3 }，位置是2號位 array.findLast(n => n.value % 2 === 1); // { value: 3 } array.findLastIndex(n => n.value % 2 === 1); // 2

其他方法：some、every、indexOf、lastIndexOf

some和every ：是數組的邏輯判定：它們對數組元素應用指定的函數進行判定，返回true或false

every方法：當且僅當對數組中的所有元素調用判定函數都返回true：

let a = [1,2,3,4,5]; a.every(function(x) {return x<10;}) // => true：所有的值 < 10 a.every(function(x) {return x % 2 === 0;}) // => false：不是所有的值都是偶數

some方法：當數組中至少有一個元素調用判定函數返回true，它就返回true，并且當且僅當數值中所有元素調用判定函數都返回false，它才返回false：

let a = [1,2,3,4,5]; a.some(function(x) {return x%2 === 0;}) // => true:a含有偶數值 a.some(isNaN) // => false:a不包含非數值元素

一旦every和some確認返回什么值它們就會停止遍歷數組元素。some在判定函數第一次返回true后就返回true，但如果判定函數一直返回false，它將會遍歷整個數組，every恰好相反：它在判定函數第一次返回false后就返回false，但如果判定函數一直返回true，它將會遍歷整個數組。在空數組上調用時，every返回true，some返回false

indexOf和lastIndexOf ：indexOf和lastIndexOf搜索整個數組中具有給定值的元素，返回找到的第一個元素的索引或者如果沒有找到就返回-1.indexOf從頭至尾搜索，而lastIndexOf則反向搜索。

indexOf和lastIndexOf方法不接收一個函數作為其參數。第一個參數是需要搜索的值，第二個參數是可選的：它指定數組中的一個索引，從那里開始搜索。如果省略該參數，indexOf從頭開始搜索，而lastIndexOf從末尾開始搜索。第二個參數也可以是負數，它代表相對數組末尾的偏移量

let a = [0,1,3,1,0]; a.indexOf(1) // => 1:a[1]是1 a.lastIndexOf(1) // => 3:a[3]是1 a.indexOf(4) // => -1:沒有值為4的元素

數組遍歷時刪除某項元素

let currentList = [{ id: 1, name: '夜雨聲煩', role: '劍客' },{ id: 3, name: '石不轉', role: '牧師' },{ id: 4, name: '沐雨橙風', role: '槍炮師' },{ id: 2, name: '索克薩爾', role: '術士' },{ id: 5, name: '一葉知秋', role: '法師' },{ id: 7, name: '李茂貞', role: '岐王' },{ id: 9, name: '水云姬', role: '女帝' },{ id: 8, name: '候卿', role: '尸祖' },{ id: 6, name: '趙玉真', role: '道士' },{ id: 10, name: '李寒衣', role: '劍仙' },{ id: 13, name: '鏡玄', role: '劍客' },{ id: 12, name: '須靈犀', role: '牧師' },{ id: 11, name: '蓋聶', role: '劍士' }]

filter

總結

以上是生活随笔為你收集整理的js数组方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。