总结前端常用数据结构 之 数组篇【JavaScript -包含常用数组方法】

【亲爱的读者，爱博主记得一键三连噢噢ooo~~ 啾咪】

创建数组：

• 以字面量的形式创建新数组：let arr1 = [1, 2, 3];
• 通过 Array 构造函数并传入一组元素（4,5,6）来创建一个新数组：let arr2 = new Array(4, 5, 6);
  

查找值：

在数组中可以根据下标/ 索引 来查找值：arr[0] 、arr[1] 、arr[2]

常用的数组方法（吐血分享）：

【亲爱的读者，爱博主记得一键三连噢噢ooo~~】

第一类：增、删、改：

splice() - 任意位置添加、删除或替换元素:

splice() 方法允许你在数组的任意位置添加、删除或替换元素。这个方法会直接修改原数组，并返回一个包含被删除元素的新数组（如果没有删除元素，则返回一个空数组）。
使用结构：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

参数：

• start：指定数组中开始修改的位置（索引）。如果该索引为负数，则从数组末尾开始计算位置（索引 -1 表示数组的最后一个元素）。
• deleteCount（可选）：表示要移除的数组元素的个数。如果未指定 deleteCount，或者其值大于数组中实际可删除的元素数量，则将从 start 位置开始删除到数组末尾的所有元素。
• item1, item2, …（可选）：要添加进数组的新元素。如果没有指定这些参数，splice() 将只删除数组元素。

举例说明：

1. 删除元素：

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

2. 添加元素：

let arr = [1, 2, 3];
arr.splice(1, 0, 'a', 'b');
console.log(arr); // [1, 'a', 'b', 2, 3]

3. 替换元素：

let arr = [1, 2, 3, 4];
arr.splice(2, 1, 'a');
console.log(arr); // [1, 2, 'a', 4]

unshift() - 数组的开头添加一个或多个元素:

unshift() 方法用于数组的开头添加一个或多个元素，并返回新的数组长度。这个方法会直接修改原数组，不会创建一个新的数组。
使用结构：

array.unshift(element1[, element2[, ...]])

参数：

• element1, element2, …：要添加到数组开头的元素。可以添加一个或多个元素。

举例说明：

let arr = [1, 2, 3];// 在数组开头添加一个元素
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]// 在数组开头添加多个元素
arr.unshift(-2, -1);
console.log(arr); // [-2, -1, 0, 1, 2, 3]// 获取数组的新长度
let newLength = arr.unshift(4);
console.log(newLength); // 7
console.log(arr); // [4, -2, -1, 0, 1, 2, 3]

提示：这个方法会修改原数组并且可能会导致数组中的元素重新分配内存（特别是当数组很大时），所以在性能敏感的应用中应该谨慎使用。如果你需要保持原数组不变，可以先复制数组（使用 slice() 方法等），然后在复制后的数组上使用 unshift() 方法。

push() - 数组的末尾添加一个或多个元素:

push() 方法用于数组的末尾添加一个或多个元素，并返回新的数组长度。这个方法会直接修改原数组，不会创建一个新的数组。
使用结构：

array.push(element1[, element2[, ...]])

参数：

• element1, element2, …：要添加到数组末尾的元素。可以添加一个或多个元素。

举例说明：

let arr = [1, 2, 3];// 在数组末尾添加一个元素
arr.push(4);
console.log(arr); // [1, 2, 3, 4]// 在数组末尾添加多个元素
arr.push(5, 6);
console.log(arr); // [1, 2, 3, 4, 5, 6]// 获取数组的新长度
let newLength = arr.push(7);
console.log(newLength); // 7
console.log(arr); // [1, 2, 3, 4, 5, 6, 7]

shift() - 删除数组的第一个元素:

shift()方法用于删除数组的第一个元素，并返回被删除的元素。 这个方法会直接修改原数组，将数组的第一个元素移除，并将所有后续元素向下移动一位，以填补被删除元素的位置。数组的新长度会相应地减少1。
使用结构：

