JavaScript数组方法整合

前言

数组作为我们开发中最常用的几种数据结构，你了解多少种数组的方法呢

这里以三个种类去对数组进行分组，改变原数组的方法、不改变原数组的方法、遍历方法，总共整理了31种方法

文章较长，可以收藏慢慢观看

创建数组

javascript 复制代码

// 1、字面量创建
var arr = [1, 2, 3]

// 2、构造器
// 如果只有一个参数，且参数是数字，会创建等量数字长度的数组
var arr1 = new Array() // []
var arr2 = new Array(1, 2, 3) // [1, 2, 3]
var arr3 = new Array(2) // [empty × 2]

// 3、Array.of() 
// ES6方法 定义：返回由所有参数值组成的数组，如果没有参数，就返回一个空数组。
// 目的：Array.of() 出现的目的是为了解决上述构造器因参数个数不同，导致的行为有差异的问题。
var arr4 = Array.of(2) // [2]

//4、Array.from()
// 定义：用于将两类对象转为真正的数组（不改变原对象，返回新的数组）。
// 参数：
// 第一个参数(必需):要转化为真正数组的对象。
// 第二个参数(可选): 类似数组的map方法，对每个元素进行处理，将处理后的值放入返回的数组。
// 第三个参数(可选): 用来绑定this

// 1). 对象拥有length属性
let obj = {0: 'a', 1: 'b', 2:'c', length: 3};
let arr = Array.from(obj); // ['a','b','c'];
// 2). 部署了 Iterator接口的数据结构 比如:字符串、Set、NodeList对象
let arr = Array.from('hello'); // ['h','e','l','l','o']
let arr = Array.from(new Set(['a','b'])); // ['a','b']

改变数组本身的（9个）

push()

定义：push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组末尾的元素

scss 复制代码

let arr = [1]
arr.push(2, 3) // 3
console.log(arr) // [1, 2, 3]

pop()

定义: pop() 方法删除一个数组中的最后的一个元素，并且返回这个元素。

参数: 无。

css 复制代码

var arr = [1, 2, 3, 4]
arr.pop() // [1, 2, 3]

unshift()

定义：unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

参数: item1, item2, ..., itemX ,要添加到数组开头的元素

scss 复制代码

let arr = [1]
arr.unshift(2, 3) // 3
console.log(arr) // [2, 3, 1]

shift()

定义: shift()方法删除数组的第一个元素，并返回这个元素。

参数：无

scss 复制代码

let arr = [1, 2, 3]
arr.shift() // 1
console.log(arr) //[2, 3]

sort() 数组排序

定义: sort()方法对数组元素进行排序，并返回这个数组。

参数(可选): 规定排序顺序的比较函数。

默认情况下sort()方法没有传比较函数的话，默认按字母升序，如果不是元素不是字符串的话，会调用toString()方法将元素转化为字符串的Unicode(万国码)位点，然后再比较字符。

css 复制代码

// 字符串排序
var str = ['b', 'a', 'd', 'e']
str.sort() // ['a', 'b', 'c', 'd', 'e']

// 数字排序的时候，因为转换成unicode字符串后，有些数字会比较大会排在后面
var str1 = [20, 10, 1, 15, 3]
str1.sort() // [1, 10, 15, 20, 3]

比较函数的两个参数：

sort的比较函数有两个默认参数，要在函数中接收这两个参数，这两个参数是数组中两个要比较的元素，通常我们用 a 和 b 接收两个将要比较的元素：

若比较函数返回值<0，那么a将排到b的前面;
若比较函数返回值=0，那么a 和 b 相对位置不变；
若比较函数返回值>0，那么b 排在a 将的前面；

sort排序常见用法：

1、数组元素为数字的升序、降序

javascript 复制代码

var arr = [8, 1, 9, 11, 2, 91, 22]
// 升序
arr.sort((a, b)=> {
    return a - b
})
console.log(arr) // [1, 2, 8, 9, 11, 22, 91]

