数组方法的使用

最新推荐文章于 2024-07-20 23:54:17 发布

烦恼请靠边

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量132

点赞数

文章标签： javascript 原型模式 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_71110616/article/details/129264572

版权

自己在写js的时候，经常会用到的数组的一些方法，这里总结了一下我自己常用到的方法，分享一下，希望对大家有帮助吧！！！

数组

Array.prototype[@@iterator]()

Array 对象的 @@iterator 方法实现了迭代协议，并允许数组被大多数期望可迭代的语法所使用，例如展开语法和 for...of 循环。它返回一个迭代器，生成数组中每个索引的值。

该属性的初始值与 Array.prototype.values 属性的初始值是相同的函数对象。

方法：

array[Symbol.iterator]()

Array.prototype.at()

at() 方法接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

at(index)

Array.prototype.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法：

concat()

concat(value0)

concat(value0, value1)

concat(value0, value1, /* … ,*/ valueN)

Array.prototype.copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度

用法：

copyWithin(target)

copyWithin(target, start)

copyWithin(target, start, end)

Array.prototype.entries()

entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。

用法：

entries()

Array.prototype.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

用法：

// 箭头函数

every((element) => { /* … */ } )

every((element, index) => { /* … */ } )

every((element, index, array) => { /* … */ } )

// 回调函数

every(callbackFn)

every(callbackFn, thisArg)

// 内联回调函数

every(function(element) { /* … */ })

every(function(element, index) { /* … */ })

every(function(element, index, array){ /* … */ })

every(function(element, index, array) { /* … */ }, thisArg)

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

用法：

fill(value)

fill(value, start)

fill(value, start, end)

参数：

value

用来填充数组元素的值。

start 可选

起始索引，默认值为 0。

end 可选

终止索引，默认值为 arr.length。

Array.prototype.filter()

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

用法

// 箭头函数

filter((element) => { /* … */ } )

filter((element, index) => { /* … */ } )

filter((element, index, array) => { /* … */ } )

// 回调函数

filter(callbackFn)

filter(callbackFn, thisArg)

// 内联回调函数

filter(function(element) { /* … */ })

filter(function(element, index) { /* … */ })

filter(function(element, index, array){ /* … */ })

filter(function(element, index, array) { /* … */ }, thisArg)

参数：

callbackFn

用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

element

数组中当前正在处理的元素。

index

正在处理的元素在数组中的索引。

array

调用了 filter() 的数组本身。

thisArg可选

执行 callbackFn 时，用于 this 的值。

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

用法：

// 箭头函数

find((element) => { /* … */ } )

find((element, index) => { /* … */ } )

find((element, index, array) => { /* … */ } )

// 回调函数

find(callbackFn)

find(callbackFn, thisArg)

// 内联回调函数

find(function(element) { /* … */ })

find(function(element, index) { /* … */ })

find(function(element, index, array){ /* … */ })

find(function(element, index, array) { /* … */ }, thisArg)

参数

callbackFn

在数组每一项上执行的函数，接收 3 个参数：

element

当前遍历到的元素。

index

当前遍历到的索引。

array

数组本身。

thisArg 可选

执行回调时用作 this 的对象。

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

用法：

// 箭头函数

findIndex((element) => { /* … */ } )

findIndex((element, index) => { /* … */ } )

findIndex((element, index, array) => { /* … */ } )

// 回调函数

findIndex(callbackFn)

findIndex(callbackFn, thisArg)

// 内联回调函数

findIndex(function(element) { /* … */ })

findIndex(function(element, index) { /* … */ })

findIndex(function(element, index, array){ /* … */ })

findIndex(function(element, index, array) { /* … */ }, thisArg)

参数：

callback

针对数组中的每个元素，都会执行该回调函数，执行时会自动传入下面三个参数：

element

当前元素。

index

当前元素的索引。

array

调用findIndex的数组。

thisArg

可选。执行callback时作为this对象的值。

Array.prototype.findLast()

findLast() 方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。

和findLast()类似，于是不进行列举

Array.prototype.findLastIndex()

findLastIndex() 方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。

和findIndex()类似，于是不进行列举

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

方法：

flat()

flat(depth)

参数：

depth 可选

指定要提取嵌套数组的结构深度，默认值为 1。

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

// 箭头函数

flatMap((currentValue) => { /* … */ } )

flatMap((currentValue, index) => { /* … */ } )

flatMap((currentValue, index, array) => { /* … */ } )

// 回调函数

flatMap(callbackFn)

flatMap(callbackFn, thisArg)

// 行内回调函数

flatMap(function(currentValue) { /* … */ })

