快捷導(dǎo)航

javascript中一些數(shù)組常用的API總結(jié)

更新時(shí)間：2023年09月15日 09:01:30 作者：前端技術(shù)棧

Js中數(shù)組是一個(gè)重要的數(shù)據(jù)結(jié)構(gòu),它相比于字符串有更多的方法,本篇文章總結(jié)了一些數(shù)組中常用的API,我們把它們分成兩類,一類是會改變原始數(shù)組,一類是不會改變原始數(shù)組,感興趣的小伙伴可以學(xué)習(xí)一下

前言

Js中數(shù)組是一個(gè)重要的數(shù)據(jù)結(jié)構(gòu)，它相比于字符串有更多的方法，在一些算法題中我們經(jīng)常需要將字符串轉(zhuǎn)化為數(shù)組，使用數(shù)組里面的API進(jìn)行操作。本篇文章總結(jié)了一些數(shù)組中常用的API，我們把它們分成兩類，一類是會改變原始數(shù)組，一類是不會改變原始數(shù)組；一起來看一下吧。

會改變原數(shù)組

Js中數(shù)組有一些方法可以直接改變原始數(shù)組。

push()

push()方法是在數(shù)組的末尾添加一個(gè)或多個(gè)元素，并且返回改變后數(shù)組的長度。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.push(6, 7)
console.log(res);//7
console.log(arr);//[1, 2, 3, 4, 5, 6, 7]

pop()和shift()

這兩個(gè)方法都是刪除數(shù)組中的元素，pop()方法是將數(shù)組中最后一個(gè)元素刪除，shift()方法是將數(shù)組中第一個(gè)元素從數(shù)組中刪除，都返回刪除的那一項(xiàng)。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.pop()
console.log(res);//5
console.log(arr);//[ 1, 2, 3, 4 ]
let res2 = arr.shift()
console.log(res2);//1
console.log(arr);//[ 2, 3, 4 ]

unshift()

unshift()方法向數(shù)組的開頭添加一個(gè)或多個(gè)元素，并且返回改變后數(shù)組的長度。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.unshift(0, 11)
console.log(res);//7
console.log(arr);//[ 0, 11, 1, 2, 3,  4, 5]

splice()

splice()方法添加或刪除數(shù)組中的元素，有返回值，以數(shù)組形式返回刪除的元素，沒有刪除則返回空數(shù)組。

用法：splice可以接收三個(gè)參數(shù), splice(index, n, x)

index: 要刪除或插入元素的位置, 該參數(shù)是必需的。

n: 要刪除的元素個(gè)數(shù), 如果不想刪除任何元素, 可以將該參數(shù)設(shè)置為0。

x:要插入到數(shù)組中的新元素,可以是多個(gè)x1,x2,x3...如果不想插入任何元素,則可以省略這些參數(shù)。

let arr = [1, 2, 3, 4, 5]
let res = arr.splice(1, 2, 6, 7, 8)
console.log(res);//[ 2, 3 ]
console.log(arr);//[ 1, 6, 7, 8, 4, 5 ]
let res2 = arr.splice(1, 0, 8)
console.log(res2);//[]
console.log(arr);//[1, 8, 6, 7, 8, 4, 5]

sort()

sort()方法可以對數(shù)組的元素進(jìn)行排序，并且返回出排序后的數(shù)組。

用法：sort()默認(rèn)為升序排列。直接寫sort()只能處理10以內(nèi)的數(shù)字排序,處理10以上的我們需要傳遞一個(gè)參數(shù)，這個(gè)參數(shù)必須是函數(shù)，函數(shù)通過返回一個(gè)值來決定這兩個(gè)值需不需要交換位置。如果a-b > 0,則a和b交換位置。

 let arr = [10, 12, 11, 19, 13, 15, 6];
let res1 = arr.sort(function (a, b) { return a - b; });   //實(shí)現(xiàn)由小到大
console.log(res1);//[6, 10, 11, 12,13, 15, 19]
let res2 = arr.sort(function (a, b) { return b - a; })   //實(shí)現(xiàn)由大到小
console.log(res2);//[19, 15, 13, 12,11, 10,  6]

reverse()

reverse()方法可以顛倒數(shù)組中元素的順序，并且返回顛倒后的數(shù)組。

