JS数组方法最全最详细总结

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

返回值新的数组对象

参数 slice(begin,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 也会一直提取到原数组末尾。

let arr=[1,2,3,4,5]

//begin 参数

//1.

//如果省略 begin，则 slice 从索引 0 开始。

let newArr1=arr.slice()

console.log(newArr1) //[ 1, 2, 3, 4, 5 ]

//2.

//提取起始处的索引（从 0 开始），从该索引开始提取原数组元素

//如果 end 被省略，则 slice 会一直提取到原数组末尾。

let newArr2=arr.slice(1) //[ 2, 3, 4, 5 ]

console.log(newArr2)

//3.

//如果 begin 大于原数组的长度，则会返回空数组。

let newArr3=arr.slice(6)

console.log(newArr3) //[]

//4.

//如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取

//slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）

let newArr4=arr.slice(-2)

console.log(newArr4) //[ 4, 5 ]

//end 参数

//1.

// 提取终止处的索引（从 0 开始），

// 在该索引处结束提取原数组元素。

// slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。

let newArr5=arr.slice(1,2)

console.log(newArr5) //[ 2 ]

//2.

// 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。

// slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

let newArr6=arr.slice(-2,-1)

console.log(newArr6) //[ 4 ]

//3.

// 如果 end 被省略，则 slice 会一直提取到原数组末尾。

// 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

let newArr7=arr.slice(1)

let newArr8=arr.slice(1,6)

console.log(newArr7) //[ 2, 3, 4, 5 ]

console.log(newArr8) //[ 2, 3, 4, 5 ]

//补充 如果某元素是 对象引用 若该对象改变 新数组和原来数组的该元素也会改变

let obj={a:1}

let arr1=[1,2,obj]

let newArr = arr1.slice()

console.log(arr1,newArr) //arr [ 1, 2, { a: 1 } ] newArr [ 1, 2, { a: 1 } ]

obj.b=2

console.log(arr1,newArr) //arr [ 1, 2, { a: 1, b: 2 } ] newArr [ 1, 2, { a: 1, b: 2 } ]

• 详解

slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。原数组的元素会按照下述规则拷贝：

• 如果该元素是个对象引用 （不是实际的对象），slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变，则新的和原来的数组中的这个元素也会发生改变。

• 对于字符串、数字及布尔值来说（不是 String、Number 或者 Boolean 对象），slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值，将不会影响另一个数组。

如果向两个数组任一中添加了新元素，则另一个不会受到影响。

splice()

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

返回值被删除元素组成的新的数组对象

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

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

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() 将只删除数组元素。

//start 参数

//1.指定修改的开始位置（从0计数）。

//只有 start 参数 从开始位置删除到数组末尾

let arr1=[1,2,3,4,5]

let newArr1=arr1.splice(2)

console.log(arr1) //改变原数组 [ 1, 2 ]

console.log(newArr1) //返回值 删除的元素组成的数组 [ 3, 4, 5 ]

//2.若省略start参数 返回 空数组[]

let arr2=[1,2,3,4,5]

let newArr2=arr2.splice()

console.log(arr2) // [ 1, 2, 3, 4, 5 ]

console.log(newArr2) //返回值 未删除元素返回空数组 []

//3.如果超出了数组的长度，则从数组末尾开始添加内容

let arr3=[1,2,3,4,5]

let newArr3=arr3.splice(10,0,1)

console.log(arr3) // [ 1, 2, 3, 4, 5, 1 ]

console.log(newArr3) //返回值 []

//4.如果是负值，则表示从数组末位开始的第几位

//（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）

let arr4=[1,2,3,4,5]

let newArr4=arr4.splice(-2)

console.log(arr4) // [ 1, 2, 3 ]

console.log(newArr4) //返回值 [ 4, 5 ]

//5.如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

let arr5=[1,2,3,4,5]

let newArr5=arr5.splice(-6)

console.log(arr5) // []

console.log(newArr5) //返回值 [ 1, 2, 3, 4, 5 ]

//deleteCount 参数 可选

//1.整数，表示要移除的数组元素的个数。

let arr6=[1,2,3,4,5]

let newArr6=arr6.splice(1,2)

console.log(arr6) // [ 1, 4, 5 ]

console.log(newArr6) //返回值 [ 2, 3 ]

//2.如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

let arr7=[1,2,3,4,5]

let newArr7=arr7.splice(1,10)

console.log(arr7) // [ 1 ]

console.log(newArr7) //返回值 [ 2, 3, 4, 5 ]

//3.如果 deleteCount 被省略了，或者它的值大于等于array.length - start

//(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。

let arr8=[1,2,3,4,5]

let newArr8=arr8.splice(1,5)

console.log(arr8) // [ 1 ]

console.log(newArr8) //返回值 [ 2, 3, 4, 5 ]

let arr9=[1,2,3,4,5]

let newArr9=arr9.splice(1)

console.log(arr9) // [ 1 ]

console.log(newArr9) //返回值 [ 2, 3, 4, 5 ]

//4.如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

let arr10=[1,2,3,4,5]

let newArr10=arr10.splice(1,-1,100)

console.log(arr10) // [ 1, 100, 2, 3, 4, 5 ]

console.log(newArr10) //返回值 []

// item1, item2, … 参数 可选

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

let arr11=[1,2,3,4,5]

let newArr11=arr11.splice(3,0,100,101,102)

console.log(arr11) // [ 1, 2, 3, 100,101,102, 4, 5 ]

console.log(newArr11) //返回值 []

补充

• 由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

copyWithin()

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置在数组内部替换自身元素，并返回它，不会改变原数组的长度,改变原数组。

返回值 改变后的数组

参数 arr.copyWithin(target[, start[, end]])

target

• 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。

• 如果 target 大于等于 arr.length，将会不发生拷贝。如果 target 在 start 之后，复制的序列将被修改以符合 arr.length。

start

• 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。

• 如果 start 被忽略，copyWithin 将会从0开始复制。

end

• 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。

• 如果 end 被忽略，copyWithin 方法将会一直复制至数组结尾（默认为 arr.length）。

返回值

//1.

//target 参数 从0开始 复制序列到该位置

//start 参数 默认为0

//end 参数 默认 复制至数组结尾（默认为 arr.length）

let arr1=[1,2,3,4,5]

let newArr1=arr1.copyWithin(2)

//从索引2开始替换 从索引0到数组结尾复制数据

console.log(arr1) //改变原数组 [ 1, 2, 1, 2, 3 ]

console.log(newArr1) //返回改变后的数组 [ 1, 2, 1, 2, 3 ]

//2.

//target 可以是 负数

let arr2=[1,2,3,4,5]

let newArr2=arr2.copyWithin(-2)

//从倒数第二个元素开始替换 从索引0到数组结尾复制数据

console.log(arr2) //改变原数组 [ 1, 2, 3, 1, 2 ]

console.log(newArr2) //返回改变后的数组 [ 1, 2, 3, 1, 2 ]

//3.

//start参数 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。

//end参数 0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。

//如果是负数， end 将从末尾开始计算。

let arr3=[1,2,3,4,5]

let newArr3=arr3.copyWithin(1,-3,-1)

//从索引为1开始替换 从倒数第三个元素到最后一个元素复制数据

console.log(arr3) //改变原数组 [ 1, 3, 4, 4, 5 ]

console.log(newArr3) //返回改变后的数组 [ 1, 3, 4, 4, 5 ]

详解

参数 target、start 和 end 必须为整数。

如果 start 为负，则其指定的索引位置等同于 length+start，length 为数组的长度。end 也是如此。

copyWithin 方法不要求其 this 值必须是一个数组对象；除此之外，copyWithin 是一个可变方法，它可以改变 this 对象本身，并且返回它，而不仅仅是它的拷贝。

copyWithin 就像 C 和 C++ 的 memcpy 函数一样，且它是用来移动 Array 或者 TypedArray 数据的一个高性能的方法。复制以及粘贴序列这两者是为一体的操作;即使复制和粘贴区域重叠，粘贴的序列也会有拷贝来的值。

copyWithin 函数被设计为通用式的，其不要求其 this 值必须是一个数组对象。

copyWithin 是一个可变方法，它不会改变 this 的长度 length，但是会改变 this 本身的内容，且需要时会创建新的属性。

fill()

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

改变原数组**

返回值修改后的数组

参数 arr.fill(value[, start[, end]])

value

用来填充数组元素的值。

start 可选

起始索引，默认值为0。

end 可选

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

//value 填充数组

//start 起始索引 默认值0 可以负值 表示从后往前数第n个

//end 终止索引 默认值 this.length 不包括该位置 可以负值 表示从后往前数第n个

//1.

//只有value 参数

let arr1=[1,2,3,4,5]

let newArr1=arr1.fill(100)

console.log(arr1) //改变原数组 [ 100, 100, 100, 100, 100 ]

console.log(newArr1) //返回改变后的数组 [ 100, 100, 100, 100, 100 ]

//2.

//只有value start 参数

let arr2=[1,2,3,4,5]

let newArr2=arr2.fill(9,1)

console.log(arr2) //改变原数组 [ 1, 9, 9, 9, 9 ]

console.log(newArr2) //返回改变后的数组 [ 1, 9, 9, 9, 9 ]

//3.

//正常使用

let arr3=[1,2,3,4,5]

let newArr3=arr3.fill(9,1,3)

console.log(arr3) //改变原数组 [ 1, 9, 9, 4, 5 ]

console.log(newArr3) //返回改变后的数组 [ 1, 9, 9, 4, 5 ]

//4.

//start end 可以是负数

let arr4=[1,2,3,4,5]

let newArr4=arr4.fill(10,-3,-1)

console.log(arr4) //改变原数组 [ 1, 2, 10, 10, 5 ]

console.log(newArr4) //返回改变后的数组 [ 1, 2, 10, 10, 5 ]

//5.

//start end 范围出错 不进行改变

let arr5=[1,2,3,4,5]

let newArr5=arr5.fill(10,-2,-3)

console.log(arr5) //改变原数组 [ 1, 2, 3, 4, 5 ]

console.log(newArr5) //返回改变后的数组 [ 1, 2, 3, 4, 5 ]

//补充

//当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。

let arr6=[1,2,3,4,5]

let obj={a:1}

let newArr6=arr6.fill(obj,1,2)

console.log(arr6) //改变原数组 [ 1, { a: 1 }, 3, 4, 5 ]

console.log(newArr6) //返回改变后的数组 [ 1, { a: 1 }, 3, 4, 5 ]

obj.a=999

console.log(arr6) //改变原数组 [ 1, { a: 999 }, 3, 4, 5 ]

console.log(newArr6) //返回改变后的数组 [ 1, { a: 999 }, 3, 4, 5 ]

详解

fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默认值分别为 0 和 this 对象的 length 属性值。

如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end。

fill 方法故意被设计成通用方法, 该方法不要求 this 是数组对象。

fill 方法是个可变方法, 它会改变调用它的 this 对象本身, 然后返回它, 而并不是返回一个副本。

当一个对象被传递给 fill方法的时候, 填充数组的是这个对象的引用。

flat()

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

返回值 一个包含将数组与子数组中所有元素的新数组。

参数 arr.flat([depth]) 指定要提取嵌套数组的结构深度，默认值为 1

//1. 扁平化嵌套数组

let arr = [[1, 2, 3], [4, 5], [6]]

//参数默认为 1

let newArr = arr.flat()

console.log(arr) //不改变原数组[ [ 1, 2, 3 ], [ 4, 5 ], [ 6 ] ]

console.log(newArr) //返回值 [ 1, 2, 3, 4, 5, 6 ]

let arr1 = [1, 2, 3, [4, 5, [6]]]

let newArr1 = arr1.flat(2)

console.log(newArr1) //[ 1, 2, 3, 4, 5, 6 ]

//使用 Infinity，可展开任意深度的嵌套数组

let arr2 = [1, 2, 3, [4, 5, [6, [7, [8, [9, [10]]]]]]]

let newArr2 = arr2.flat(Infinity)

console.log(newArr2) //[1, 2, 3, 4, 5,6, 7, 8, 9, 10]

//2.flat() 方法会移除数组中的空项:

let arr3=[1,2,4]

let newArr3=arr3.flat()

console.log(newArr3) //[ 1, 2, 4 ]

替代方案

在这里插入代码片

flatMap()

四、查询方法

=================================================================

includes()

includes()方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。

参数 arr.includes(valueToFind[, fromIndex])

valueToFind 需要查询的值

fromIndex 从该位置开始查找 默认为0 可以为负值

//1.

//valueToFind 需要查找的元素值

//查找某个元素是否存在 存在返回true 不存在返回 false

let arr=[1,2,3]

console.log(arr.includes(1))//true

console.log(arr.includes(4))//false

//2.

//fromIndex 搜索的起始位置 默认为 0 可以设置负值

let arr1=[1,2,3,4,5]

console.log(arr1.includes(1))// 默认为0 true

console.log(arr1.includes(1,1)) // false

console.log(arr1.includes(3,-2))//可以为负值 false

//3.

//fromIndex 大于等于数组长度

// 如果 fromIndex 大于等于 数组的长度，则会返回 false，且该数组不会被搜索。

let arr3=[1,2,3,4,5]

console.log(arr3.includes(1,5)) //false

console.log(arr3.includes(1,100)) //false

//4.

//如果 fromIndex 为负值，如果计算出的索引小于 0，则整个数组都会被搜索。

let arr4=[1,2,3,4,5]

console.log(arr4.includes(5,-100))//true fromIndex 为负值-n 按倒数第n个元素计算 该位置索引小于0 整个数组被搜索

//5.

//作为通用方法的 includes()

// includes() 方法有意设计为通用方法。它不要求this值是数组对象，

// 所以它可以被用于其他类型的对象 (比如类数组对象)。

// 下面的例子展示了 在函数的 arguments 对象上调用的 includes() 方法。

;(function() {

console.log([].includes.call(arguments, ‘a’)); // true

console.log([].includes.call(arguments, ‘d’)); // false

})(‘a’,‘b’,‘c’); //自执行函数 与之前的js 代码 之间需要用 分号 ; 隔开 否则报错

indexOf、lastIndexOf()

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

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

返回值 索引或者-1 不改变原数组

**参数 arr.indexOf(searchElement[, fromIndex])

参数 arr.lastIndexOf(searchElement[, fromIndex])**

searchElement

要查找的元素

fromIndex 可选

indexOf

• 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。

• 如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。

• 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。

如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

lastIndexOf

• 从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。

• 如果该值大于或等于数组的长度，则整个数组会被查找。

• 如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。

• 如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

let arr=[1,99,2,3,99,4,5,1]

//indexOf 正向开始查找

//lastIndexOf 逆向开始查找

//searchElement 被查找的元素

console.log(arr)

console.log(arr.indexOf(99)) //1 正向查找到 第一个 所查元素 的索引值

console.log(arr.lastIndexOf(99)) //4 逆向查找到 第一个 所查元素 的索引值

console.log(arr.indexOf(100),arr.lastIndexOf(100))//-1 -1 如果不存在返回-1

//1.fromIndex 开始查询的位置 默认值为 0

console.log(arr.indexOf(99,2)) //4 从该位置正向查找

console.log(arr.lastIndexOf(99,2)) //1 从该位置逆向查找

//2.fromIndex 大于数组索引

console.log(arr.indexOf(99,8)) //-1 indexOf 不会查找返回-1

console.log(arr.lastIndexOf(99,8)) //4 lastIndexOf 整个数组会被查找

//3.fromIndex 可以是负值

//当值是负值时不改变查询元素的方向 -n表示倒数第n个位置

console.log(arr.indexOf(99,-5)) // 4

console.log(arr.lastIndexOf(99,-5)) // 1

//如果是负值 且超出数组长度

console.log(arr.indexOf(99,-9)) //1 indexOf 表示查询整个数组

console.log(arr.lastIndexOf(99,-9)) //-1 lastIndexOf 数组不会被查找

//注意复杂类型 问题

let obj={b:1}

let arr1=[1,2,{a:1},obj]

console.log(arr1.indexOf({a:1})) //-1

console.log(arr1.indexOf(obj)) //3

读者福利

========

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）