// 降序
arr.sort((a, b)=>{
    return b - a 
})
console.log(arr) // [91, 22, 11, 9, 8, 2, 1]

2、数组多条件排序

yaml 复制代码

var arr = [{id: 2, age: 18}, {id: 1, age: 18}, {id: 5, age: 18}, {id: 1, age: 28}, {id: 1, age: 14}, {id: 3, age: 22}]
arr.sort((a, b) => {
    // 如果id一致， 按年龄升序
    if(a.id === b.id){
        return a.age - b.age
    }else{ // 如果id不一致 按id排序
        return a.id - b.id
    }
})

reverse()

定义: reverse() 方法用于颠倒数组中元素的顺序。

参数: 无

scss 复制代码

var arr = [1, 2, 3]
arr.reverse()
console.log(arr) // [3, 2, 1]

splice()

定义： splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

语法：

perl 复制代码

 arr.splice(index,howmany,item1,.....,itemX)

参数:

index：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany：可选。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX：可选。向数组添加的新项目。

返回值: 如果有元素被删除,返回包含被删除项目的新数组。

scss 复制代码

// 删除元素
var arr = [1, 2, 3, 4, 5]
arr.splice(0,1) //[1]
console.log(arr) // [2, 3, 4, 5]
// index为负数 代表从最后的index元素开始
arr.splice(-2, 1) // [4]
console.log(arr) // [2, 3, 5]

// 添加元素
var arr = [1, 2, 3, 4, 5]
arr.splice(0, 0, 'a') // []
console.log(arr) // ['a', 1, 2, 3, 4, 5]

// 删除并添加
arr.splice(1, 1, 'b') // [1]
console.log(arr) // ['a', 'b', 2, 3, 4, 5]

copyWithin()

定义: 在当前数组内部，将指定位置的成员复制到其他位置,并返回这个数组。

语法:

arduino 复制代码

 arr.copyWithin(target, start = 0, end = this.length)

参数:

三个参数都是数值，如果不是，会自动转为数值.

target（必需）：从该位置开始替换数据。如果为负值，表示倒数。
start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
end（可选）：到该位置前停止读取数据，默认等于数组长度。使用负数可从数组结尾处规定位置。

css 复制代码

var arr = [1, 2, 3, 4, 5]
arr.copyWithin(0, 3, 4) //[4, 2 ,3, 4, 5]

fill()

定义: 使用给定值，填充一个数组。

参数:

第一个元素(必须): 要填充数组的值

第二个元素(可选): 填充的开始位置,默认值为0

第三个元素(可选)：填充的结束位置，默认是为this.length

scss 复制代码

var arr = [1, 2, 3, 4, 5]
arr.fill(8) // [8, 8, 8, 8, 8]
arr.fill(0, 0, 3) // [0, 0, 0, 8, 8]

不改变原数组的方法(10个)

slice()

定义：方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象，且原数组不会被修改。

语法:

arduino 复制代码

arr.slice(begin, end);

参数:

begin(可选): 索引数值,接受负值，从该索引处开始提取原数组中的元素,默认值为0。

end(可选):索引数值(不包括),接受负值，在该索引处前结束提取原数组元素，默认值为数组末尾(包括最后一个元素)

ini 复制代码

var arr = [1, 2, 3, 4, 5]
var arr1 = arr.slice(0,2) // [1, 2]

// slice是浅拷贝 如果数据是基础数据类型的话 修改不会影响到原数组
arr1[0] = 'a'
console.log(arr1) // ['a', 2]
console.log(arr) // [1, 2, 3, 4, 5]

//如果数据是引用数据类型， 修改数组数据会影响到其他引用数组
var list = [{id: 1}, {id: 2}, {id: 3}]
var list1 = list.slice(0,1) // [{id: 1}]
list1[0].id = 88 
console.log(list) // [{id: 88}, {id: 2}, {id: 3}]
list[0].id = 99 
console.log(list1) // [{id: 99}]

flat()

定义：该方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。也就是数组降维操作。

语法:

css 复制代码

arr.flat([depth])

参数：

depth：指定要提取嵌套数组的结构深度(降维深度)，默认值为 1。

css 复制代码

var arr = [1, 2, 3, ['a', 'b', 'c', ['Aa']]]
arr.flat(1) // [1, 2, 3, 'a', 'b', 'c', ['Aa']]

var arr2 = [1, 2, 3, ['a', 'b', 'c', ['Aa']]]
arr.flat(2) // [1, 2, 3, 'a', 'b', 'c', 'Aa']

flatMap()

定义：数组的一个新方法，它会遍历原数组的每一个元素，并且会为每个元素都执行一次传入的回调函数，最终把所有元素执行回调函数返回的结果压缩成一个新数组，flatMap会返回一个新的数组，不会改变原数组的元素。

定义：

c 复制代码

array.flatMap(callback(currentValue index, array)=>{ ... }, thisArg)

参数：

callback: 遍历数组元素的时候，会为每一个元素都执行一次回调函数，可以传入三个参数：

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

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

array：可选的。调用flatMap方法的数组。

thisArg：执行 callbackFn 时用作 this 的值

dart 复制代码

// 展开嵌套数组
var arr = [[1, 2], [3, 4], [5, 6]]
var arr1 = arr.flatMap(arr => arr) 
console.log(arr1) // [1, 2, 3, 4, 5, 6]

// 映射并展开
var list = [1, 2, 3]
var newList = list.flatMap(num => [num, num * 2])
console.log(newList) // [1, 2, 3, 4, 5, 6]

// 过滤和转换
// 只保留偶数，并且返回*10的结果
var numList = [1, 2, 3, 4, 5, 6]
var newNumList = numList.flatMap(num => {
    if(num % 2 === 0){
        return [num * 10]
    }else{
        return []
    }
})
console.log(newNumList) // [20, 40, 60]

concat()

定义：方法用于合并两个或多个数组，返回一个新数组。

语法：

ini 复制代码

var newArr =oldArray.concat(arrayX,arrayX,......,arrayX)

参数：

arrayX（必须）：该参数可以是具体的值，也可以是数组对象。可以是任意多个。

css 复制代码

var arr = [1, 2, 3]
var arr1 = arr.concat([4, 5, 6], [7, 8, 9])
console.log(arr1) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
var arr2 = arr.concat('a', 'b', 'c')
console.log(arr2) // [1, 2, 3, 'a', 'b', 'c']

toString()

定义: toString() 方法可把数组转换为由逗号链接起来的字符串。

语法:

vbscript 复制代码

array.toString()

参数: 无。

less 复制代码

var arr = [1, 2, 3]
console.log(arr.toString()) // 1,2,3

join()

定义: join() 方法用于把数组中的所有元素通过指定的分隔符进行分隔放入一个字符串，返回生成的字符串。

语法:

c 复制代码

array.join(str)

参数:

str(可选): 指定要使用的分隔符，默认使用逗号作为分隔符。

csharp 复制代码

var arr = ['a', 'b', 'c']
var str = arr.join('-')
console.log(str)

// 当数组内是对象或是数组时的情况
var list = [[1, 2, 3], 'a', 'b', 'c', {obj: 111}]
var str1 = list.join()
console.log(str1) // '1,2,3,a,b,c,[object Object]'
// 在转换内部元素时，类似调用元素toString()方法

toLocaleString()

定义: 返回一个表示数组元素的字符串。该字符串由数组中的每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

语法:

c 复制代码

array.toLocaleString()

参数：无。

css 复制代码

var arr = [{obj: 1}, 1, 2, 1234556.123, 'a', 'b', 'c', new Date()]
console.log(arr.toLocaleString()) // [object Object],1,2,1,234,556.123,a,b,c,2024/5/10 11:41:52

indexOf()

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

语法:

c 复制代码

array.indexOf(searchElement,fromIndex)

参数:

searchElement(必须):被查找的元素