用法：

let arr = [1, 2, 3, 4, 5]
let res = arr.reverse()
console.log(res);//[ 5, 4, 3, 2, 1 ]
console.log(arr);//[ 5, 4, 3, 2, 1 ]

不會改變原數(shù)組

Js中數(shù)組有一些方法不會直接改變原始數(shù)組，會返回出一個(gè)新的數(shù)組。

slice()

slice() 方法可提取數(shù)組的某些元素，并以新的數(shù)組返回被提取的元素。

用法：slice(n,m) 從索引n（包含n）開始找到索引m(不包含m)處。把找到的內(nèi)容作為一個(gè)新的數(shù)組返回，原有數(shù)組是不改變的。

let arr = [1, 2, 3, 4, 5]
let res = arr.slice(2, 4)
console.log(res);//[ 3, 4 ]
console.log(arr);//[ 1, 2, 3, 4, 5 ]
slice(n)// 從索引n（包含n）開始找到末尾
slice(0)  // slice()  將原來數(shù)組原封不動的復(fù)制一份

concat()

concat ()方法用于連接兩個(gè)或多個(gè)數(shù)組，該方法不會改變現(xiàn)有的數(shù)組，而僅僅會返回被連接數(shù)組的一個(gè)副本。

用法：

let arr1 = [1, 2, 3, 4, 5]
let arr2 = [7, 8]
let res = arr1.concat(arr2)
console.log(res);//[ 1, 2, 3, 4, 5, 7, 8]
console.log(arr1);//[ 1, 2, 3, 4, 5 ]
console.log(arr2);//[ 7, 8 ]

filter()

filter()用于對數(shù)組進(jìn)行過濾。

用法：它創(chuàng)建一個(gè)新數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。其中函數(shù)function 為必須，數(shù)組中的每個(gè)元素都會執(zhí)行這個(gè)函數(shù)。且如果返回值為true，則該元素被保留；函數(shù)可以接受三個(gè)參數(shù)（item, index, arr），第一個(gè)參數(shù)item也為必須，代表當(dāng)前元素的值，第二個(gè)參數(shù)為當(dāng)前元素的索引值，第三個(gè)參數(shù)為數(shù)組本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
const newArr = arr.filter((item, index, arr) => {
    return item.age > 19
})
console.log(newArr);//[ { name: 'son', age: 20 }, { name: 'so', age: 21 } ]
console.log(arr);//[ { name: 'song', age: 18 },{ name: 'Y', age: 19 },
                 //{ name: 'son', age: 20 }, { name: 'so', age: 21 }]

forEach()

forEach()方法用于調(diào)用數(shù)組的每個(gè)元素，并將元素傳遞給回調(diào)函數(shù)。

用法：回調(diào)函數(shù)中可以接受三個(gè)參數(shù)（item,index,arr），第一個(gè)參數(shù)item也為必須，代表當(dāng)前元素的值，第二個(gè)參數(shù)為當(dāng)前元素的索引值，第三個(gè)參數(shù)為數(shù)組本身。

const arr = [
    { name: 'song', age: 18 },
    { name: 'Y', age: 19 },
    { name: 'son', age: 20 },
    { name: 'so', age: 21 }
]
arr.my_forEach((item, index, arr) => {
    console.log(item.age);//18 19 20 21
})
console.log(arr);//[ { name: 'song', age: 18 }, { name: 'Y', age: 19 },
    //{ name: 'son', age: 20 },{ name: 'so', age: 21 } ]

toString

toString 把數(shù)組中的每一項(xiàng)拿出來，用逗號隔開，組成字符串，原有數(shù)組不變。

用法：

let arr = ['song', 'Y', 'son', 'so']
let res = arr.toString()
console.log(res);//'song,Y,son,so'
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]

join(分隔符）

join(分隔符）把數(shù)組中的每一項(xiàng)拿出來，用指定的分隔符隔開，原有數(shù)組不變。

用法：

let arr = ['song', 'Y', 'son', 'so']
let res = arr.join(',')
console.log(res);//'song,Y,son,so'
console.log(res.length);//13
console.log(arr);//[ 'song', 'Y', 'son', 'so' ]
console.log(arr.length);//4