array.shift()

返回值：

• 返回被删除的第一个元素。如果数组是空的，则返回 undefined。

举例说明：

let arr = [1, 2, 3, 4, 5];// 删除数组的第一个元素
let firstElement = arr.shift();
console.log(firstElement); // 1
console.log(arr); // [2, 3, 4, 5]// 再次删除数组的第一个元素
let secondElement = arr.shift();
console.log(secondElement); // 2
console.log(arr); // [3, 4, 5]// 尝试删除空数组的第一个元素
let emptyArr = [];
let nothing = emptyArr.shift();
console.log(nothing); // undefined
console.log(emptyArr); // []

提示：shift() 方法对于需要从数组开头移除元素的情况非常有用。但是，请注意，由于这个方法会修改原数组并且可能会导致数组中的元素重新分配内存（特别是当数组很大时），所以在性能敏感的应用中应该谨慎使用。如果你需要保持原数组不变，可以先复制数组（使用 slice() 方法等），然后在复制后的数组上使用 shift() 方法。

pop() - 删除数组中的最后一个元素:

pop()方法用于删除数组中的最后一个元素，并返回被删除的元素。 这个方法会直接修改原数组，使其长度减1。
使用结构：

array.pop()

返回值：

• 返回被删除的最后一个元素的值。如果数组为空，则返回 undefined。

举例说明：

let fruits = ["apple", "banana", "orange", "mango"];// 删除并返回数组的最后一个元素
let lastFruit = fruits.pop();
console.log(fruits); // ["apple", "banana", "orange"]
console.log(lastFruit); // "mango"// 删除并返回数组的最后一个元素（数组为空的情况）
let numbers = [];
let lastNumber = numbers.pop();
console.log(numbers); // []
console.log(lastNumber); // undefined

提示： pop() 方法在处理需要“后进先出”（LIFO）逻辑的场景时非常有用，例如在栈的实现中。栈是一种数据结构，只允许在一端（称为栈顶）进行插入和删除操作，而 pop() 方法正好符合这种操作模式。

第二类：迭代方法：

every() - 测试数组的所有元素是否都通过条件

every() 方法用于测试数组的所有元素是否都通过了被提供的测试函数。 如果数组中所有元素都满足测试函数，则返回 true；如果至少有一个元素不满足，则返回 false。
使用结构：

arr.every(callback(element[, index[, array]])[, thisArg])

参数：

• callback：为数组中每个元素执行的函数，接受三个参数：当前元素 (element)、当前元素的索引 (index) 和数组对象本身 (array)。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const numbers = [1, 2, 3, 4, 5];// 检查数组中的所有元素是否都大于0
const allPositive = numbers.every(function(number) {return number > 0;
});console.log(allPositive); // 输出 true// 检查数组中的所有元素是否都大于10
const allGreaterThanTen = numbers.every(function(number) {return number > 10;
});console.log(allGreaterThanTen); // 输出 false

*简便写法：

arr1.every(item => item > 10);

some() - 测试数组中是否至少有一个元素通过条件

some()方法用于用于测试数组中是否至少有一个元素通过了被提供的测试函数。 只需要找到一个满足条件的元素就会返回 true，而不需要检查数组中的所有元素。如果数组中没有元素满足条件，则 some() 方法返回 false。
使用结构：

arr.some(callback(element[, index[, array]])[, thisArg])

参数：

• callback：为数组中每个元素执行的函数，接受三个参数：当前元素 (element)、当前元素的索引 (index) 和数组对象本身 (array)。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const numbers = [1, 2, 3, 4, 5];// 检查数组中是否至少有一个偶数
const hasEven = numbers.some(function(number) {return number % 2 === 0;
});console.log(hasEven); // 输出 true// 检查数组中是否至少有一个大于10的数
const hasGreaterThanTen = numbers.some(function(number) {return number > 10;
});console.log(hasGreaterThanTen); // 输出 false

*简便写法：

