22種JavaScript中數(shù)組常用API總結(jié)

更新時間：2023年05月29日 10:30:31 作者：牛哥說我不優(yōu)雅

在前端開發(fā)中，數(shù)組是一種常見且重要的數(shù)據(jù)結(jié)構(gòu)，本文主要介紹了前端中數(shù)組常用的API，包括添加、刪除、截取、合并、轉(zhuǎn)換等操作，希望對大家有所幫助

一、引言

在前端開發(fā)中，數(shù)組是一種常見且重要的數(shù)據(jù)結(jié)構(gòu)。數(shù)組提供了許多便捷的方法來操作和處理其中的數(shù)據(jù)。本文將簡單介紹前端中數(shù)組常用的API，包括添加、刪除、截取、合并、轉(zhuǎn)換等操作。

二、push() 方法和 pop() 方法

push()方法用于向數(shù)組末尾添加一個或多個元素，并返回修改后的數(shù)組的新長度。

const fruits = ['蘋果', '香蕉'];
const res = fruits.push('橘子', '西瓜');
console.log(fruits);  //[ '蘋果', '香蕉', '橘子', '西瓜' ]
console.log(res);     //4

pop() 方法用于刪除并返回數(shù)組的最后一個元素。

const fruits = ['蘋果', '香蕉', '橘子'];
const lastFruit = fruits.pop();
console.log(fruits);     // ['蘋果', '香蕉']
console.log(lastFruit); //橘子

三、shift() 方法和 unshift() 方法

shift() 方法用于刪除并返回數(shù)組的第一個元素。

const fruits = ['蘋果', '香蕉', '橘子'];
const firstFruit = fruits.shift();
console.log(fruits);      //[ '香蕉', '橘子' ]
console.log(firstFruit);  //蘋果

unshift() 方法用于向數(shù)組的開頭添加一個或多個元素，并返回修改后的數(shù)組的新長度。

const fruits = ['蘋果', '香蕉'];
const newLength = fruits.unshift('橘子', '西瓜');
console.log(fruits);        //[ '橘子', '西瓜', '蘋果', '香蕉' ]
console.log(newLength); //4

四、slice() 方法

slice() 方法用于從數(shù)組中截取指定位置的元素，返回一個新的數(shù)組。

語法是：array.slice(start, end)，其中，start和end都是可選參數(shù)，表示選取的元素的起始位置和結(jié)束位置。如果不傳入?yún)?shù)則默認選取整個數(shù)組。該方法返回的是一個新的數(shù)組，包含從start到end（不包括end）的元素。

const names = ['張三', '李四', '王五', '趙六'];
const slicedNames = names.slice(1, 3);
const slicedNames1 = names.slice();
const slicedNames2 = names.slice(0);
const slicedNames3 = names.slice(2);
const slicedNames4 = names.slice(3);
const slicedNames5 = names.slice(4);
//slice不改變原數(shù)組
console.log(names);          //[ '張三', '李四', '王五', '趙六' ] 
console.log(slicedNames);  //[ '李四', '王五' ]
console.log(slicedNames1); //[ '張三', '李四', '王五', '趙六' ] 
console.log(slicedNames2); //[ '張三', '李四', '王五', '趙六' ] 
console.log(slicedNames3); //[ '王五', '趙六' ]
console.log(slicedNames4); //[ '趙六' ]
console.log(slicedNames5); //[] 參數(shù)大于等于4時就輸出空數(shù)組

五、splice() 方法

splice() 方法用于從數(shù)組中刪除、替換或添加元素，并返回被刪除的元素組成的數(shù)組，它會直接修改原數(shù)組。

語法：array.splice(start, deleteCount, item1, item2, ...)

其中，start表示要修改的起始位置，deleteCount表示要刪除的元素個數(shù)，item1、item2等表示要添加的元素。如果deleteCount為0，則表示只添加元素，不刪除元素。

