前言
JS数组常用的方法汇总：
Array 是JavaScript中的一种数据格式，在JavaScript中会经常使用到；
本文将详细介绍Array中常用的一些方法！
- push()
- pop()
- shift()
- unshift()
- concat()
- slice()
- splice()
- join()
- indexOf()
- lastIndexOf()
- forEach()
- map()
- filter()
- reduce()
- sort()
- reverse()
- includes()
- some()
- every()
详细介绍使用方法
1、push()
作用：向数组末尾添加一个或多个元素，并返回数组的新长度
示例用法：
1、添加单个元素到数组末尾；
const numbers = [1, 2, 3]; const length = numbers.push(4); console.log(numbers); // [1, 2, 3, 4] console.log(length); // 4
2、添加多个元素到数组末尾；
const fruits = ['apple', 'banana']; fruits.push('kiwi', 'orange'); console.log(fruits); // ['apple', 'banana', 'kiwi', 'orange']
2、pop()
作用：删除并返回数组的最后一个元素
注意：pop() 方法会修改原始数组，将数组的长度减一。
示例用法：
使用 pop方法删除数组最后一个元素；
const fruits = ['apple', 'banana', 'kiwi']; const removedElement = fruits.pop(); console.log(fruits); // ['apple', 'banana'] console.log(removedElement); // 'kiwi'
3、shift()
作用：删除并返回数组的第一个元素
示例用法：
1、使用shift 删除元素，bing返回被删除的元素；
const fruits = ['apple', 'banana', 'kiwi']; const removedElement = fruits.shift(); console.log(fruits); // ['banana', 'kiwi'] console.log(removedElement); // 'apple'
2、如果删除的是空数组，结果将返回
undefined；
const emptyArray = []; const removedElement = emptyArray.shift(); console.log(emptyArray); // [] console.log(removedElement); // undefined
4、unshif()
作用：向数组开头添加一个或多个元素，并返回数组的新长度
示例用法：
1、基础用法，添加单个元素；
const numbers = [2, 3, 4]; const length = numbers.unshift(1); console.log(numbers); // [1, 2, 3, 4] console.log(length); // 4
2、添加多个元素；
const fruits = ['banana', 'orange']; fruits.unshift('apple', 'kiwi'); console.log(fruits); // ['apple', 'kiwi', 'banana', 'orange']
5、concat()
作用：将两个或多个数组合并成一个新数组
示例用法：
1、连接两个数组：
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const concatenatedArray = array1.concat(array2); console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]
2、连接数组和值：
const array = [1, 2, 3]; const value = 4; const concatenatedArray = array.concat(value); console.log(concatenatedArray); // [1, 2, 3, 4]
3、连接多个数组：
const array1 = [1, 2]; const array2 = [3, 4]; const array3 = [5, 6]; const concatenatedArray = array1.concat(array2, array3); console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]
6、slice()
作用：从数组中提取指定范围的元素，返回一个新数组
array.slice(start,end)
参数说明：
- start 是提取元素的起始位置的索引（包含该索引对应的元素）；
- end 是提取元素的结束位置的索引（不包含该索引对应的元素）；
如果不指定 end 参数，则提取从 start 索引位置到数组末尾的所有元素。
示例用法：
1、提取指定范围的元素：
const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape']; const slicedElements = fruits.slice(1, 4); console.log(slicedElements); // ['banana', 'kiwi', 'orange']
2、提取从指定位置到数组末尾的元素：
const numbers = [1, 2, 3, 4, 5]; const slicedElementsToEnd = numbers.slice(2); console.log(slicedElementsToEnd); // [3, 4, 5]
3、复制数组：
const originalArray = [1, 2, 3, 4, 5]; const copiedArray = originalArray.slice(); console.log(copiedArray); // [1, 2, 3, 4, 5]
7、splice()
作用：删除、替换或添加元素到数组的指定位置
array.splice(start,delteteCount,item1,item2,...)
参数说明：
- start 是要修改的起始位置的索引；
- deleteCount 是要删除的元素数量。
- 可以根据需要指定 item1、item2 等参数来插入新元素。
如果不指定 deleteCount，则删除从 start 索引位置开始之后的所有元素
示例用法：
1、删除元素：
const numbers = [1, 2, 3, 4, 5]; const deletedElements = numbers.splice(2, 2); console.log(numbers); // [1, 2, 5] console.log(deletedElements); // [3, 4]
2、替换元素：
const fruits = ['apple', 'banana', 'kiwi']; const replacedElements = fruits.splice(1, 1, 'orange', 'grape'); console.log(fruits); // ['apple', 'orange', 'grape', 'kiwi'] console.log(replacedElements); // ['banana']
3、插入元素：
const colors = ['red', 'blue', 'green']; colors.splice(1, 0, 'yellow', 'purple'); console.log(colors); // ['red', 'yellow', 'purple', 'blue', 'green']
8、join()
作用：将数组中的所有元素以指定的分隔符连接成一个字符串
array.join(separator)
separator 是一个可选的字符串参数，用于指定元素之间的分隔符，默认为逗号（,）。
示例用法：
1、将数组通过"-" 隔开；
const fruits = ['apple', 'banana', 'kiwi']; const joinedString = fruits.join('-'); console.log(joinedString); // "apple-banana-kiwi"
2、默认使用逗号作为分隔符；
const numbers = [1, 2, 3, 4, 5]; const joinedStringDefault = numbers.join();
9、indexOf()
作用：返回指定元素在数组中首次出现的索引，如果未找到则返回 -1。
示例用法：
1、搜索第一次出现的下标位置；
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange']; const index = fruits.indexOf('banana'); console.log(index); // 1
2、搜索指定位置的下标位置；
const numbers = [1, 2, 3, 4, 5, 3, 2, 1]; const indexFromIndex = numbers.indexOf(3, 3); console.log(indexFromIndex); // 5
10、lastIndexOf()
作用：返回指定元素在数组中最后一次出现的索引，如果未找到则返回 -1。
示例用法：
1、搜索数组中最后一次出现的下标位置；
const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange']; const lastIndex = fruits.lastIndexOf('banana'); console.log(lastIndex); // 3
2、从指定位置开始搜索最后一次出现的下标位置；
const numbers = [1, 2, 3, 4, 5, 3, 2, 1]; const lastIndexFromIndex = numbers.lastIndexOf(3, 4); console.log(lastIndexFromIndex); // 2
11、forEach()
作用：对数组中的每个元素执行指定的函数。
forEach()
方法通常用于不需要返回新数组的情况下，对数组中的每个元素执行操作。它提供了一种方便的方式来遍历数组并对每个元素执行相同的操作。
注意：forEach() 方法无法中断或跳过迭代，它会遍历数组中的每个元素，即使在回调函数中使用了 return 语句也不会中止遍历。
示例用法：
const fruits = ['apple','banana','keiwi']; fruits.forEach((res)=>{ console.log(res) })
12、map()
作用：对数组中的每个元素执行指定的函数，并返回执行结果组成的新数组
map()
方法可以根据自定义的处理逻辑对数组中的每个元素进行转换。你可以使用它来生成新的数组，其中的元素是原始数组经过处理后的结果。常见的使用场景包括对数组中的每个元素进行计算、转换、映射等操作。
示例用法：
const numbers = [1,2,3,4,5] const doublenumbers= numbers.map((res)=>res*2) console.log(doublenumbers) //[2, 4, 6, 8, 10]
13、filter()
作用：根据指定的条件筛选出数组中符合条件的元素，返回一个新数组
使用filter 方法，可以根据数组筛选出满足特定条件的元素.
示例用法：
const numbers = [1,2,3,4,5] const filternumbers= numbers.filter((res)=>res>3) console.log(filternumbers) //[4, 5]
14、reduce()
作用：对数组中的所有元素执行指定的归约函数，返回一个单值结果
参数说明：callback 是一个回调函数，可以接受四个参数：
- accumulator：累积器，用于保存计算结果。
- currentValue：当前遍历到的元素。
- index：当前遍历到的元素的索引。
- array：正在被遍历的数组。
示例用法：
const numbers = [1,2,3,4,5] const reducenumbers= numbers.reduce((accumulator, currentValue)=>accumulator + currentValue) console.log(reducenumbers) //15
调用 reduce() 方法并传入累加函数 (accumulator, currentValue) => accumulator + currentValue，即可对数组中的所有元素进行累加计算。初始累积器值未指定，因此 reduce() 方法从数组的第一个元素开始遍历，将当前元素与累积器相加，并更新累积器的值。最终，返回的累积结果即为数组所有元素的累加和。
15、sort()
作用：对数组元素进行排序。
示例用法：
1、不传参时调用 sort 会直接修改原始数组，并返回排序后的数组；
const fruits = ['banana','apple','keiwi']; fruits.sort() console.log(fruits) //['apple', 'banana', 'keiwi']
2、传入对比函数，对比较函数接受两个参数，并返回一个表示比较结果的数字；
const nums = [10,5,8,2,3] nums.sort((a,b)=>a-b) console.log(nums) //[2, 3, 5, 8, 10]
16、reverse()
作用：颠倒数组中元素的顺序。
示例用法：
1、通过使用 reverse() 方法，你可以方便地反转数组中的元素顺序，适用于需要颠倒数组内容的情况。
const nums1 = [1,2,3,4,5] nums1.reverse() console.log(nums1) //[5, 4, 3, 2, 1]
2、reverse() 方法会直接修改原始数组，并不会创建新的数组。如果你需要保留原始数组的副本并进行反转操作，可以先使用 slice() 方法创建一个新数组，然后再调用 reverse() 方法。
const nums1 = [1,2,3,4,5] const reversenum = nums1.slice().reverse() console.log(reversenum) //[5, 4, 3, 2, 1] console.log(nums1) //[1,2,3,4,5]
17、includes()
作用：判断数组是否包含指定元素，返回 true 或 false。
示例用法：
1、检查数组中是否包含特定元素：
const numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3)); // true console.log(numbers.includes(6)); // false
2、使用 fromIndex 参数指定搜索的起始位置：
const numbers = [1, 2, 3, 4, 5]; console.log(numbers.includes(3, 2)); // true，从索引 2 开始搜索 console.log(numbers.includes(3, 4)); // false，从索引 4 开始搜索
3、检查数组中是否包含字符串：
const fruits = ['apple', 'banana', 'kiwi', 'pear']; console.log(fruits.includes('banana')); // true console.log(fruits.includes('grape')); // false
18、some()
作用：检测数组中是否有至少一个元素满足指定条件，返回 true 或 false。
示例用法：
1、检查数组中是否存在大于 10 的元素：
const numbers = [5, 8, 12, 3, 9]; const hasGreaterThan10 = numbers.some(element => element > 10); console.log(hasGreaterThan10); // true
2、检查数组中是否存在偶数：
const numbers = [3, 7, 5, 12, 9]; const hasEvenNumber = numbers.some(element => element % 2 === 0); console.log(hasEvenNumber); // true
3、检查数组中是否存在包含特定字符的字符串：
const fruits = ['apple', 'banana', 'kiwi', 'pear']; const hasStrWithChar = fruits.some(element => element.includes('a')); console.log(hasStrWithChar); // true
4、检查数组中是否存在满足复杂条件的元素：
const students = [ { name: 'Alice', score: 85 }, { name: 'Bob', score: 92 }, { name: 'Charlie', score: 76 }, ]; const hasPassingScore = students.some(student => student.score >= 80); console.log(hasPassingScore); // true
19、every()
作用：检测数组中是否所有元素都满足指定条件，返回 true 或 false。
示例用法：
- 检查数组中的所有元素是否都大于 0：
const numbers = [5, 8, 12, 3, 9]; const allGreaterThan0 = numbers.every(element => element > 0); console.log(allGreaterThan0); // true
- 检查数组中的所有元素是否都是偶数：
const numbers = [2, 4, 6, 8, 10]; const allEvenNumbers = numbers.every(element => element % 2 === 0); console.log(allEvenNumbers); // true
- 检查数组中的所有字符串是否都以大写字母开头：
const words = ['Apple', 'Banana', 'Cherry', 'Durian']; const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element)); console.log(allUpperCaseStart); // true
- 检查数组中的所有对象是否都满足特定条件：
const students = [ { name: 'Alice', score: 85 }, { name: 'Bob', score: 92 }, { name: 'Charlie', score: 76 }, ]; const allPassingScore = students.every(student => student.score >= 80); console.log(allPassingScore); // false