arr1.some(item => item > 10);

filter() - 过滤出满足条件的元素

filter()方法用于用于创建一个新数组，这个新数组包含所有通过特定测试（由提供的函数实现）的元素。 返回一个新的数组，其中包含所有通过测试的元素。如果没有元素通过测试，则返回一个空数组。
使用结构：

arr.filter(callback(element[, index[, array]])[, thisArg])

参数：

• callback：一个函数，用来测试每个元素。该函数接受三个参数：当前元素 (element)、当前元素的索引 (index) 和调用 filter 的原数组 (array)。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const numbers = [1, 2, 3, 4, 5, 6];// 过滤出所有的偶数
const evens = numbers.filter(function(number) {return number % 2 === 0;
});console.log(evens); // 输出 [2, 4, 6]// 过滤出大于3的元素
const greaterThanThree = numbers.filter(function(number) {return number > 3;
});console.log(greaterThanThree); // 输出 [4, 5, 6]

*简便写法：

arr1.filter(item => item > 3);

注意事项：

• filter() 方法不会改变原数组，而是返回一个新数组。
• 如果没有元素通过测试函数，filter() 方法会返回一个空数组，而不是 null 或 undefined。
• filter() 方法创建的数组是一个浅拷贝，这意味着如果原数组中的元素是对象，那么新数组中的元素将是对原数组中对象的引用。

forEach() - 每个元素都执行一次提供的函数

forEach()方法用于用于对数组的每个元素执行一次提供的函数。 forEach() 不会返回一个新的数组或值，它的返回值是 undefined。forEach() 方法主要用于执行有副作用的操作，比如修改数组中的元素、记录某些值或者进行输出等。
使用结构：

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

参数：

• callback：为数组中每个元素执行的函数，该函数接受三个参数：
• 1.currentValue：数组中正在处理的当前元素。
• 2.index（可选）：数组中正在处理的当前元素的索引。
• 3.array（可选）：调用 forEach() 方法的数组本身。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const numbers = [1, 2, 3, 4, 5];// 使用 forEach 输出数组中的每个元素
numbers.forEach(function(number) {console.log(number);
});// 修改数组中的元素
numbers.forEach(function(number, index, array) {array[index] = number * 2;
});console.log(numbers); // 输出 [2, 4, 6, 8, 10]

*简便写法：

arr1.forEach((item,index,arr) => {arr[index] = item * 2;
});

map() - 每个元素都执行一次提供的函数

map()方法用于用于创建一个新数组，这个新数组的每个元素都是原数组中的元素经过某个函数处理后的结果。 map() 方法会对原数组中的每一个元素调用一个提供的函数，并按照元素出现的顺序将结果收集起来组成一个新的数组返回。
使用结构：

arr.map(callback(currentValue[, index[, array]])[, thisArg])

参数：

• callback：用来生成新数组中的每一个元素。该函数接受三个参数：
• 1.currentValue：数组中正在处理的当前元素。
• 2.index（可选）：数组中正在处理的当前元素的索引。
• 3.array（可选）：调用 map() 方法的数组本身。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const numbers = [1, 2, 3, 4, 5];// 使用 map 创建一个新数组，其中包含原数组中每个元素加倍后的值
const doubledNumbers = numbers.map(function(number) {return number * 2;
});console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]// 使用箭头函数简化代码，`**` 是计算平方哦
const squaredNumbers = numbers.map(number => number ** 2); console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

注意事项：

• map() 方法不会改变原数组，而是返回一个新数组。
• map() 方法创建的数组是一个浅拷贝，如果原数组中的元素是对象，那么新数组中的元素将是对原数组中对象的引用。
• 如果提供的回调函数不是函数，map() 方法会抛出 TypeError。
• map() 方法中的回调函数可以接受三个参数，但通常只需要使用第一个参数（当前元素的值。

reduce() - 将数组中的所有元素归纳（或“减少”）到单个值