//實現(xiàn)刪除
let arr = [1,2,3,4,5]
console.log(arr.splice(0,2));  //[ 1, 2 ] 返回被刪除的元素
console.log(arr);  //[ 3, 4, 5 ]   該方法會改變原數(shù)組
//實現(xiàn)添加
let arr2 = [1,2,3,4,5]
console.log(arr2.splice(1,0,666,777)); //[] 返回空數(shù)組，沒有刪除元素
console.log(arr2);  //[ 1, 666, 777, 2, 3, 4, 5 ]  原數(shù)組改變了
// 實現(xiàn)替換
let arr3 = [1,2,3,4,5]
console.log(arr3.splice(2,1,"aaa","bbb")); //[ 3 ]  返回被刪除的一個元素
console.log(arr3);  //[ 1, 2, 'aaa', 'bbb', 4, 5 ]  可以添加字符串
let arr4 = [1,2,3,4,5]
console.log(arr4.splice(1,4,666)); //[ 2, 3, 4, 5 ]  返回被刪除的四個元素
console.log(arr4);  //[ 1, 666 ]

六、join() 方法

join() 方法用于將數(shù)組中的所有元素以指定的分隔符連接成一個字符串。

const fruits = ['蘋果', '香蕉', '橘子'];
const joinedString = fruits.join(',');
console.log(fruits);  //[ '蘋果', '香蕉', '橘子' ]
console.log(joinedString); //蘋果,香蕉,橘子

七、concat() 方法

concat() 方法用于合并兩個或多個數(shù)組，返回一個新的數(shù)組。

const fruits1 = ['蘋果', '橘子'];
const fruits2 = ['西瓜', '藍莓'];
const combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); //[ '蘋果', '橘子', '西瓜', '藍莓' ]

八、forEach() 方法

forEach() 方法用于對數(shù)組中的每個元素執(zhí)行一個回調(diào)函數(shù)。

const fruits = ['火龍果', '藍莓', '西瓜', '葡萄'];
fruits.forEach(fruit => {
  console.log(fruit); //火龍果 藍莓 西瓜 葡萄
});

九、map() 方法

map() 方法用于對數(shù)組中的每個元素執(zhí)行一個回調(diào)函數(shù)，并返回一個新的數(shù)組，新數(shù)組中的元素為回調(diào)函數(shù)的返回值。

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); //[ 1, 4, 9, 16, 25 ]

十、filter() 方法

filter() 方法用于篩選、過濾數(shù)組中符合條件的元素，并返回一個新的數(shù)組。

//篩選出偶數(shù)
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); //[ 2, 4 ]

十一、reduce() 方法

reduce() 方法是數(shù)組對象的一個方法，用于將數(shù)組中的所有元素按照指定的規(guī)則進行歸并計算，返回一個最終值。

語法：array.reduce(callback, initialValue)

