js数组常用方法复习
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 前言
- 一.用于增删数组元素的方法
- 1.push() 添加元素到数组尾部
- 2.pop() 删除数组末尾的第一个元素
- 3.unshift() 添加元素到数组的头部
- 4.shift() 删除数组头部的第一个元素
- 二.用于截取数组的方法
- 1.slice() 截取数组
- 2.splice() 截取或者插入数组元素
- 三.改变数组排序的方法
- 1.reverse() 翻转数组
- 2.sort() 数组排序
- 四.查找数组元素位置的方法
- 1.indexOf() 查找数组中元素位置
- 2.includes() 查找数组中是否有该元素
- 五.遍历数组的方法
- 1.forEach() 遍历数组
- 2.some() 遍历数组
- 3.every() 遍历数组
- 4.map() 遍历数组
- 5.filter() 数组过滤器
- 六.其他我不知道咋分类的数组方法
- 1.Array.isArray() 判断是否是一个数组
- 2.join() 数组转换成字符串
- 3.toString() 数组之间转换成字符串
- 5.concat() 连接数组
- 总结
前言
js有很多数组方法 本篇文章稍微总结了一些数组方法
以便于个人复习
一.用于增删数组元素的方法
1.push() 添加元素到数组尾部
//push() 将参数添加到数组尾部 改变原数组 返回添加后数组的长度var arrPush = [1, 2, 3, 4, 5]var newArrPush = arrPush.push(7, 8, 9)console.log(arrPush); //(8) [1, 2, 3, 4, 5, 7, 8, 9]console.log(newArrPush); //8
2.pop() 删除数组末尾的第一个元素
//pop() 删除数组最后一个数 和传入的参数无关 改变原数组 返回删除的元素var arrPop = [1,2,3,4,5]var newArrPop = arrPop.pop()console.log(arrPop); // (4) [1, 2, 3, 4]console.log(newArrPop); // 5
3.unshift() 添加元素到数组的头部
//unshift() 添加参数到数组的头部 可以传入多个参数 改变原数组 返回添加后的数组长度var arrUnshift = [1,2,3,4,5]var newArrUnshift = arrUnshift.unshift([1,2,3],5)console.log(arrUnshift); // (7) [Array(3), 5, 1, 2, 3, 4, 5]console.log(newArrUnshift); // 7
4.shift() 删除数组头部的第一个元素
//shift() 删除数组头部的一个元素 和传入的参数无关 改变原数组 返回删除的元素var arrShift = [1,2,3,4,5]var newArrShift = arrShift.shift()console.log(arrShift); // (4) [2, 3, 4, 5]console.log(newArrShift); // 1
二.用于截取数组的方法
1.slice() 截取数组
//slice() 截取数组 接受两个索引参数 截取两个索引之间的数组 截取的数组不包括第二个索引参数上的元素 如果只传入一个参数,则从这个参数截取到数组末尾//原数组不改变 返回截取出来的数组var arrSlice = [1,2,3,4,5]var newArrSlice = arrSlice.slice(1,3)console.log(arrSlice); // (5) [1, 2, 3, 4, 5]console.log(newArrSlice); // (2) [2, 3]
2.splice() 截取或者插入数组元素
//splice() 截取或者插入数组元素 可以传入三个参数 按顺序分别是 开始截取的数组 截取的数组长度 从截取数组的位置开始插入的元素//原数组改变 返回截取出的数组var arrSplice = [1,2,3,4,5]var newArrSplice = arrSplice.splice(1,2,3)console.log(arrSplice); // (4) [1, 3, 4, 5]console.log(newArrSplice); // (2) [2, 3]
三.改变数组排序的方法
1.reverse() 翻转数组
//reverse() 翻转数组 接收参数无效 不接受参数 改变原数组 返回新得到的数组var arrReverse = [1,2,3,4,5]var newArrReverse = arrReverse.reverse()console.log(arrReverse); // (5) [5, 4, 3, 2, 1]console.log(newArrReverse); // (5) [5, 4, 3, 2, 1]
2.sort() 数组排序
//sort() 排序 改变原数组 返回新数组//不传参数的时候 默认从小到大排序var arrSort = [2,3,0,1,6,8,1]var newArrSort = arrSort.sort()console.log(arrSort); [0, 1, 1, 2, 3, 6, 8]console.log(newArrSort); [0, 1, 1, 2, 3, 6, 8]// 可以传入一个函数 用来规定排序的顺序//当 a-b 的时候 从小到大var arrSort1 = [2,3,0,1,6,8,1]var newArrSort1 = arrSort1.sort(function(a,b){return a-b})console.log(newArrSort1); // (7) [0, 1, 1, 2, 3, 6, 8]//当b-a 的时候 从大到小var arrSort2 = [2,3,0,1,6,8,1]var newArrSort2 = arrSort2.sort(function(a,b){return b-a})console.log(newArrSort2); // (7) [8, 6, 3, 2, 1, 1, 0]//也可以用箭头函数写法var arrSort1 = [2,3,0,1,6,8,1]var newArrSort1 = arrSort1.sort((a,b) => b-a)console.log(newArrSort1); // (7) [8, 6, 3, 2, 1, 1, 0]
四.查找数组元素位置的方法
1.indexOf() 查找数组中元素位置
//indexOf() 从前往后遍历一个数组查找传入的参数位置 不改变原数组 如果找到则返回找到的第一个元素位置 未找到则返回 -1//如果传入两个参数 则第二个参数是 从第二个参数的索引数 开始查找var arrIndexOf = [12,24,35,46,78,24]var newArrIndexOf1 = arrIndexOf.indexOf(1)console.log(arrIndexOf); // (6) [12, 24, 35, 46, 78, 24]console.log(newArrIndexOf1); // -1var newArrIndexOf2 = arrIndexOf.indexOf(24)console.log(newArrIndexOf2); // 1var newArrIndexOf3 = arrIndexOf.indexOf(24,3)console.log(newArrIndexOf3); // 5
2.includes() 查找数组中是否有该元素
//includes() 遍历检查数组中是否有传入的参数 不改变原数组 与 indexOf 的区别在于 includes 返回的是一个布尔值var arrIncludes = [12,24,35,46,78,24]var newArrIncludes = arrIncludes.includes(12)var newArrIncludes1 = arrIncludes.includes(13)console.log(arrIncludes); // (6) [12, 24, 35, 46, 78, 24]console.log(newArrIncludes); // trueconsole.log(newArrIncludes1); // false
五.遍历数组的方法
1.forEach() 遍历数组
//forEach() 遍历数组// 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组//其中只有第一个值是必须传的 剩下两个值可传可不传//不改变原数组 会将遍历后的元素传给回调函数 可以通过 push 等数组方法 将遍历后的数组输出var arrForEach = [1,2,3,4,5]var newArrForEach = []arrForEach.forEach(function(item,index,arr){let newItem = item + 1newArrForEach.push(newItem)})console.log(arrForEach); // (5) [1, 2, 3, 4, 5]console.log(newArrForEach); // (5) [2, 3, 4, 5, 6]
2.some() 遍历数组
//some() 遍历数组// 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组//其中只有第一个值是必须传的 剩下两个值可传可不传//给数组中的每一项都运行传入的函数 如果存在至少一项符合函数 则返回 truevar arrSome = [1,2,3,4,5]var newArrSome1 = arrSome.some(function(item,index,arr){return item >1})console.log(newArrSome1); // true//否则返回 falsevar newArrSome1 = arrSome.some((item,index,arr) =>{return item >6})console.log(newArrSome1); // false
3.every() 遍历数组
//every() 遍历数组// 接收一个函数 函数中有三个参数 依次为当前遍历的项 当前遍历项的索引 当前遍历的数组//其中只有第一个值是必须传的 剩下两个值可传可不传//给数组中每一项都运行传入的函数,如果每一项都返回 true 则返回 truevar arrEvery = [1,2,3,4,5]var newArrEvery = arrEvery.every((item,index,arr)=>{return item <10})console.log(newArrEvery); //true//否则返回 falsevar newArrEvery = arrEvery.every((item)=>{return item <4})console.log(newArrEvery); //false
4.map() 遍历数组
//map() 格式化遍历数组//根据传入的函数 格式化遍历的每个值 返回格式化的数组 不改变原数组var arrMap = [1,2,3,4,5]var newArrMap = arrMap.map((item,index,arr) =>{return item + 5})console.log(arrMap); //(5) [1, 2, 3, 4, 5]console.log(newArrMap); //(5) [6, 7, 8, 9, 10]
5.filter() 数组过滤器
//filter 数组过滤器//返回数组中满足过滤要求的数组 原数组不改变var arrFilter = [1,2,3,4,5,7,8]var newArrFilter = arrFilter.filter((item,index,arr) =>{return item >4})console.log(arrFilter); // (7) [1, 2, 3, 4, 5, 7, 8]console.log(newArrFilter); // (3) [5, 7, 8]
六.其他我不知道咋分类的数组方法
1.Array.isArray() 判断是否是一个数组
//Array.isArray() 判断是否是一个数组var thisArray = [1,3,1,4]var noArray = 'az'newThisArray = Array.isArray(thisArray)console.log(newThisArray); // truenewNoArray = Array.isArray(noArray)console.log(newNoArray); // false
2.join() 数组转换成字符串
// join() 用于将数组转换成字符串 传入一个分隔符参数 如果不传则默认传入一个逗号 修改原数组 返回新数组var arrJoin = [1,2,3,4,5]var newArrJoin = arrJoin.join('|')console.log(arrJoin); // (5) [1, 2, 3, 4, 5]console.log(newArrJoin); // 1|2|3|4|5
3.toString() 数组之间转换成字符串
//toString() 将数组转换成字符串 不改变原数组 返回转换成的字符串var arrToSting = [1,2,3,4,5]var newArrToSting = arrToSting.toString()console.log(arrToSting); // (5) [1, 2, 3, 4, 5]console.log(newArrToSting); //1,2,3,4,5
5.concat() 连接数组
//concat() 用于连接两个数组或者多个数组 返回连接后的新数组var 数组一 = [1,2,3,4,5]var 数组二 = [6,7,8,9,0,['s','p']]var 新数组 = 数组一.concat(数组二) console.log(新数组); // (11) [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, Array(2)]
总结
大概就这么多吧,少了的有缘再补
js数组常用方法复习相关推荐
- 史上最全 JS 数组常用方法总结.
文章目录 js数组常用方法总结 判断是否为数组: Array.isArray() 1.0 数组新增or删除相关方法 push() 方法 末尾添加 unshift() 方法 开头添加 shift() 方 ...
- js数组常用方法总结(包括ES6)
目录 js数组方法 Array.push( ) Array.pop( ) Array.unshift( ) Array.shift( ) Array.concat(arr1,arr2...) Arra ...
- (1)js数组常用方法 splice()、slice()、push()、unshift()、pop()、shift()、join()、reverse()、sort()、concat()、split()
splice() 方法向数组中添加,删除 元素,然后返回被删除的元素:会改变原数组. var arr = [1,2,3,4,5,6,7,8,9,10]; var arr1 = arr.splice(0 ...
- JS数组常用方法练习题
1.将 border-left-width 转换成 borderLeftWidth (原创) /* 将 border-left-width 转换成 borderLeftWidth */ functio ...
- js数组常用方法(19种)|你会的到底有多少呢?
一.改变原数组的方法 1.push() 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr = [10, 20, ...
- JS数组常用方法整理-1
1. arr.push() 末尾添加元素 作用:向数组末尾添加一个或者多个元素, 返回值:新的数组的长度,原数组改变 参数:添加的元素 let arr = [1,2,3]; let retu = ar ...
- JavaScript数组常用方法解析和深层次js数组扁平化
前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...
- html编写数组求和,JS数组求和的常用方法总结【5种方法】
本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, ...
- JS数组、对象、字符串常用方法汇总
JS数组.对象.字符串常用方法汇总 前言 数组常用方法 Array.prototype.slice(start, end) Array.prototype.map() Array.prototype. ...
- es6删除数组某一项_javascript基础系列:数组常用方法解析
javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...
最新文章
- 洛谷 P3539 [POI2012]ROZ-Fibonacci Representation 解题报告
- python爬虫实战:利用scrapy,短短50行代码下载整站短视频
- 会计记忆总结之四:会计凭证
- dos命令行输入adb shell命令为什么报错
- 浏览器从输入到输出的过程与原理一
- thinkphp 表单令牌
- oracle erase,Arc SDE forOracle实现erase空间分析计算
- 莫兰迪颜色表以及RGB向16进制颜色的转换连接
- 【NovelAI】在QQ群中部署AI画图机器人
- canfd收不到数据_CAN FD网络的通信距离问题分析
- RPlidar学习(三)——RPlidar源代码库
- 【论文笔记】Combining Reinforcement Learning and Rule-based Method to Manipulate Objects in Clutter
- gif透明背景动画_在找gif制作app?分享一个GIF制作神器,视频、图片通通可以变GIF...
- Android 11.0 12.0关机界面全屏显示(UI全屏显示)
- Sending build context to Docker daemon 解决办法
- 回归初心才是智能家居APP掘金市场的制胜关键
- echarts 柱状图,分别给每个柱子设置不同的颜色
- ICC 图文学习——LAB2:Design Planning 设计规划
- spi通信问题-有波形但无法获取正确数据:MOSI和SCK
- termux最新安装kali
热门文章
- 基于云效Codeup一键恢复删库保护数据资源,程序员删库跑路不复存在
- 诺基亚培育低端机市场 迂回战术威胁中华酷联
- win10计算机丢失msvcr,Win10计算机丢失MSVCR120.dll怎么解决
- 淘宝、天猫API调用如何按关键词上搜索,item_search_tmall - 按关键字搜索天猫商品
- chm混淆+qq白利用免杀360主动防御
- 【电脑自检后无法进入电脑系统的搞定妙方】
- html展示微信昵称特殊字符,微信昵称特殊符号(独一无二的特殊符号)
- ACCESS sql语句数据类型转换 文本类型转换为数字类型
- 微信小程序(1)--注册及下载IDE
- eureka多台注册中心_spring cloud eureka集群,注册中心再添加一台服务器