reduce()方法用于用于将数组中的所有元素归纳（或“减少”）到单个值。 返回值：函数执行后的最终累积结果。
使用结构：

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数：

• callback：一个函数，用来执行归纳操作。该函数接受四个参数：
• 1.accumulator：累积器，它累积回调的返回值。它是上一次调用回调时返回的累积值，或者是提供的初始值（initialValue）。
• 2.currentValue：数组中正在处理的当前元素。
• 3.index（可选）：数组中正在处理的当前元素的索引。
• 4.array（可选）：调用 reduce() 方法的数组本身。
• initialValue（可选）：作为第一次调用回调函数时的第一个参数的值。如果没有提供初始值，则将数组的第一个元素视为初始值，并从第二个元素开始归纳。。

举例说明：

• 数组求和:

const numbers = [1, 2, 3, 4, 5];const sum = numbers.reduce((accumulator, currentValue) => {return accumulator + currentValue;
}, 0);console.log(sum); // 输出: 15

• 数组元素乘积：

const numbers = [1, 2, 3, 4, 5];const product = numbers.reduce((accumulator, currentValue) => {return accumulator * currentValue;
}, 1);console.log(product); // 输出: 120

• 数组元素连接成字符串：

const words = ['Hello', 'world', '!'];const sentence = words.reduce((accumulator, currentValue) => {return accumulator + ' ' + currentValue;
}, '');console.log(sentence); // 输出: " Hello world !"

注意事项：

• 如果没有提供 initialValue，则数组的第一个元素将被作为第一次调用回调函数时的 accumulator 的初始值，并且从数组的第二个元素开始归纳。
• 如果提供了 initialValue，则从数组的第一个元素开始归纳，并且 initialValue 将作为第一次调用回调函数时的 accumulator 的值。
• reduce() 方法不会改变原数组，而是返回一个新的值。
• 如果数组为空并且没有提供 initialValue，则会抛出 TypeError。如果数组为空但提供了 initialValue，则直接返回 initialValue。

第三类：搜索方法：

indexOf() - 用于查找数组某个元素首次出现的位置

indexOf() 方法用于查找数组中某个元素的首次出现位置，并返回该位置的索引（即下标）。如果数组中不存在该元素，则 indexOf() 方法返回 -1。
使用结构：

arr.indexOf(searchElement[, fromIndex])

参数：

• searchElement：要在数组中查找的元素。
• fromIndex（可选）：开始查找的位置索引。默认为 0，即从数组的第一个元素开始查找。如果 fromIndex 为负数，则从数组末尾开始计算位置，但仍然是从前向后查找。如果 fromIndex 大于或等于数组的长度，返回 -1，因为这意味着在空数组中进行查找。

举例说明：

const fruits = ['apple', 'orange', 'banana', 'apple'];console.log(fruits.indexOf('apple'));       // 输出: 0，因为 'apple' 是数组中的第一个元素
console.log(fruits.indexOf('banana'));      // 输出: 2，因为 'banana' 是数组中的第三个元素
console.log(fruits.indexOf('mango'));       // 输出: -1，因为 'mango' 不在数组中
console.log(fruits.indexOf('apple', 1));     // 输出: 3，从索引 1 开始查找 'apple'，找到的是第二个 'apple'
console.log(fruits.indexOf('apple', -2));    // 输出: 3，从数组末尾往前数第二个位置开始查找，仍然找到的是第二个 'apple'
console.log(fruits.indexOf('apple', 4));     // 输出: -1，因为从索引 4 开始查找已经超出了数组的长度

注意事项：

• indexOf() 方法是严格的 === 检查，即它会比较数组元素和 searchElement 的类型和值。
• indexOf() 方法不会改变原数组。
• 在使用 indexOf() 方法查找元素时，如果数组中包含 NaN，即使 searchElement 也是 NaN，indexOf() 方法也不会找到它，因为 NaN 不等于 NaN（这是浮点数运算中的一个特殊性质）。
• 对于包含 +0 和 -0 的数组，indexOf() 方法会认为它们是相同的，因为 +0 === -0。