該方法接收兩個參數(shù)，第一個參數(shù)是一個回調(diào)函數(shù)，第二個參數(shù)是一個初始值?；卣{(diào)函數(shù)中可以接收四個參數(shù)，分別是：

accumulator：累加器，用于存儲上一次回調(diào)函數(shù)的返回值或初始值。
currentValue：當前元素的值。
currentIndex：當前元素的索引。
array：數(shù)組對象本身。

initialValue是初始值，可選參數(shù)。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((acc, num) => {
  return acc + num
}, 10);
console.log(sum); //25
//如果初始值是設(shè)為0，則輸出15

十二、fill() 方法

JS中的fill方法可以填充一個數(shù)組中的所有元素，它會直接修改原數(shù)組。

語法：array.fill(value, start, end)

其中，value表示要填充的值，start和end表示要填充的起始位置和結(jié)束位置。如果不傳入start和end，則默認填充整個數(shù)組。該方法返回的是被修改后的原數(shù)組。

let arr = [1, 2, 3, 4, 5];
arr.fill(0);
console.log(arr); // [0, 0, 0, 0, 0]
//將數(shù)組中從位置2到位置4(不包括位置4)的元素都填充為6
arr.fill(6, 2, 4);
console.log(arr);  //[ 0, 0, 6, 6, 0 ]

十三、數(shù)組查找API

1.includes()方法

includes方法用于檢查數(shù)組中是否包含某個元素，如果包含則返回 true，否則返回 false。

與 indexOf() 方法不同，includes() 方法不支持指定起始位置，它從數(shù)組的開頭開始搜索。

const fruits = ['蘋果', '香蕉', '橘子', '西瓜', 1, 2, 3];
console.log(fruits.includes('橘子')); //true
console.log(fruits.includes('葡萄')); //false
console.log(fruits.includes(3));      //true
console.log(fruits.includes(4));      //false

2.indexOf()方法

需要注意的是，indexOf方法只會返回第一個匹配項的位置。如果數(shù)組中存在多個相同的元素，該方法只會返回第一個元素的位置。

此外，indexOf方法還可以接受一個可選的第二個參數(shù)，用于指定從哪個位置開始查找。

const fruits = ['蘋果', '藍莓', '橘子', '西瓜', '葡萄'];
console.log(fruits.indexOf('橘子', 1));  //2  返回元素下標
console.log(fruits.indexOf('橘子', 3));  //-1  沒有該元素
const arr = [1,2,3,4,5,6,7,6,6,5];
// 從下標6開始查找元素5
console.log(arr.indexOf(5,6)); //9

3.lastIndexOf()()方法

lastIndexOf() 方法用于查找數(shù)組中某個元素最后一次出現(xiàn)的索引（位置），如果找到則返回該索引值，否則返回 -1。

const fruits = ['火龍果', '橘子', '藍莓', '西瓜', '葡萄', '橘子'];
console.log(fruits.lastIndexOf('橘子')); //5
console.log(fruits.lastIndexOf('柚子')); //-1

4.findIndex()方法

findIndex() 方法用于查找數(shù)組中滿足條件的元素的索引，如果找到則返回該索引值，否則返回 -1。

const arr = [1, 2, 3, 4, 5, 6];
const index = arr.findIndex(num => num > 3);
console.log(index);   //3  返回第一個符合條件的元素的下標
const index2 = arr.findIndex(num => num > 10);
console.log(index2); //-1  不存在符合條件的元素

十四、sort() 方法

sort() 方法用于對數(shù)組進行原地排序，會直接修改原始數(shù)組，而不會創(chuàng)建新的數(shù)組。默認情況下，它將數(shù)組元素視為字符串，并按照 Unicode 碼點進行排序。但是，可以傳入自定義的比較函數(shù)來實現(xiàn)基于其他規(guī)則的排序。

比較函數(shù)：比較函數(shù)接收兩個參數(shù)，通常被稱為 a 和 b，表示進行比較的兩個元素。它應(yīng)該返回一個負數(shù)、零或正數(shù)，表示 a 應(yīng)該在 b 之前、與 b 相同位置還是在 b 之后。比較函數(shù)的返回值規(guī)則如下：

如果返回值小于 0，則 a 排在 b 前面。
如果返回值等于 0，則 a 和 b 的相對位置不變。
如果返回值大于 0，則 a 排在 b 后面。

const arr = [3, 1, 5, 2, 4];
arr.sort();
console.log(arr);  //[1, 2, 3, 4, 5]
//默認排序（按照 Unicode 碼點排序）
const arr = ['f', 'k', 'c', 'a', 'b'];
arr.sort();
console.log(arr);  //[ 'a', 'b', 'c', 'f', 'k' ]
//使用比較函數(shù)進行自定義排序
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => a - b);
console.log(arr);  //[ 1, 2, 10, 13, 26, 66 ]
const arr = [10, 2, 66, 26, 13, 1];
arr.sort((a, b) => b - a);
console.log(arr);  //[ 66, 26, 13, 10, 2, 1 ]

十五、reverse() 方法

reverse() 方法用于反轉(zhuǎn)數(shù)組中的元素順序，即將數(shù)組元素進行逆序排列。

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

十六、toString()和toLocaleString()方法

toString方法將數(shù)組轉(zhuǎn)換為一個由數(shù)組元素組成的字符串，元素之間用逗號分隔。

const arr = [1, 2, 3, 4, 5];
console.log(arr.toString());  //1,2,3,4,5
const arr2 = ['蘋果', '藍莓', '橘子', '西瓜', '葡萄'];
const arr3 = ['a', 'null', 'b', 'c', 'undefined', 'd', 'e']
console.log(arr2.toString());  //蘋果,藍莓,橘子,西瓜,葡萄
console.log(arr3.toString());  //a,null,b,c,undefined,d,e