fromIndex(可选):开始查找的位置(不能大于等于数组的长度，返回-1)，接受负值，默认值为0。

严格相等的搜索:

数组的indexOf搜索跟字符串的indexOf不一样,数组的indexOf使用严格相等 === 搜索元素，即数组元素要完全匹配才能搜索成功

less 复制代码

var arr = [1, 2, 4, 5, 'a', 'a']
console.log(arr.indexOf(3)) // -1
console.log(arr.indexOf('a')) // 4

lastIndexOf()

定义: 方法返回指定元素,在数组中的最后一个的索引，如果不存在则返回 -1。（从数组后面往前查找）

语法:

c 复制代码

array.lastIndexOf(searchElement,fromIndex)

参数:

searchElement(必须): 被查找的元素

fromIndex(可选): 逆向查找开始位置，默认值数组的长度-1，即查找整个数组。

less 复制代码

var arr = [1, 2, 4, 5, 'a', 'a']
console.log(arr.lastIndexOf(3)) // -1
console.log(arr.lastIndexOf('a')) // 5

includes()

定义：返回一个布尔值，表示某个数组是否包含给定的值

语法：

ini 复制代码

array.includes(searchElement,fromIndex=0)

参数：

searchElement(必须):被查找的元素

fromIndex(可选):默认值为0，参数表示搜索的起始位置，接受负值。正值超过数组长度，数组不会被搜索，返回false。负值绝对值超过长数组度，重置从0开始搜索。

includes方法是为了弥补indexOf方法的缺陷而出现的:

indexOf方法不能识别NaN
indexOf方法检查是否包含某个值不够语义化，需要判断是否不等于-1，表达不够直观

less 复制代码

var arr = [1, 2, 3, NaN, 'a']
console.log(arr.includes(NaN)) // true
console.log(arr.includes(2)) // true
console.log(arr.includes(2, 3)) // false

遍历方法(12个)

forEach

定义: 按升序为数组中含有效值的每一项执行一次回调函数。

语法：

javascript 复制代码