includes() - 是否包含一个指定的值或子字符串

includes()方法用于数组（Array）和字符串（String）对象都具备的一个方法，用于判断一个数组或字符串是否包含一个指定的值或子字符串，根据情况返回 true 或 false。

使用结构 - 对于数组：

arr.includes(valueToFind[, fromIndex])

参数：

• valueToFind：需要查找的元素值。
• fromIndex（可选）：开始查找的位置索引。如果省略，则默认从数组的第一个元素开始查找。如果为负值，则从数组的长度减去这个负值的位置开始，仍然是从前向后查找。

举例说明：

const fruits = ['apple', 'banana', 'mango'];console.log(fruits.includes('banana'));     // 输出: true
console.log(fruits.includes('grape'));      // 输出: false
console.log(fruits.includes('mango', 2));   // 输出: true，从索引2开始查找，仍然找到了'mango'
console.log(fruits.includes('mango', 3));   // 输出: false，从索引3开始查找，已经超出了'mango'的位置

使用结构 - 对于字符串：

str.includes(searchString[, position])

参数：

• searchString：需要查找的子字符串。
• position（可选）：开始查找的位置索引。如果省略，则默认从字符串的第一个字符开始查找。

举例说明：

const text = "Hello, world!";console.log(text.includes("world"));        // 输出: true
console.log(text.includes("hello"));        // 输出: false，因为'H'是大写
console.log(text.includes("Hello", 6));     // 输出: false，从索引6开始查找，已经错过了"Hello"

注意事项：

• includes() 方法是区分大小写的，对于字符串来说，它会比较每个字符的Unicode编码。
• 对于数组，includes() 方法能够检测 NaN 和 -0，这是与 indexOf() 方法的一个区别，因为 NaN !== NaN，但 includes() 会认为 NaN 是相等的，同时 +0 和 -0 也被认为是相等的。
• includes() 方法不会改变原数组或原字符串。

includes() 方法是ES6（ECMAScript 2015）中引入的哦！

lastIndexOf() - 用于查找数组某个元素最后一次出现的位置

lastIndexOf()方法用于** 查找指定元素或子字符串在数组或字符串中最后一次出现的位置（索引）。如果未找到，则返回 -1。**
使用结构 -对于数组：

arr.lastIndexOf(searchElement[, fromIndex])

参数：

• searchElement：要在数组中查找的元素。
• fromIndex（可选）：开始向后搜索的位置索引。如果省略，则默认从数组的最后一个元素开始查找。如果为负值，则从数组末尾加上这个负值的位置开始向前查找。如果 fromIndex 大于或等于数组的长度，整个数组都会被搜索。

举例说明：

const fruits = ['apple', 'banana', 'mango', 'banana', 'apple'];console.log(fruits.lastIndexOf('banana'));     // 输出: 3，因为最后一个 'banana' 在索引 3
console.log(fruits.lastIndexOf('orange'));     // 输出: -1，因为 'orange' 不在数组中
console.log(fruits.lastIndexOf('apple', 3));   // 输出: 3，因为从索引 3 开始向后查找，最后一个 'apple' 在索引 3
console.log(fruits.lastIndexOf('apple', 2));   // 输出: 0，因为从索引 2 开始向后查找，只找到了索引 0 的 'apple'

使用结构 -对于字符串：

str.lastIndexOf(searchValue[, fromIndex])

参数：

• searchValue：要在字符串中查找的子字符串。
• fromIndex（可选）：开始向后搜索的位置索引。如果省略，则默认从字符串的最后一个字符开始查找。

举例说明：

const text = "Hello, world! Hello, everyone.";console.log(text.lastIndexOf("Hello"));     // 输出: 23，因为最后一个 "Hello" 的起始索引是 23
console.log(text.lastIndexOf("hello"));     // 输出: -1，因为 'H' 是大写，不匹配
console.log(text.lastIndexOf("world", 10)); // 输出: 7，因为从索引 10 开始向后查找，只找到了索引 7 的 "world"

