JS学习：数组方法小结

欢dog

已于 2023-02-20 15:19:40 修改

阅读量182

点赞数

文章标签： javascript 前端开发语言学习

于 2023-01-31 16:46:40 首次发布

本文链接：https://blog.csdn.net/qq_52013792/article/details/128819403

版权

一、前言

作为js的基本数据类型Object中的其中一种，数组在日常开发中是频繁被开发者所使用的，本文就总结一下其自带的工具方法，方便我们的日常开发。

二、数组的创建

1.数组字面量表示法

const arr1 = [] //创建空数组
const arr2 = [0,1,2] //创建包含三项数据且数据为0,1,2的数组

2.构造函数

const arr1 = new Array() //创建一个空数组
const arr2 = new Array(10) //创建包含十项数据且数据都为0的数组
 //当参数不为数字或不止一个时，则将该参数作为元素组成数组
const arr3 = new Array('10')
const arr4 = new Array(1,2)

三、数组的方法

数组的原型方法主要有以下几种：

1.join()

参数：分隔符，默认值为','
参数类型：string
功能：将输入的参数作为分隔符将数组元素串联
返回类型：string

const arr = [1,2,3]
console.log(arr.join()) //1,2,3
console.log(arr.join('-')) //1-2-3

2.push()

参数：需要加入数组的元素
参数类型：any
功能：将输入的参数添加到数组末尾，并返回数组的长度
返回类型：number

const arr = [1,2,3]
const newLen = arr.push(0)
console.log(newLen) //4
console.log(arr) //[1,2,3,0]

3.pop()

参数：无
参数类型：无
功能：删除并返回数组末尾元素
返回类型：any

const arr = [1,2,3]
const lastItem = arr.pop()
console.log(lastItem) //3
console.log(arr) //[1,2]

4.shift()

参数：无
参数类型：无
功能：删除并返回数组首位元素，若数组为空则返回undefined
返回类型：any

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

5.unshift()

参数：需要加入数组的元素
参数类型：any
功能：将输入的参数添加到数组首位，并返回数组的长度
返回类型：number

const arr = [1,2,3]
const newLen = arr.unshift(0)
console.log(newLen) //4
console.log(arr) //[0,1,2,3]

6.sort()

参数：规定排序顺序(可选)，默认按字母顺序排序
参数类型：function
功能：升序排列数组元素（会改变原数组）
返回类型：array

//默认按字母排序时'20'会排在'3'的前面
const arr = [20,1,3]
console.log(arr1.sort()) //[1,20,3]
console.log(arr1) //[1,20,3]
//处理这类问题的解决方法就是给它一个规定排序顺序的函数
const compare = (val1, val2)=>val1-val2
const arr2 = [20,1,3]
console.log(arr2.sort(compare)) //[1,3,20]
console.log(arr2) //[1,3,20]

7.reverse()

参数：无
参数类型：无
功能：反转数组元素（会改变原数组）
返回类型：array

const arr = [1,3,2]
console.log(arr.sort()) //[2,3,1]
console.log(arr) //[2,3,1]

8.concat()

参数：需要连接的数组
参数类型：array
功能：连接两个或多个数组
返回类型：array

const arr1 = [1,2,3]
const arr2 = [4,5,6]
console.log(arr1.concat(arr2)) //[1,2,3,4,5,6]

9.slice()

参数：
1. 参数1--起始位置下标
2. 参数2(可选)--结束位置下标，默认值为数组末尾
参数类型：number
功能：返回指定起始位置到终止位置组成的新数组（不包括终止位置元素）
返回类型：array

const arr = [1,2,3,4,5]
console.log(arr.slice(1)) //[2,3,4,5]
console.log(arr.slice(1,4)) //[2,3,4]
console.log(arr.slice(1,-1)) //[2,3,4]

10.splice()

参数：
1. 参数1--起始位置下标
2. 参数2(可选)--表示要移除的元素个数
3. 参数*(参数2后的任意个数参数可选)--表示需要插入的元素
参数类型：number、number、any
功能：返回指定起始位置移除的元素组成的新数组（包括起始位置元素）
返回类型：array

const arr = [1,2,3,4,5]
const deleteArr = arr.splice(3)
console.log(deleteArr) //[4,5]
console.log(arr) //[1,2,3]
const arr = [1,2,3,4,5]
const deleteArr = arr.splice(3,1)
console.log(deleteArr) //[4]
console.log(arr) //[1,2,3,5]
const arr = [1,2,3,4,5]
const deleteArr = arr.splice(3,1,2)
console.log(deleteArr) //[4]
console.log(arr) //[1,2,3,2,5]

11.indexOf()

参数：
1. 参数1--需要查找的元素
2. 参数2(可选)--查找起点位置下标
参数类型：any、number
功能：返回指定元素在数组中的下标，未找到则返回-1(从前向后找)
返回类型：number

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

12.lastIndexOf()

参数：
1. 参数1--需要查找的元素
2. 参数2(可选)--查找起点位置下标
参数类型：any、number
功能：返回指定元素在数组中的下标，未找到则返回-1(从后向前找)
返回类型：number

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

13.forEach()

参数：数组每一项需要运行的函数
参数类型：function
功能：数组每一项运行指定函数
函数有默认传参分别为：当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：无

const arr = [1,2]
arr.forEach((item,index,currentArr)=>{
    console.log(item + " | " + index + " | " + currentArr)
})
//输出结果：
//1 | 0 | [1,2]
//2 | 1 | [1,2]

14.map()

参数：数组每一项需要运行的函数
参数类型：function
功能：返回数组每一项运行指定函数后的值组成的新数组
函数有默认传参分别为：当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：array

const arr = [1,2]
const newArr = arr.map((item)=>item*item)
console.log(newArr)//[1,4]

15.filter()

参数：进行筛选的条件函数
参数类型：function
功能：返回数组每一项符合条件函数组成的新数组
函数有默认传参分别为：当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：array

const arr = [1,2,3,4,5,6]
const newArr = arr.filter((item)=>item%3===0)
console.log(newArr)//[3,6]

16.every()

参数：进行判断的条件函数
参数类型：function
功能：返回数组每一项是否符合条件函数
函数有默认传参分别为：当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：boolean

const arr = [1,2]
const isLessThan3 = arr.every((item)=>item<3)
console.log(isLessThan3)//true

17.some()

参数：进行判断的条件函数
参数类型：function
功能：返回数组是否有一项元素符合条件函数
函数有默认传参分别为：当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：boolean

const arr = [1,2]
const isLessThan3 = arr.some((item)=>item<3)
console.log(isLessThan3)//true

18.reduce()

参数：
1. 参数1--数组每一项需要运行的函数
2. 参数2--传给函数的初始值(可选)
参数类型：function、any
功能：返回数组每一项运行函数结果的累加值（从前向后遍历）
函数有默认传参分别为：初始值(必选)、当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：any

const arr = [1,2]
const getSum = (total, item)=>total + item
const result1 = arr.reduce(getsum)
console.log(result1)//3
const result2 = arr.reduce(getsum,5)
console.log(result2)//8

19.reduceRight()

参数：
1. 参数1--数组每一项需要运行的函数
2. 参数2--传给函数的初始值(可选)
参数类型：function、any
功能：返回数组每一项运行函数结果的累加值（从后向前遍历）
函数有默认传参分别为：初始值(必选)、当前数组元素(必选)、当前元素下标(可选)以及数组本身(可选)
返回类型：any

const arr = [1,2]
const getSum = (total, item)=>total + item
const result1 = arr.reduceRight(getsum)
console.log(result1)//3
const result2 = arr.reduceRight(getsum,5)
console.log(result2)//8