JavaScript常用数组方法详解
2022/7/11 1:22:40
本文主要是介绍JavaScript常用数组方法详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- JavaScript常用数组方法详解
- 基本操作
- 获取数组长度
- 获取数组成员索引
- 增加操作
- unshift()
- push()
- concat()
- splice()
- 删除操作
- shift()
- pop()
- splice()
- 排序操作
- sort()
- reverse()
- 筛选操作
- filter()
- includes()
- 更多
- 基本操作
JavaScript常用数组方法详解
这里创建了一个arr1
数组
let arr1 = [7,4,1,8,5,2,0,9,6,3]
基本操作
获取数组长度
arr1.length
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.legth) // 返回结果为10
获取数组成员索引
arr1.indexOf(val1,val2)
,val1
为要查找的数组成员
,val2
为查询的开始位置(Number)
val2
为空时,默认从下标为0
开始搜索
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.indexOf(5)) // 返回结果为4,从下标0开始搜索,arr[4] = 5 console.log(arr1.indexOf(5,4)) // 返回结果为4,从下标4开始搜索,arr[4] = 5 console.log(arr1.indexOf(5,6)) // 返回结果为-1,因为起始搜索位置为6
注: 当 要查找的数组成员 不存在数组时,返回值为:-1
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.indexOf(10)) // 返回结果为-1 , 因为10不存在于arr1数组
增加操作
unshift()
arr1.unshift(val,...)
: 向数组的开头添加一个或者多个元素 , 并且返回新的数组的长度
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.unshift(110,120)) // 返回结果为12 , 此时 arr1 = [110, 120, 7, 4, 1, 8, 5, 2, 0, 9, 6, 3]
push()
arr1.push(val,...)
: 与arr1.unshift()
用法相同 , 区别在于arr1.push()
是在数组的末尾添加一个或多个元素 , 同样返回值为新的数组长度
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.unshift(110,120)) // 返回结果为12 , 此时 arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 110, 120]
concat()
arr1.concat()
: 插入给定的一个或多个元素,能够把传递的所有参数按顺序添加到数组的尾部 , 返回一个新数组,而不是在原来的基础上添加新元素
let arr1 = [7,4,1,8,5,2,0,9,6,3] let arr2 = arr1.concat('NueXini','JavaScript') console.log(arr1) // arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 110, 120] console.log(arr2) // arr2 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 'NueXini', 'JavaScript']
splice()
arr1.splice(start, deleteCount,val1,val2,...)
参数 | 解释 | 值 |
---|---|---|
start | 插入位置 | 一般是0 或arr1.length |
deleteCount | 要删除的个数 | 0 为不删除 , 增加操作的时候一般填0 |
val | 当增加操作的时候添加的元素 | (可选)可以是元素,也可以是数组 |
let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.splice(0,0,'NueXini','JavaScript') console.log(arr1) // arr1 = ['NueXini', 'JavaScript', 7, 4, 1, 8, 5, 2, 0, 9, 6, 3]
let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.splice(arr1.length,0,'NueXini','JavaScript') console.log(arr1) // arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6, 3, 'NueXini', 'JavaScript']
// 替换功能 let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.splice(0,2,'NueXini','JavaScript') // 从下标为0开始,删除2个,在插入'NueXini','JavaScript' console.log(arr1) // arr1 = ['NueXini', 'JavaScript', 1, 8, 5, 2, 0, 9, 6, 3]
删除操作
shift()
arr1.shift()
: 删除数组的第一项,并返回删除前第一个元素的值。若该数组删除前为空,则返回undefined
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.shift()) // 返回结果为7 , 此时 arr1 = [4, 1, 8, 5, 2, 0, 9, 6, 3] let arr2 = ['NueXini'] console.log(arr2.shift()) // 返回结果为NueXini , 此时 arr2 = [] let arr3 = [] console.log(arr3.shift()) // 返回结果为undefined
pop()
arr1.pop()
: 删除数组的最后一项,并返回删除前最后一个元素的值。若该数组删除前为空,则返回undefined
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.pop()) // 返回结果为3 , 此时 arr1 = [7, 4, 1, 8, 5, 2, 0, 9, 6] let arr2 = ['NueXini'] console.log(arr2.pop()) // 返回结果为NueXini , 此时 arr2 = [] let arr3 = [] console.log(arr3.pop()) // 返回结果为undefined
splice()
arr1.splice()(start, deleteCount)
:start
起始位置(从0开始计数) ,deleteCount
移除数组元素的个数 , 为空时则从起始位置删除到最后 , 返回被删除的元素
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.splice(0)) // 返回结果为[7, 4, 1, 8, 5, 2, 0, 9, 6, 3] , 此时 arr1 = [] let arr2 = ['NueXini','JavaScript'] console.log(arr2.splice(1,1)) // 返回结果为['JavaScript'] , 此时 arr2 = ['NueXini']
排序操作
sort()
- 升序
arr1.sort( sortFunction )
,sortFunction
可选
let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.sort() // 这两条语句效果是一样的 // arr1.sort(function(x, y){return x-y}) console.log(arr) // 得到结果arr1 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
- 降序
arr1.sort( compareFunction )
,compareFunction
可选
let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.sort(function(x, y){return y-x}) console.log(arr) // 得到结果arr1 = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]
reverse()
- 反转
arr1.reverse()
let arr1 = [7,4,1,8,5,2,0,9,6,3] arr1.reverse() console.log(arr) // 得到结果arr1 = [3, 6, 9, 0, 2, 5, 8, 1, 4, 7]
- 排序说明
compareFunction
是一个用于比较排序的函数,如果省略compareFunction
参数,元素将按ASCII字符顺序的升序进行排列。而数组的sort()方法的内部排序机制是基于冒泡算法
筛选操作
filter()
arr1.filter(function(currentValue,index,arr), thisValue)
let arr1 = [7,4,1,8,5,2,0,9,6,3] function gt(num) {return num > 5} console.log(arr1.filter(gt)) // 返回结果 [7, 8, 9, 6] let arr2 = [7,4,1,8,5,2,0,9,6,3] function gt2(num) {return num > 10} console.log(arr2.filter(gt2)) // 返回结果 []
参数 | 类型 | 解释 |
---|---|---|
function(currentValue, index,arr) | 必须 | 函数,数组中的每个元素都会执行这个函数 |
currentValue | 必须 | 当前元素的值 |
index | 可选 | 当前元素的索引值 |
arr | 可选 | 当前元素属于的数组对象 |
thisValue | 可选 | 对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined" |
includes()
arr1.includes(searchElement, fromIndex)
let arr1 = [7,4,1,8,5,2,0,9,6,3] console.log(arr1.includes(7)) // true console.log(arr1.includes(10)) // false console.log(arr1.includes(7,0)) // true console.log(arr1.includes(7,1)) // false
参数 | 类型 | 解释 |
---|---|---|
searchElement | 必须 | 需要查找的元素 |
fromIndex | 可选 | 从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 |
更多
请参考: https://www.runoob.com/jsref/jsref-obj-array.html
NueXini : Enjoy it ~
这篇关于JavaScript常用数组方法详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01后台管理开发学习:新手入门指南
- 2024-11-01后台管理系统开发学习:新手入门教程
- 2024-11-01后台开发学习:从入门到实践的简单教程
- 2024-11-01后台综合解决方案学习:从入门到初级实战教程
- 2024-11-01接口模块封装学习入门教程
- 2024-11-01请求动作封装学习:新手入门教程
- 2024-11-01登录鉴权入门:新手必读指南
- 2024-11-01动态面包屑入门:轻松掌握导航设计技巧
- 2024-11-01动态权限入门:新手必读指南
- 2024-11-01动态主题处理入门:新手必读指南