注意事项：

• lastIndexOf() 方法是区分大小写的，对于字符串来说，它会比较每个字符的Unicode编码。
• lastIndexOf() 方法不会改变原数组或原字符串。
• fromIndex 的值可以是负数，表示从数组或字符串的末尾向前计算的位置开始搜索。

findLast() - 遍历数组并返回最后一个满足条件元素

findLast()方法用于遍历数组并返回最后一个满足提供的测试函数的元素。如果没有找到满足条件的元素，则返回 undefined。）

举例说明：

const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];
const lastFour = array.findLast(element => element === 4);
console.log(lastFour); // 输出: 4

这个方法是es2023引入的哦！

findIndex() - 返回满足条件的第一个元素索引

indexOf() 方法用于返回数组中满足提供的测试函数的第一个元素的索引。。如果数组中不存在该元素，则 indexOf() 方法返回 -1。
使用结构：

arr.findIndex(callback(element[, index[, array]])[, thisArg])

参数：

• callback：为数组中每个元素执行的函数，接受三个参数：
• 1.element：当前遍历到的元素。
• 2.index（可选）：当前元素的索引。
• 3.array（可选）：调用 findIndex 的数组。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const array = [4, 9, 16, 25];const evenIndex = array.findIndex((element) => element % 2 === 0);
console.log(evenIndex); // 输出: 0，因为4是第一个偶数const oddIndex = array.findIndex((element) => element % 2 !== 0);
console.log(oddIndex); // 输出: 1，因为9是第一个奇数const nonExistentIndex = array.findIndex((element) => element === 100);
console.log(nonExistentIndex); // 输出: -1，因为数组中没有100

注意事项：

• findIndex 方法不会改变原数组。
• 如果数组中有多个元素满足条件，findIndex 只会返回第一个满足条件的元素的索引。
• 如果没有元素满足条件，findIndex 会返回 -1。

兼容性：
findIndex 方法在 ECMAScript 6（ES6）中被引入，因此它在现代浏览器和 Node.js 环境中广泛受支持。如果你需要在不支持 ES6 的旧环境中使用，可以考虑使用转译器（如 Babel）将代码转换为旧版本的 JavaScript。

findLastIndex() - 返回满足条件的最后一个元素索引

findLastIndex() 方法用于返回数组中满足提供的测试函数的最后一个元素的索引。如果数组中不存在该元素，则 indexOf() 方法返回 -1。
使用结构：

arr.findLastIndex(callback(element[, index[, array]])[, thisArg])

参数：

• callback：为数组中每个元素执行的函数，接受三个参数：
• 1.element：数组中当处理的元素。
• 2.index（可选）：当前元素的索引。
• 3.array（可选）：调用 findLastIndex 的数组。
• thisArg（可选）：执行 callback 时使用的 this 值。

举例说明：

const array = [1, 2, 3, 4, 5, 4, 3, 2, 1];// 查找最后一个等于 4 的元素的索引
const lastIndex = array.findLastIndex((element) => element === 4);
console.log(lastIndex); // 输出: 5// 查找最后一个大于 5 的元素的索引（不存在，所以返回 -1）
const nonExistentIndex = array.findLastIndex((element) => element > 5);
console.log(nonExistentIndex); // 输出: -1

注意事项：

• indLastIndex 方法不会改变原数组。
• 如果没有元素满足条件，findLastIndex 会返回 -1。
• 在使用这个方法之前，请确保你的 JavaScript 环境支持它（例如，现代的浏览器或 Node.js 版本）。

兼容性：
虽然 findLastIndex 是在 ECMAScript 2022 中正式引入的，但许多现代浏览器和 JavaScript 引擎在此之前就已经支持了这个方法。然而，为了确保兼容性，特别是在较旧的环境或需要广泛支持的应用程序中，你可能需要检查这个方法的可用性或使用转译器（如 Babel）来转换你的代码。