flatMap(function(currentValue, index) { /* … */ })

flatMap(function(currentValue, index, array){ /* … */ })

flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

参数

callback

可以生成一个新数组中的元素的函数，可以传入三个参数：

currentValue

当前正在数组中处理的元素

index可选

可选的。数组中正在处理的当前元素的索引。

array可选

可选的。被调用的 map 数组

thisArg可选

可选的。执行 callback 函数时使用的this 值。

Array.prototype.forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

语法

// 箭头函数

forEach((element) => { /* … */ })

forEach((element, index) => { /* … */ })

forEach((element, index, array) => { /* … */ })

// 回调函数

forEach(callbackFn)

forEach(callbackFn, thisArg)

// 内联回调函数

forEach(function(element) { /* … */ })

forEach(function(element, index) { /* … */ })

forEach(function(element, index, array){ /* … */ })

forEach(function(element, index, array) { /* … */ }, thisArg)

参数

// 箭头函数

forEach((element) => { /* … */ })

forEach((element, index) => { /* … */ })

forEach((element, index, array) => { /* … */ })

// 回调函数

forEach(callbackFn)

forEach(callbackFn, thisArg)

// 内联回调函数

forEach(function(element) { /* … */ })

forEach(function(element, index) { /* … */ })

forEach(function(element, index, array){ /* … */ })

forEach(function(element, index, array) { /* … */ }, thisArg)

Array.from()

Array.from() 方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

用法：

// 箭头函数

Array.from(arrayLike, (element) => { /* … */ } )

Array.from(arrayLike, (element, index) => { /* … */ } )

// 映射函数

Array.from(arrayLike, mapFn)

Array.from(arrayLike, mapFn, thisArg)

// 内联映射函数

Array.from(arrayLike, function mapFn(element) { /* … */ })

Array.from(arrayLike, function mapFn(element, index) { /* … */ })

Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)

Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

参数

arrayLike

想要转换成数组的伪数组对象或可迭代对象。

mapFn 可选

如果指定了该参数，新数组中的每个元素会执行该回调函数。

thisArg 可选

可选参数，执行回调函数 mapFn 时 this 对象。

Array.prototype.includes()

查看值是否在其中

用法

includes(searchElement)

includes(searchElement, fromIndex)

Array.prototype.indexOf()

indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回 -1。

用法

indexOf(searchElement)

indexOf(searchElement, fromIndex)

参数

searchElement

要查找的元素。

fromIndex 可选

开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回 -1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即 -1 表示从最后一个元素开始查找，-2 表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于 0，则整个数组都将会被查询。其默认值为 0。

Array.isArray()

Array.isArray() 用于确定传递的值是否是一个 Array。

用法

Array.isArray(value)

Array.prototype.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

用法

join()

join(separator)

参数

separator 可选

指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号（,）分隔。如果 separator 是空字符串（""），则所有元素之间都没有任何字符。

Array.prototype.keys()

keys() 方法返回一个包含数组中每个索引键的 Array Iterator 对象

用法

keys()

Array.prototype.lastIndexOf()

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

用法

lastIndexOf(searchElement)

lastIndexOf(searchElement, fromIndex)

参数

searchElement

被查找的元素。

fromIndex 可选

从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

Array.prototype.map()

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

用法

// 箭头函数

map((element) => { /* … */ })

map((element, index) => { /* … */ })

map((element, index, array) => { /* … */ })

// 回调函数

map(callbackFn)

map(callbackFn, thisArg)

// 内联回调函数

map(function(element) { /* … */ })

map(function(element, index) { /* … */ })

map(function(element, index, array){ /* … */ })

map(function(element, index, array) { /* … */ }, thisArg)

参数

callbackFn

生成新数组元素的函数，使用三个参数：

currentValue

callbackFn 数组中正在处理的当前元素。

index

callbackFn 数组中正在处理的当前元素的索引。

array

map 方法调用的数组。

thisArg 可选

执行 callbackFn 函数时被用作 this 的值。

Array.of()

Array.of() 方法通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。

用法

Array.of(element0)

Array.of(element0, element1)

Array.of(element0, element1, /* … ,*/ elementN)

注意：Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个 length 为 7 的空数组（这意味着一个由 7 个空槽组成的数组，而不是具有实际 undefined 值的槽）。

Array.prototype.pop()

pop() 方法从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

用法

pop()：会改变原来的数组

Array.prototype.push()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

用法

push(element0)

push(element0, element1)

push(element0, element1, /* … ,*/ elementN)

Array.prototype.reduce()

语法

// 箭头函数

reduce((previousValue, currentValue) => { /* … */ } )