toLocaleString方法將數(shù)組轉(zhuǎn)換為一個由數(shù)組元素組成的字符串，元素之間同樣用逗號分隔，但是它會根據(jù)當前環(huán)境的語言和地區(qū)設(shè)置來決定元素的格式。

//根據(jù)當前環(huán)境的語言和地區(qū)設(shè)置來決定元素的格式
const arr = [123456.789, new Date()];
//我補充寫作的時間
console.log(arr.toLocaleString()); //123,456.789,2023/5/29 07:57:19
const arr2 = [1000, 2000, 3000];
const str = arr2.toLocaleString();
console.log(str); //1,000,2,000,3,000

十七、Array.from() 方法

Array.from() 是 JavaScript 中一個用于從類數(shù)組或可迭代對象創(chuàng)建新數(shù)組的靜態(tài)方法。它接收一個可迭代對象或類數(shù)組的對象，并返回一個新的數(shù)組實例。

Array.from(iterable, mapFn, thisArg)

iterable: 必需，一個可迭代對象或類似數(shù)組的對象，用于創(chuàng)建新的數(shù)組。
mapFn (可選): 一個映射函數(shù)，用于對每個元素進行處理后返回新數(shù)組中的元素。
thisArg (可選): 可選參數(shù)，執(zhí)行 mapFn 函數(shù)時的 this 值。

//使用字符串創(chuàng)建數(shù)組
const str = "Hello";
const arr = Array.from(str);
console.log(arr); //[ 'H', 'e', 'l', 'l', 'o' ]

//使用類似數(shù)組的對象創(chuàng)建數(shù)組
const obj = {
  0: "榴蓮",
  1: "牛油果",
  2: "藍莓",
  length: 3
};
const arr = Array.from(obj);
console.log(arr);  //[ '榴蓮', '牛油果', '藍莓' ]

//使用映射函數(shù)處理數(shù)組元素
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = Array.from(numbers, num => num * 2);
console.log(doubledNumbers); //[ 2, 4, 6, 8, 10 ]

十八、最后的話

本文介紹了前端中數(shù)組常用的 API，涵蓋了添加、刪除、截取、合并、轉(zhuǎn)換等常見操作。熟練掌握這些方法可以提高一定的開發(fā)效率。在實際開發(fā)中，請根據(jù)具體需求選擇適合的數(shù)組方法。

以上就是22種JavaScript中數(shù)組常用API總結(jié)的詳細內(nèi)容，更多關(guān)于JavaScript數(shù)組的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

22種JavaScript中數(shù)組常用API總結(jié)

目錄

一、引言

二、push() 方法和 pop() 方法

三、shift() 方法和 unshift() 方法

四、slice() 方法

五、splice() 方法

六、join() 方法

七、concat() 方法

八、forEach() 方法

九、map() 方法

十、filter() 方法

十一、reduce() 方法

十二、fill() 方法

十三、數(shù)組查找API

1.includes()方法

2.indexOf()方法

3.lastIndexOf()()方法

4.findIndex()方法

十四、sort() 方法

十五、reverse() 方法

十六、toString()和toLocaleString()方法

十七、Array.from() 方法

十八、最后的話

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

22種JavaScript中數(shù)組常用API總結(jié)

目錄

一、引言

二、push() 方法和 pop() 方法

三、shift() 方法和 unshift() 方法

四、slice() 方法

五、splice() 方法

六、join() 方法

七、concat() 方法

八、forEach() 方法

九、map() 方法

十、filter() 方法

十一、reduce() 方法

十二、fill() 方法

十三、數(shù)組查找API

1.includes()方法

2.indexOf()方法

3.lastIndexOf()()方法

4.findIndex()方法

十四、sort() 方法

十五、reverse() 方法

十六、toString()和toLocaleString()方法

十七、Array.from() 方法

十八、最后的話

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、引言

二、push() 方法和 pop() 方法

三、shift() 方法和 unshift() 方法

四、slice() 方法

六、join() 方法

七、concat() 方法

八、forEach() 方法

九、map() 方法

十一、reduce() 方法

十二、fill() 方法

十四、sort() 方法

十五、reverse() 方法

十六、toString()和toLocaleString()方法

十七、Array.from() 方法

十八、最后的話