array.forEach(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

注意：

无法中途退出循环，只能用return退出本次回调，进行下一次回调。
对于空数组是不会执行回调函数的
对于已在迭代过程中删除的元素，或者空元素会跳过回调函数
遍历次数再第一次循环前就会确定，再添加到数组中的元素不会被遍历。
如果已经存在的值被改变，则传递给 callback 的值是遍历到他们那一刻的值。

javascript 复制代码

var arr = [1, 2, 3]
var obj = {name: '张三'}
var target = arr.forEach((value, index, array)=>{
    arr[3] = 'a'
    arr.push(4)
    console.log(value) // 1, 2, a
    console.log(this.name) // 张三 张三 张三
    return value 
    console.log(value) // 不执行
}, obj)
console.log(target) // undefined

every

定义: 方法用于检测数组所有元素是否都符合函数定义的条件，返回一个布尔值，只有当所有元素都通过了测试，才会返回 true。

语法：

javascript 复制代码

array.every(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

注意：

当数组为空的时候使用every，条件不论是怎么样的，都会返回true

ini 复制代码

var arr = [1, 2, 3, 'a']
console.log(arr.every(item => typeof item === 'string')) // false
console.log([].every(item => typeof item === 'string')) // true

some

定义: 数组中的是否有满足判断条件的元素，返回一个布尔值，如果有一个或以上通过测试就返回 true。

语法：

javascript 复制代码

array.some(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

注意：

当数组为空的时候使用some，条件不论是怎么样的，都会返回false

ini 复制代码

var arr = [1, 2, 3, 'a']
console.log(arr.some(item => typeof item === 'string')) // true
console.log([].some(item => typeof item === 'string')) // false

filter

定义: 返回一个新数组, 其包含通过所提供函数实现的测试的所有元素

语法：

javascript 复制代码

var newArr = array.filter(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

javascript 复制代码

var arr = [1, 2, 3, 'a']
var arr1 = arr.filter(item => typeof item === 'string')
console.log(arr1) // ['a']

map

定义: 创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

语法：

javascript 复制代码

var newArr = array.map(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

javascript 复制代码

var arr = [1, 2, 3, 4]
var arr1 = arr.filter(item => {
    return item * 10
})
console.log(arr1) // [10, 20, 30, 40]

reduce

定义：reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，最终合并为一个值。

语法：

javascript 复制代码

array.reduce(function(prev, curr, index, arr), initialValue)

参数：

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. total(必须)，初始值, 或者上一次调用回调返回的值
    2. currentValue(必须),数组当前元素的值
    3. index(可选), 当前元素的索引值
    4. arr(可选),数组对象本身

initialValue(可选): 初始值

javascript 复制代码

var arr = [1, 2, 3, 4, 5]
var sum = arr.reduce((prev, curr)=>{
    return prev + curr
}) // 15

reduceRight

定义：reduceRight() 方法对累加器和数组中的每个元素（从右到左）应用一个函数，最终合并为一个值。

其他全部同reduce

find

定义：用于找出第一个符合条件的数组成员，并返回该成员，如果没有符合条件的成员，则返回undefined。

语法：

javascript 复制代码

var newArr = array.find(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

javascript 复制代码

var arr = [1, 2, 3]
console.log(arr.find(item => item > 1)) // 2
console.log(arr.find(item => item > 5)) // undefind

findIndex

定义：返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

语法：

javascript 复制代码

var newArr = array.findIndex(function(currentValue, index, arr), thisValue)

参数:

function(必须): 数组中每个元素需要调用的函数。

scss 复制代码

// 回调函数的参数
    1. currentValue(必须),数组当前元素的值
    2. index(可选), 当前元素的索引值
    3. arr(可选),数组对象本身

thisValue(可选): 当执行回调函数时this绑定对象的值，默认值为undefined

javascript 复制代码

var arr = [1, 2, 3]
console.log(arr.findIndex(item => item > 1)) // 1
console.log(arr.findIndex(item => item > 5)) // -1

entries

返回一个数组迭代器对象，包含键名键值

lua 复制代码

var arr = ['a', 'b', 'c']
var arr1 = arr.entries()

console.log(arr1.next()) //{value: [0, 'a'], done: false}
console.log(arr1.next()) //{value: [1, 'b'], done: false}
console.log(arr1.next()) //{value: [2, 'c'], done: false}
console.log(arr1.next()) //{value: undefined, done: true}

keys

返回一个数组迭代器对象，只含键名

lua 复制代码

var arr = ['a', 'b', 'c']
var arr1 = arr.keys()

console.log(arr1.next()) //{value: 0, done: false}
console.log(arr1.next()) //{value: 1, done: false}
console.log(arr1.next()) //{value: 2, done: false}
console.log(arr1.next()) //{value: undefined, done: true}

values

返回一个数组迭代器对象，只含键值

lua 复制代码

var arr = ['a', 'b', 'c']
var arr1 = arr.keys()

console.log(arr1.next()) //{value: 'a', done: false}
console.log(arr1.next()) //{value: 'b', done: false}
console.log(arr1.next()) //{value: 'c', done: false}
console.log(arr1.next()) //{value: undefined, done: true}

结尾

陆陆续续写了两三天，自己对于数组的认知也清晰不少，如果有写的不正确得地方欢迎各位大佬纠正！

希望大家看完可以有收获，喜欢的话，给作者点点赞，后续更新对象、字符串等基础方法

JavaScript数组方法整合

前言

创建 数组

改变数组本身的（9个）

push()

pop()

unshift()

shift()

sort() 数组排序

比较函数的两个参数：

sort排序常见用法：

reverse()

splice()

copyWithin()

fill()

不改变原数组的方法(10个)

slice()

flat()

flatMap()

concat()

toString()

join()

toLocaleString()

indexOf()

lastIndexOf()

includes()

遍历方法(12个)

forEach

every

some

filter

map

reduce

reduceRight

find

findIndex

entries

keys

values

结尾

创建数组