reduce((previousValue, currentValue, currentIndex) => { /* … */ } )

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } )

reduce((previousValue, currentValue) => { /* … */ } , initialValue)

reduce((previousValue, currentValue, currentIndex) => { /* … */ } , initialValue)

reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// 回调函数

reduce(callbackFn)

reduce(callbackFn, initialValue)

// 内联回调函数

reduce(function(previousValue, currentValue) { /* … */ })

reduce(function(previousValue, currentValue, currentIndex) { /* … */ })

reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ })

reduce(function(previousValue, currentValue) { /* … */ }, initialValue)

reduce(function(previousValue, currentValue, currentIndex) { /* … */ }, initialValue)

reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)

参数

callbackFn

一个“reducer”函数，包含四个参数：

previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。

currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。

currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。

array：用于遍历的数组。

initialValue 可选

作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

Array.prototype.reduceRight()

reduceRight() 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

用法：

// 箭头函数

reduceRight((accumulator, currentValue) => { /* … */ } )

reduceRight((accumulator, currentValue, index) => { /* … */ } )

reduceRight((accumulator, currentValue, index, array) => { /* … */ } )

reduceRight((accumulator, currentValue, index, array) => { /* … */ }, initialValue)

// 回调函数

reduceRight(callbackFn)

reduceRight(callbackFn, initialValue)

// 内联回调函数

reduceRight(function(accumulator, currentValue) { /* … */ })

reduceRight(function(accumulator, currentValue, index) { /* … */ })

reduceRight(function(accumulator, currentValue, index, array){ /* … */ })

reduceRight(function(accumulator, currentValue, index, array) { /* … */ }, initialValue)

参数

callback

一个回调函数，用于操作数组中的每个元素，它可接受四个参数：

accumulator

累加器：上一次调用回调函数时，回调函数返回的值。首次调用回调函数时，如果 initialValue 存在，累加器即为 initialValue，否则须为数组中的最后一个元素（详见下方 initialValue 处相关说明）。

currentValue

当前元素：当前被处理的元素。

index可选

数组中当前被处理的元素的索引。

array可选

调用 reduceRight() 的数组。

initialValue可选

首次调用 callback 函数时，累加器 accumulator 的值。如果未提供该初始值，则将使用数组中的最后一个元素，并跳过该元素。如果不给出初始值，则需保证数组不为空。否则，在空数组上调用 reduce 或 reduceRight 且未提供初始值（例如 [].reduce( (acc, cur, idx, arr) => {} ) ）的话，会导致类型错误 TypeError: reduce of empty array with no initial value。

Array.prototype.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

用法：

reverse()

Array.prototype.shift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

用法：

shift()

Array.prototype.slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

用法：

slice()

slice(start)

slice(start, end)

参数

begin 可选

提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。如果省略 begin，则 slice 从索引 0 开始。如果 begin 超出原数组的索引范围，则会返回空数组。

end 可选

提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1, 2, 3 的元素）。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。如果 end 被省略，则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

Array.prototype.some()

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

用法

// 箭头函数

some((element) => { /* … */ } )

some((element, index) => { /* … */ } )

some((element, index, array) => { /* … */ } )

// 回调函数

some(callbackFn)

some(callbackFn, thisArg)

// 内联回调函数

some(function(element) { /* … */ })

some(function(element, index) { /* … */ })

some(function(element, index, array){ /* … */ })

some(function(element, index, array) { /* … */ }, thisArg)

参数

callback

用来测试每个元素的函数，接受三个参数：

element

数组中正在处理的元素。

index 可选

数组中正在处理的元素的索引值。

array可选

some()被调用的数组。

thisArg可选

执行 callback 时使用的 this 值。

Array.prototype.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

用法

// 无函数

sort()

// 箭头函数

sort((a, b) => { /* … */ } )

// 比较函数

sort(compareFn)

// 内联比较函数

sort(function compareFn(a, b) { /* … */ })

参数：

compareFn 可选

用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的 Unicode 位点进行排序。

第一个用于比较的元素。

第二个用于比较的元素。

Array.prototype.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组，并以数组形式返回被修改的内容。此方法会改变原数组。

用法

splice(start)

splice(start, deleteCount)

splice(start, deleteCount, item1)

splice(start, deleteCount, item1, item2, itemN)

参数

start

指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数，这意味着 -n 是倒数第 n 个元素并且等价于 array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。

deleteCount 可选

整数，表示要移除的数组元素的个数。如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

item1, item2, ... 可选

要添加进数组的元素，从start 位置开始。如果不指定，则 splice() 将只删除数组元素。