前端JavaScript數(shù)組方法總結(非常詳細!)
更新時間：2025年04月14日 09:05:54 作者：粉色的卡皮巴拉
這篇文章主要介紹了JavaScript中數(shù)組對象的常用方法,包括數(shù)組的基本操作、查找、過濾、排序、遍歷等方法,并提供了每個方法的語法和示例,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
一、主要的數(shù)組方法：
join()：用指定的分隔符將數(shù)組每一項拼接為字符串push()：向數(shù)組的末尾添加新元素pop()：刪除數(shù)組的最后一項shift()：刪除數(shù)組的第一項unshift()：向數(shù)組首位添加新元素slice()：按照條件查找出其中的部分元素splice()：對數(shù)組進行增刪改fill(): 方法能使用特定值填充數(shù)組中的一個或多個元素filter():“過濾”功能concat()：用于連接兩個或多個數(shù)組indexOf()：檢測當前值在數(shù)組中第一次出現(xiàn)的位置索引lastIndexOf()：檢測當前值在數(shù)組中最后一次出現(xiàn)的位置索引every()：判斷數(shù)組中每一項都是否滿足條件some()：判斷數(shù)組中是否存在滿足條件的項includes()：判斷一個數(shù)組是否包含一個指定的值sort()：對數(shù)組的元素進行排序reverse()：對數(shù)組進行倒序forEach()：ES5 及以下循環(huán)遍歷數(shù)組每一項map()：ES6 循環(huán)遍歷數(shù)組每一項copyWithin():用于從數(shù)組的指定位置拷貝元素到數(shù)組的另一個指定位置中find():返回匹配的值findIndex():返回匹配位置的索引toLocaleString()、toString():將數(shù)組轉換為字符串flat()、flatMap()：扁平化數(shù)組entries() 、keys() 、values():遍歷數(shù)組
二、各類方法的具體使用
1.join()
在 JavaScript 里，join() 是數(shù)組對象的一個方法，其作用是把數(shù)組里的所有元素連接成一個字符串。你可以指定一個分隔符，該分隔符會被 插入到數(shù)組元素之間。若不指定分隔符，默認會使用逗號 ‘,’。
語法：
arr.join([separator])
arr：需要連接元素的數(shù)組。separator（可選）：用于分隔數(shù)組元素的字符串。若省略該參數(shù)，數(shù)組元素會用逗號分隔。
示例：
//示例 1：使用默認分隔符
const fruits = ['Apple', 'Banana', 'Cherry'];
const result = fruits.join();
console.log(result);
//Apple,Banana,Cherry
//示例 2：指定分隔符
const numbers = [1, 2, 3, 4, 5];
const customResult = numbers.join('-');
console.log(customResult);
//1-2-3-4-5
//示例 3：使用空字符串作為分隔符
const letters = ['H', 'e', 'l', 'l', 'o'];
const noSeparatorResult = letters.join('');
console.log(noSeparatorResult);
//Hello2.push()
在 JavaScript 中，push() 是數(shù)組對象的一個方法，其主要作用是在數(shù)組的末尾添加一個或多個元素，并返回新數(shù)組的長度。該方法會直接修改原數(shù)組。
語法：
arr.push(element1[, ...[, elementN]])
arr：要操作的數(shù)組。element1, ..., elementN：要添加到數(shù)組末尾的一個或多個元素。
示例：
// 示例 1：添加單個元素
const animals = ['dog', 'cat'];
const newLength = animals.push('rabbit');
console.log('新數(shù)組長度:', newLength);
console.log('更新后的數(shù)組:', animals);
//新數(shù)組長度: 3
//更新后的數(shù)組: ['dog', 'cat', 'rabbit']
// 示例 2：添加多個元素
const numbers = [1, 2, 3];
const updatedLength = numbers.push(4, 5);
console.log('新數(shù)組長度:', updatedLength);
console.log('更新后的數(shù)組:', numbers);
//新數(shù)組長度: 5
//更新后的數(shù)組: [1, 2, 3, 4, 5]3.pop()
在 JavaScript 里，pop() 是數(shù)組對象的一個方法。其作用是移除數(shù)組的最后一個元素，并且返回該被移除的元素。若數(shù)組為空，pop() 方法不會報錯，而是返回 undefined，同時此方法會直接對原數(shù)組進行修改。
語法：
arr.pop()
arr：需要操作的數(shù)組。
示例：
// 示例 1：對非空數(shù)組使用 pop() 方法
const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.pop();
console.log('被移除的元素:', removedFruit);
console.log('更新后的數(shù)組:', fruits);
//被移除的元素: cherry
//更新后的數(shù)組: ['apple', 'banana']
// 示例 2：對空數(shù)組使用 pop() 方法
const emptyArray = [];
const result = emptyArray.pop();
console.log('返回值:', result);
console.log('數(shù)組狀態(tài):', emptyArray);
//返回值: undefined
//數(shù)組狀態(tài): []4.shift()
在 JavaScript 中，shift() 是數(shù)組對象的一個方法，其主要功能是移除數(shù)組的第一個元素，并返回該被移除的元素。如果數(shù)組為空，shift() 方法會返回 undefined，同時該方法會直接修改原數(shù)組。
語法：
arr.shift()
arr：要操作的數(shù)組。
示例：
// 示例 1：對非空數(shù)組使用 shift() 方法
const colors = ['red', 'green', 'blue'];
const removedColor = colors.shift();
console.log('被移除的元素:', removedColor);
console.log('更新后的數(shù)組:', colors);
//被移除的元素: red
//更新后的數(shù)組: ['green', 'blue']
// 示例 2：對空數(shù)組使用 shift() 方法
const emptyArr = [];
const result = emptyArr.shift();
console.log('返回值:', result);
console.log('數(shù)組狀態(tài):', emptyArr);
//返回值: undefined
//數(shù)組狀態(tài): []5.unshift()
在 JavaScript 中，unshift() 是數(shù)組對象的一個方法，其作用是在數(shù)組的開頭添加一個或多個元素，并返回新數(shù)組的長度。該方法會直接修改原數(shù)組。
語法：
arr.unshift(element1[, ...[, elementN]])
arr：要操作的數(shù)組。element1, ..., elementN：要添加到數(shù)組開頭的一個或多個元素。
示例：
// 示例 1：添加單個元素
const numbers = [2, 3, 4];
const newLength = numbers.unshift(1);
console.log('新數(shù)組的長度:', newLength);
console.log('更新后的數(shù)組:', numbers);
//新數(shù)組的長度: 4
//更新后的數(shù)組: [1, 2, 3, 4]
// 示例 2：添加多個元素
const fruits = ['banana', 'cherry'];
const updatedLength = fruits.unshift('apple', 'grape');
console.log('新數(shù)組的長度:', updatedLength);
console.log('更新后的數(shù)組:', fruits);
//新數(shù)組的長度: 4
//更新后的數(shù)組: ['apple', 'grape', 'banana', 'cherry']6.slice()
在 JavaScript 中，slice() 是數(shù)組對象的一個方法，用于從原數(shù)組中提取出一部分元素，組成一個新的數(shù)組，而不會對原數(shù)組進行修改。
語法：
arr.slice([begin[, end]])
arr：需要操作的數(shù)組。begin（可選）：提取元素的起始索引位置。如果省略該參數(shù)，默認從索引 0 開始。若為負數(shù)，則表示從數(shù)組末尾開始倒數(shù)的位置，例如-1表示最后一個元素。end（可選）：提取元素的結束索引位置（不包含該索引對應的元素）。如果省略該參數(shù)，會提取從begin到數(shù)組末尾的所有元素。若為負數(shù)，則表示從數(shù)組末尾開始倒數(shù)的位置。
示例：
// 示例 1：省略參數(shù)
const fruits = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
const newFruits = fruits.slice();
console.log('原數(shù)組:', fruits);
console.log('新數(shù)組:', newFruits);
//原數(shù)組: ['apple', 'banana', 'cherry', 'date', 'elderberry']
//新數(shù)組: ['apple', 'banana', 'cherry', 'date', 'elderberry']
// 示例 2：指定 begin 參數(shù)
const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.slice(2);
console.log('原數(shù)組:', numbers);
console.log('新數(shù)組:', newNumbers);
//原數(shù)組: [1, 2, 3, 4, 5]
//新數(shù)組: [3, 4, 5]
// 示例 3：指定 begin 和 end 參數(shù)
const animals = ['cat', 'dog', 'elephant', 'fox', 'giraffe'];
const newAnimals = animals.slice(1, 3);
console.log('原數(shù)組:', animals);
console.log('新數(shù)組:', newAnimals);
//原數(shù)組: ['cat', 'dog', 'elephant', 'fox', 'giraffe']
//新數(shù)組: ['dog', 'elephant']
// 示例 4：使用負索引
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const newColors = colors.slice(-3, -1);
console.log('原數(shù)組:', colors);
console.log('新數(shù)組:', newColors);
//原數(shù)組: ['red', 'green', 'blue', 'yellow', 'purple']
//新數(shù)組: ['blue', 'yellow']7.fill()
在 JavaScript 中，fill() 是數(shù)組對象的一個方法，它可以用一個固定值填充數(shù)組中的一個或多個元素。該方法會直接修改原數(shù)組，并返回修改后的數(shù)組。
語法：
arr.fill(value[, start[, end]])
arr：要操作的數(shù)組。value：用來填充數(shù)組元素的值。start（可選）：開始填充的索引位置，默認為 0。如果是負數(shù)，則表示從數(shù)組末尾開始倒數(shù)的位置。end（可選）：結束填充的索引位置（不包含該索引對應的元素），默認為數(shù)組的長度。如果是負數(shù)，則表示從數(shù)組末尾開始倒數(shù)的位置。
示例：
// 示例 1：用一個值填充整個數(shù)組
const numbers = [1, 2, 3, 4, 5];
const filledNumbers = numbers.fill(0);
console.log('原數(shù)組（已被修改）:', numbers);
console.log('填充后返回的數(shù)組:', filledNumbers);
//原數(shù)組（已被修改）: [0, 0, 0, 0, 0]
//填充后返回的數(shù)組: [0, 0, 0, 0, 0]
// 示例 2：指定開始和結束位置進行填充
const letters = ['a', 'b', 'c', 'd', 'e'];
const filledLetters = letters.fill('x', 1, 3);
console.log('原數(shù)組（已被修改）:', letters);
console.log('填充后返回的數(shù)組:', filledLetters);
//原數(shù)組（已被修改）: ['a', 'x', 'x', 'd', 'e']
//填充后返回的數(shù)組: ['a', 'x', 'x', 'd', 'e']
// 示例 3：使用負索引進行填充
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
const filledColors = colors.fill('orange', -2);
console.log('原數(shù)組（已被修改）:', colors);
console.log('填充后返回的數(shù)組:', filledColors);
//原數(shù)組（已被修改）: ['red', 'green', 'blue', 'orange', 'orange']
//填充后返回的數(shù)組: ['red', 'green', 'blue', 'orange', 'orange']8.filter()
在 JavaScript 中，filter() 是數(shù)組對象的一個方法，其主要作用是創(chuàng)建一個新數(shù)組，新數(shù)組中的元素是原數(shù)組中滿足指定條件的所有元素。filter() 方法不會改變原數(shù)組，而是返回一個新數(shù)組。
語法：
arr.filter(callback(element[, index[, array]])[, thisArg])
arr：要操作的數(shù)組。callback：用來測試數(shù)組每個元素的函數(shù)，它接收三個參數(shù)：element：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用filter()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值
示例：
// 示例 1：篩選出數(shù)組中的偶數(shù)
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function (number) {
return number % 2 === 0;
});
console.log('原數(shù)組:', numbers);
console.log('篩選出的偶數(shù)數(shù)組:', evenNumbers);
//原數(shù)組: [1, 2, 3, 4, 5, 6]
//篩選出的偶數(shù)數(shù)組: [2, 4, 6]
// 示例 2：使用箭頭函數(shù)和索引篩選元素
const words = ['apple', 'banana', 'cherry', 'date'];
const longWords = words.filter((word, index) => {
return word.length > 5 && index % 2 === 0;
});
console.log('原數(shù)組:', words);
console.log('篩選出的長單詞且索引為偶數(shù)的數(shù)組:', longWords);
//原數(shù)組: ['apple', 'banana', 'cherry', 'date']
//篩選出的長單詞且索引為偶數(shù)的數(shù)組: ['cherry']
// 示例 3：篩選出對象數(shù)組中滿足條件的對象
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 22 }
];
const adults = users.filter(user => user.age >= 25);
console.log('原數(shù)組:', users);
console.log('篩選出的成年人數(shù)組:', adults);
//原數(shù)組: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 22 } ]
//篩選出的成年人數(shù)組: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 } ]
9.concat()
在 JavaScript 里，concat() 是數(shù)組對象的一個方法，其用途是把兩個或多個數(shù)組連接起來，形成一個新的數(shù)組。此方法不會改變原數(shù)組，而是返回一個全新的數(shù)組，該數(shù)組包含了原數(shù)組以及被連接數(shù)組的所有元素。
語法：
const newArray = oldArray.concat(value1[, value2[, ...[, valueN]]])
oldArray：調用concat()方法的原始數(shù)組。value1, value2, ..., valueN（可選）：要連接到oldArray末尾的數(shù)組或值。如果這些參數(shù)是數(shù)組，它們的元素會被逐個添加到新數(shù)組中；如果是其他值，則直接添加到新數(shù)組末尾。
示例：
// 示例 1：連接兩個數(shù)組
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const newArray = array1.concat(array2);
console.log('原數(shù)組1:', array1);
console.log('原數(shù)組2:', array2);
console.log('連接后的新數(shù)組:', newArray);
//原數(shù)組1: [1, 2, 3]
//原數(shù)組2: [4, 5, 6]
//連接后的新數(shù)組: [1, 2, 3, 4, 5, 6]
// 示例 2：連接多個數(shù)組
const firstArray = ['a', 'b'];
const secondArray = ['c', 'd'];
const thirdArray = ['e', 'f'];
const combinedArray = firstArray.concat(secondArray, thirdArray);
console.log('原數(shù)組1:', firstArray);
console.log('原數(shù)組2:', secondArray);
console.log('原數(shù)組3:', thirdArray);
console.log('連接后的新數(shù)組:', combinedArray);
//原數(shù)組1: ['a', 'b']
//原數(shù)組2: ['c', 'd']
//原數(shù)組3: ['e', 'f']
//連接后的新數(shù)組: ['a', 'b', 'c', 'd', 'e', 'f']
// 示例 3：連接數(shù)組和值
const originalArray = [10, 20];
const newArrayWithValue = originalArray.concat(30, [40, 50]);
console.log('原數(shù)組:', originalArray);
console.log('連接后的新數(shù)組:', newArrayWithValue);
//原數(shù)組: [10, 20]
//連接后的新數(shù)組: [10, 20, 30, 40, 50]
10.indexOf()
在 JavaScript 中，indexOf() 是數(shù)組對象的一個方法，用于查找某個指定的值在數(shù)組中首次出現(xiàn)的索引位置。如果該值存在于數(shù)組中，就返回它的索引；若不存在，則返回 -1。此方法進行的是嚴格相等比較（即 ===）。
語法：
arr.indexOf(searchElement[, fromIndex])
arr：要進行查找操作的數(shù)組。searchElement：需要在數(shù)組中查找的元素。fromIndex（可選）：開始查找的索引位置，默認值為0。若該值為負數(shù)，則從數(shù)組末尾倒數(shù)相應位置開始查找，但查找順序依然是從前往后。
示例：
// 示例 1：基本查找
const fruits = ['apple', 'banana', 'cherry', 'banana'];
const index = fruits.indexOf('banana');
console.log('數(shù)組:', fruits);
console.log('"banana" 首次出現(xiàn)的索引:', index);
//數(shù)組: ['apple', 'banana', 'cherry', 'banana']
//"banana" 首次出現(xiàn)的索引: 1
// 示例 2：指定起始索引查找
const numbers = [10, 20, 30, 20, 40];
const newIndex = numbers.indexOf(20, 2);
console.log('數(shù)組:', numbers);
console.log('從索引 2 開始查找，"20" 首次出現(xiàn)的索引:', newIndex);
//數(shù)組: [10, 20, 30, 20, 40]
//從索引 2 開始查找，"20" 首次出現(xiàn)的索引: 3
// 示例 3：查找不存在的元素
const colors = ['red', 'green', 'blue'];
const nonExistentIndex = colors.indexOf('yellow');
console.log('數(shù)組:', colors);
console.log('"yellow" 首次出現(xiàn)的索引:', nonExistentIndex);
//數(shù)組: ['red', 'green', 'blue']
//"yellow" 首次出現(xiàn)的索引: -111.lastIndexOf()
在 JavaScript 中，lastIndexOf() 是數(shù)組對象的一個方法，其主要作用是查找指定元素在數(shù)組中最后一次出現(xiàn)的索引位置。如果數(shù)組中存在該元素，就返回其最后一次出現(xiàn)的索引；若不存在，則返回 -1。該方法進行的是嚴格相等比較（即 ===）。
語法：
arr.lastIndexOf(searchElement[, fromIndex])
arr：要進行查找操作的數(shù)組。searchElement：需要在數(shù)組中查找的元素。fromIndex（可選）：開始反向查找的索引位置。默認值為數(shù)組的長度減 1，也就是從數(shù)組的最后一個元素開始查找。若該值為負數(shù)，則從數(shù)組末尾倒數(shù)相應位置開始反向查找。
示例：
// 示例 1：基本查找
const fruits = ['apple', 'banana', 'cherry', 'banana'];
const lastIndex = fruits.lastIndexOf('banana');
console.log('數(shù)組:', fruits);
console.log('"banana" 最后一次出現(xiàn)的索引:', lastIndex);
//數(shù)組: ['apple', 'banana', 'cherry', 'banana']
//"banana" 最后一次出現(xiàn)的索引: 3
// 示例 2：指定起始索引查找
const numbers = [10, 20, 30, 20, 40];
const newLastIndex = numbers.lastIndexOf(20, 2);
console.log('數(shù)組:', numbers);
console.log('從索引 2 開始反向查找，"20" 最后一次出現(xiàn)的索引:', newLastIndex);
//數(shù)組: [10, 20, 30, 20, 40]
//從索引 2 開始反向查找，"20" 最后一次出現(xiàn)的索引: 1
// 示例 3：查找不存在的元素
const colors = ['red', 'green', 'blue'];
const nonExistentLastIndex = colors.lastIndexOf('yellow');
console.log('數(shù)組:', colors);
console.log('"yellow" 最后一次出現(xiàn)的索引:', nonExistentLastIndex);
//數(shù)組: ['red', 'green', 'blue']
//"yellow" 最后一次出現(xiàn)的索引: -112.every()
在 JavaScript 里，every() 是數(shù)組對象的一個方法。它用于檢測數(shù)組里的所有元素是否都滿足指定的條件。該方法會對數(shù)組中的每個元素執(zhí)行一次提供的測試函數(shù)，若所有元素都使測試函數(shù)返回 true，則 every() 方法返回 true；只要有一個元素使測試函數(shù)返回 false，就會立即停止遍歷并返回 false。此方法不會改變原數(shù)組。
語法：
arr.every(callback(element[, index[, array]])[, thisArg])
arr：要進行檢測的數(shù)組。callback：用來測試每個元素的函數(shù)，它接收三個參數(shù)：element：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用every()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：檢查數(shù)組中的所有元素是否都大于 0
const numbers = [1, 2, 3, 4, 5];
const allPositive = numbers.every(function (number) {
return number > 0;
});
console.log('數(shù)組:', numbers);
console.log('數(shù)組中的所有元素是否都大于 0:', allPositive);
//數(shù)組: [1, 2, 3, 4, 5]
//數(shù)組中的所有元素是否都大于 0: true
// 示例 2：使用箭頭函數(shù)檢查數(shù)組中的所有元素長度是否都大于 3
const words = ['apple', 'banana', 'cherry'];
const allLongWords = words.every(word => word.length > 3);
console.log('數(shù)組:', words);
console.log('數(shù)組中的所有元素長度是否都大于 3:', allLongWords);
//數(shù)組: ['apple', 'banana', 'cherry']
//數(shù)組中的所有元素長度是否都大于 3: true
// 示例 3：檢查數(shù)組中的所有元素是否都是偶數(shù)
const mixedNumbers = [2, 4, 6, 7];
const allEven = mixedNumbers.every(num => num % 2 === 0);
console.log('數(shù)組:', mixedNumbers);
console.log('數(shù)組中的所有元素是否都是偶數(shù):', allEven);
//數(shù)組: [2, 4, 6, 7]
//數(shù)組中的所有元素是否都是偶數(shù): false
13.some()
在 JavaScript 中，some() 是數(shù)組對象的一個方法，用于檢測數(shù)組中是否至少有一個元素滿足指定的條件。它會對數(shù)組中的每個元素依次執(zhí)行你提供的測試函數(shù)，只要有一個元素使測試函數(shù)返回 true，some() 方法就會立即返回 true；若所有元素都使測試函數(shù)返回 false，則 some() 方法返回 false。此方法不會改變原數(shù)組。
語法：
arr.some(callback(element[, index[, array]])[, thisArg])
arr：要進行檢測的數(shù)組。callback：用于測試每個元素的函數(shù)，該函數(shù)接收三個參數(shù)：element：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用some()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：檢查數(shù)組中是否有元素大于 5
const numbers = [1, 3, 7, 4];
const hasGreaterThanFive = numbers.some(function (number) {
return number > 5;
});
console.log('數(shù)組:', numbers);
console.log('數(shù)組中是否有元素大于 5:', hasGreaterThanFive);
//數(shù)組: [1, 3, 7, 4]
//數(shù)組中是否有元素大于 5: true
// 示例 2：使用箭頭函數(shù)檢查數(shù)組中是否有元素長度小于 3
const words = ['apple', 'cat', 'banana'];
const hasShortWord = words.some(word => word.length < 3);
console.log('數(shù)組:', words);
console.log('數(shù)組中是否有元素長度小于 3:', hasShortWord);
//數(shù)組: ['apple', 'cat', 'banana']
//數(shù)組中是否有元素長度小于 3: false
// 示例 3：檢查數(shù)組中是否有偶數(shù)
const mixedNumbers = [1, 3, 5, 8];
const hasEvenNumber = mixedNumbers.some(num => num % 2 === 0);
console.log('數(shù)組:', mixedNumbers);
console.log('數(shù)組中是否有偶數(shù):', hasEvenNumber);
//數(shù)組: [1, 3, 5, 8]
//數(shù)組中是否有偶數(shù): true14.includes()
在 JavaScript 里，includes() 是數(shù)組對象的一個方法，它用于判斷數(shù)組是否包含某個指定的值。若包含則返回 true，不包含則返回 false。此方法進行的是嚴格相等比較（即 ===），并且可以指定從哪個索引位置開始查找。
語法：
arr.includes(valueToFind[, fromIndex])
arr：要進行檢查的數(shù)組。valueToFind：需要在數(shù)組中查找的值。fromIndex（可選）：開始查找的索引位置，默認值為0。若該值為負數(shù)，則從數(shù)組末尾倒數(shù)相應位置開始查找，但查找順序依然是從前往后。若fromIndex的絕對值大于數(shù)組長度，會直接從索引0開始查找。
示例：
// 示例 1：基本查找
const fruits = ['apple', 'banana', 'cherry'];
const hasBanana = fruits.includes('banana');
console.log('數(shù)組:', fruits);
console.log('數(shù)組中是否包含 "banana":', hasBanana);
//數(shù)組: ['apple', 'banana', 'cherry']
//數(shù)組中是否包含 "banana": true
// 示例 2：指定起始索引查找
const numbers = [10, 20, 30, 20];
const hasTwentyFromIndexTwo = numbers.includes(20, 2);
console.log('數(shù)組:', numbers);
console.log('從索引 2 開始查找，數(shù)組中是否包含 "20":', hasTwentyFromIndexTwo);
//數(shù)組: [10, 20, 30, 20]
//從索引 2 開始查找，數(shù)組中是否包含 "20": true
// 示例 3：查找不存在的元素
const colors = ['red', 'green', 'blue'];
const hasYellow = colors.includes('yellow');
console.log('數(shù)組:', colors);
console.log('數(shù)組中是否包含 "yellow":', hasYellow);
//數(shù)組: ['red', 'green', 'blue']
//數(shù)組中是否包含 "yellow": false
// 示例 4：使用負索引查找
const letters = ['a', 'b', 'c', 'd'];
const hasBFromNegativeIndex = letters.includes('b', -3);
console.log('數(shù)組:', letters);
console.log('從倒數(shù)第 3 個位置開始查找，數(shù)組中是否包含 "b":', hasBFromNegativeIndex);
//數(shù)組: ['a', 'b', 'c', 'd']
//從倒數(shù)第 3 個位置開始查找，數(shù)組中是否包含 "b": true15.sort()
在 JavaScript 中，sort() 是數(shù)組對象的一個方法，用于對數(shù)組的元素進行排序。默認情況下，sort() 方法會將數(shù)組元素轉換為字符串，然后按照 Unicode 編碼順序進行排序。這意味著如果直接對數(shù)字數(shù)組使用 sort() 方法，可能無法得到預期的數(shù)字大小排序結果。不過，你可以通過傳入一個比較函數(shù)來定義自定義的排序規(guī)則。sort() 方法會直接修改原數(shù)組，并返回排序后的數(shù)組。
語法：
arr.sort([compareFunction])
arr：要進行排序的數(shù)組。compareFunction（可選）：用于定義排序規(guī)則的比較函數(shù)。該函數(shù)接收兩個參數(shù)a和b，表示數(shù)組中的兩個元素，根據(jù)返回值的正負來決定元素的排序順序：- 如果返回值小于 0，則
a會被排列到b之前。 - 如果返回值等于 0，則
a和b的相對位置不變。 - 如果返回值大于 0，則
b會被排列到a之前。
- 如果返回值小于 0，則
示例：
// 示例 1：默認排序（按 Unicode 編碼順序）
const fruits = ['banana', 'apple', 'cherry'];
const sortedFruits = fruits.sort();
console.log('原數(shù)組（已被修改）:', fruits);
console.log('排序后返回的數(shù)組:', sortedFruits);
//原數(shù)組（已被修改）: ['apple', 'banana', 'cherry']
//排序后返回的數(shù)組: ['apple', 'banana', 'cherry']
// 示例 2：對數(shù)字數(shù)組使用默認排序
const numbers = [10, 5, 2, 20];
const defaultSortedNumbers = numbers.sort();
console.log('原數(shù)組（已被修改）:', numbers);
console.log('默認排序后返回的數(shù)組:', defaultSortedNumbers);
//原數(shù)組（已被修改）: [10, 2, 20, 5]
//默認排序后返回的數(shù)組: [10, 2, 20, 5]
// 示例 3：使用比較函數(shù)對數(shù)字數(shù)組進行升序排序
const newNumbers = [10, 5, 2, 20];
const ascendingSortedNumbers = newNumbers.sort((a, b) => a - b);
console.log('原數(shù)組（已被修改）:', newNumbers);
console.log('升序排序后返回的數(shù)組:', ascendingSortedNumbers);
//原數(shù)組（已被修改）: [2, 5, 10, 20]
//升序排序后返回的數(shù)組: [2, 5, 10, 20]
// 示例 4：使用比較函數(shù)對數(shù)字數(shù)組進行降序排序
const anotherNumbers = [10, 5, 2, 20];
const descendingSortedNumbers = anotherNumbers.sort((a, b) => b - a);
console.log('原數(shù)組（已被修改）:', anotherNumbers);
console.log('降序排序后返回的數(shù)組:', descendingSortedNumbers);
//原數(shù)組（已被修改）: [20, 10, 5, 2]
//降序排序后返回的數(shù)組: [20, 10, 5, 2]16.reverse()
在 JavaScript 中，reverse() 是數(shù)組對象的一個方法，其主要功能是顛倒數(shù)組中元素的順序。該方法會直接修改原數(shù)組，將數(shù)組元素的排列順序反轉，最后返回修改后的原數(shù)組
語法：
arr.reverse()
arr：要進行元素順序顛倒操作的數(shù)組。
示例：
// 示例 1：對普通數(shù)組使用 reverse() 方法
const numbers = [1, 2, 3, 4, 5];
const reversedNumbers = numbers.reverse();
console.log('原數(shù)組（已被修改）:', numbers);
console.log('反轉后返回的數(shù)組:', reversedNumbers);
//原數(shù)組（已被修改）: [5, 4, 3, 2, 1]
//反轉后返回的數(shù)組: [5, 4, 3, 2, 1]
// 示例 2：對字符串數(shù)組使用 reverse() 方法
const fruits = ['apple', 'banana', 'cherry'];
const reversedFruits = fruits.reverse();
console.log('原數(shù)組（已被修改）:', fruits);
console.log('反轉后返回的數(shù)組:', reversedFruits);
//原數(shù)組（已被修改）: ['cherry', 'banana', 'apple']
//反轉后返回的數(shù)組: ['cherry', 'banana', 'apple']17.forEach()
在 JavaScript 里，forEach() 是數(shù)組對象的一個方法，它用于對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)。forEach() 方法沒有返回值，其主要目的是遍歷數(shù)組元素并對每個元素執(zhí)行特定操作。這個方法為數(shù)組中的每個元素依次調用一次你提供的回調函數(shù)，并且不會改變原數(shù)組。
語法：
arr.forEach(callback(currentValue[, index[, array]])[, thisArg])
arr：要進行遍歷的數(shù)組。callback：為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：currentValue：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用forEach()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：簡單遍歷數(shù)組并打印元素
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function (number) {
console.log(number);
});
//1
//2
//3
//4
//5
// 示例 2：使用索引和數(shù)組參數(shù)
const fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function (fruit, index, array) {
console.log(`索引 ${index} 處的元素是 ${fruit}，數(shù)組是 ${array}`);
});
//索引 0 處的元素是 apple，數(shù)組是 apple,banana,cherry
//索引 1 處的元素是 banana，數(shù)組是 apple,banana,cherry
//索引 2 處的元素是 cherry，數(shù)組是 apple,banana,cherry
// 示例 3：使用箭頭函數(shù)和累加操作
let sum = 0;
const newNumbers = [10, 20, 30];
newNumbers.forEach((number) => {
sum += number;
});
console.log('數(shù)組元素的總和是:', sum);
//數(shù)組元素的總和是: 6018.map()
在 JavaScript 中，map() 是數(shù)組對象的一個方法，它用于創(chuàng)建一個新數(shù)組，新數(shù)組中的元素是原數(shù)組中每個元素經(jīng)過指定函數(shù)處理后的結果。也就是說，map() 方法會對原數(shù)組的每個元素依次調用你提供的回調函數(shù)，并將回調函數(shù)的返回值作為新數(shù)組對應位置的元素。該方法不會改變原數(shù)組。
語法：
arr.map(callback(currentValue[, index[, array]])[, thisArg])
arr：要進行操作的原數(shù)組。callback：為數(shù)組中每個元素執(zhí)行的函數(shù)，該函數(shù)接收三個參數(shù)：currentValue：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用map()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：將數(shù)組中的每個元素乘以 2
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(function (number) {
return number * 2;
});
console.log('原數(shù)組:', numbers);
console.log('新數(shù)組（每個元素乘以 2）:', doubledNumbers);
//原數(shù)組: [1, 2, 3, 4, 5]
//新數(shù)組（每個元素乘以 2）: [2, 4, 6, 8, 10]
// 示例 2：使用箭頭函數(shù)和索引參數(shù)
const names = ['Alice', 'Bob', 'Charlie'];
const nameWithIndex = names.map((name, index) => `${index + 1}. ${name}`);
console.log('原數(shù)組:', names);
console.log('新數(shù)組（添加索引）:', nameWithIndex);
//原數(shù)組: ['Alice', 'Bob', 'Charlie']
//新數(shù)組（添加索引）: ['1. Alice', '2. Bob', '3. Charlie']
// 示例 3：處理對象數(shù)組
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 22 }
];
const userAges = users.map(user => user.age);
console.log('原數(shù)組:', users);
console.log('新數(shù)組（只包含年齡）:', userAges);
//原數(shù)組: [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 22 } ]
//新數(shù)組（只包含年齡）: [25, 30, 22]19.copyWithin()
在 JavaScript 中，copyWithin() 是數(shù)組對象的一個方法，它用于在數(shù)組內(nèi)部將指定位置的元素復制到其他位置（覆蓋原有元素），并返回修改后的原數(shù)組。該方法會直接修改原數(shù)組，不會改變數(shù)組的長度。
語法：
arr.copyWithin(target[, start[, end]])
arr：要進行操作的數(shù)組。target：復制序列到該位置。如果是負數(shù)，target將從數(shù)組末尾開始計算。start（可選）：開始復制元素的起始位置。默認值為 0。如果是負數(shù)，start將從數(shù)組末尾開始計算。end（可選）：停止復制元素的結束位置（不包含該位置的元素）。默認值為數(shù)組的長度。如果是負數(shù)，end將從數(shù)組末尾開始計算。
示例：
// 示例 1：簡單復制
const numbers = [1, 2, 3, 4, 5];
// 從索引 0 開始復制元素，復制到索引 3 的位置
const result = numbers.copyWithin(3);
console.log('修改后的數(shù)組:', result);
//修改后的數(shù)組: [1, 2, 3, 1, 2]
// 示例 2：指定起始和結束位置復制
const letters = ['a', 'b', 'c', 'd', 'e'];
// 從索引 1 開始復制元素，到索引 3 停止復制，復制到索引 0 的位置
const newResult = letters.copyWithin(0, 1, 3);
console.log('修改后的數(shù)組:', newResult);
//修改后的數(shù)組: ['b', 'c', 'c', 'd', 'e']
// 示例 3：使用負索引復制
const colors = ['red', 'green', 'blue', 'yellow', 'purple'];
// 從倒數(shù)第 2 個元素開始復制，復制到倒數(shù)第 4 個元素的位置
const finalResult = colors.copyWithin(-4, -2);
console.log('修改后的數(shù)組:', finalResult);
//修改后的數(shù)組: ['red', 'yellow', 'purple', 'yellow', 'purple']
20.find()
在 JavaScript 中，find() 是數(shù)組對象的一個方法，它用于查找數(shù)組中滿足指定條件的第一個元素。該方法會對數(shù)組中的每個元素依次執(zhí)行你提供的測試函數(shù)，一旦某個元素使測試函數(shù)返回 true，find() 方法就會立即返回該元素；如果數(shù)組中沒有元素能使測試函數(shù)返回 true，則返回 undefined。find() 方法不會改變原數(shù)組。
語法：
arr.find(callback(element[, index[, array]])[, thisArg])
arr：要進行查找操作的數(shù)組。callback：用于測試每個元素的函數(shù)，該函數(shù)接收三個參數(shù)：element：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用find()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：查找數(shù)組中第一個大于 5 的元素
const numbers = [1, 3, 7, 4, 9];
const firstGreaterThanFive = numbers.find(function (number) {
return number > 5;
});
console.log('數(shù)組:', numbers);
console.log('數(shù)組中第一個大于 5 的元素:', firstGreaterThanFive);
//數(shù)組: [1, 3, 7, 4, 9]
//數(shù)組中第一個大于 5 的元素: 7
// 示例 2：使用箭頭函數(shù)查找對象數(shù)組中年齡大于 25 的第一個用戶
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 28 },
{ name: 'Charlie', age: 20 }
];
const firstUserOver25 = users.find(user => user.age > 25);
console.log('數(shù)組:', users);
console.log('數(shù)組中年齡大于 25 的第一個用戶:', firstUserOver25);
//數(shù)組: [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 28 }, { name: 'Charlie', age: 20 } ]
//數(shù)組中年齡大于 25 的第一個用戶: { name: 'Bob', age: 28 }
// 示例 3：查找不存在的元素
const letters = ['a', 'b', 'c'];
const nonExistentElement = letters.find(letter => letter === 'd');
console.log('數(shù)組:', letters);
console.log('查找結果:', nonExistentElement);
//數(shù)組: ['a', 'b', 'c']
//查找結果: undefined21.findIndex()
在 JavaScript 中，findIndex() 是數(shù)組對象的一個方法，其作用是查找數(shù)組中滿足指定條件的第一個元素的索引。它會對數(shù)組中的每個元素依次執(zhí)行你提供的測試函數(shù)，一旦某個元素使測試函數(shù)返回 true，findIndex() 方法就會立即返回該元素的索引；若數(shù)組中沒有元素能使測試函數(shù)返回 true，則返回 -1。此方法不會改變原數(shù)組。
語法：
arr：要進行查找操作的數(shù)組。callback：用于測試每個元素的函數(shù)，該函數(shù)接收三個參數(shù)：element：當前正在處理的數(shù)組元素。index（可選）：當前元素的索引。array（可選）：調用findIndex()方法的數(shù)組。
thisArg（可選）：執(zhí)行callback函數(shù)時使用的this值。
示例：
// 示例 1：查找數(shù)組中第一個大于 10 的元素的索引
const numbers = [5, 8, 12, 3, 15];
const index = numbers.findIndex(function (number) {
return number > 10;
});
console.log('數(shù)組:', numbers);
console.log('數(shù)組中第一個大于 10 的元素的索引:', index);
//數(shù)組: [5, 8, 12, 3, 15]
//數(shù)組中第一個大于 10 的元素的索引: 2
// 示例 2：使用箭頭函數(shù)查找對象數(shù)組中年齡大于 25 的第一個用戶的索引
const users = [
{ name: 'Alice', age: 22 },
{ name: 'Bob', age: 28 },
{ name: 'Charlie', age: 20 }
];
const userIndex = users.findIndex(user => user.age > 25);
console.log('數(shù)組:', users);
console.log('數(shù)組中年齡大于 25 的第一個用戶的索引:', userIndex);
//數(shù)組: [ { name: 'Alice', age: 22 }, { name: 'Bob', age: 28 }, { name: 'Charlie', age: 20 } ]
//數(shù)組中年齡大于 25 的第一個用戶的索引: 1
// 示例 3：查找不存在的元素的索引
const letters = ['a', 'b', 'c'];
const nonExistentIndex = letters.findIndex(letter => letter === 'd');
console.log('數(shù)組:', letters);
console.log('查找結果:', nonExistentIndex);
//數(shù)組: ['a', 'b', 'c']
//查找結果: -1總結
到此這篇關于前端JavaScript數(shù)組方法的文章就介紹到這了,更多相關前端js數(shù)組方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript實現(xiàn)的原生態(tài)兼容IE6可調可控滾動文字功能詳解
這篇文章主要介紹了JavaScript實現(xiàn)的原生態(tài)兼容IE6可調可控滾動文字功能,簡單說明了文字滾動的實現(xiàn)原理并結合具體實例形式給出了javascript文字滾動功能的具體實現(xiàn)代碼,需要的朋友可以參考下2017-09-09
Gzip是一種流行的文件壓縮算法，現(xiàn)在的應用十分廣泛，尤其是在Linux平臺。下面這篇文章主要給大家介紹了關于HTTP傳輸中gzip壓縮的相關資料，文中介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-01-01
Bootstrap模態(tài)框插入視頻的實現(xiàn)代碼
這篇文章主要介紹了Bootstrap模態(tài)框插入視頻的實現(xiàn)代碼,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JS上傳圖片預覽插件制作（兼容到IE6）的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
本文為大家介紹下使用js判斷字符長度及中英文數(shù)字等，下面有個不錯的教程，感興趣的朋友可以參考下2013-12-12
IE瀏覽器不支持getElementsByClassName的解決方法
這篇文章主要介紹了IE瀏覽器不支持getElementsByClassName的解決方法,本文的方法比較完美的解決了這個問題,需要的朋友可以參考下2014-08-08
抓取JavaScript動態(tài)加載的內(nèi)容的方法總結
JavaScript動態(tài)加載的內(nèi)容常見于現(xiàn)代Web應用中,用于增強用戶體驗和減少初始頁面加載時間,然而,這些動態(tài)加載的內(nèi)容對于傳統(tǒng)的網(wǎng)頁抓取工具來說往往是不可見的,本文主要介紹了有JavaScript動態(tài)加載的內(nèi)容如何抓取,需要的朋友可以參考下2024-09-09
變量是程序在內(nèi)存中申請的一塊用來存放數(shù)據(jù)的空間,下面這篇文章主要給大家介紹了關于JavaScript如何正確聲明和使用變量的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
為什么用表單的方式就可以傳遞中文，而URL的方式就不行了呢？非得用URL傳值的方式才能解決問題嗎？這里我想到了動態(tài)表單，何不用它來解決呢2013-04-04
layui select動態(tài)添加option的實例
下面小編就為大家分享一篇layui select動態(tài)添加option的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03