提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 前言
  • 一.用于增删数组元素的方法
    • 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数组常用方法复习相关推荐

  1. 史上最全 JS 数组常用方法总结.

    文章目录 js数组常用方法总结 判断是否为数组: Array.isArray() 1.0 数组新增or删除相关方法 push() 方法 末尾添加 unshift() 方法 开头添加 shift() 方 ...

  2. js数组常用方法总结(包括ES6)

    目录 js数组方法 Array.push( ) Array.pop( ) Array.unshift( ) Array.shift( ) Array.concat(arr1,arr2...) Arra ...

  3. (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 ...

  4. JS数组常用方法练习题

    1.将 border-left-width 转换成 borderLeftWidth (原创) /* 将 border-left-width 转换成 borderLeftWidth */ functio ...

  5. js数组常用方法(19种)|你会的到底有多少呢?

    一.改变原数组的方法 1.push() 末尾添加数据 语法: 数组名.push(数据) 作用: 就是往数组末尾添加数据 返回值: 就是这个数组的长度 //push var arr = [10, 20, ...

  6. JS数组常用方法整理-1

    1. arr.push() 末尾添加元素 作用:向数组末尾添加一个或者多个元素, 返回值:新的数组的长度,原数组改变 参数:添加的元素 let arr = [1,2,3]; let retu = ar ...

  7. JavaScript数组常用方法解析和深层次js数组扁平化

    前言 数组作为在开发中常用的集合,除了for循环遍历以外,还有很多内置对象的方法,包括map,以及数组筛选元素filter等. 注:文章结尾处附深层次数组扁平化方法操作. 作为引用数据类型的一种,在处 ...

  8. html编写数组求和,JS数组求和的常用方法总结【5种方法】

    本文实例总结了JS数组求和的常用方法.分享给大家供大家参考,具体如下: 题目描述 计算给定数组 arr 中所有元素的总和 输入描述: 数组中的元素均为 Number 类型 输入例子: sum([ 1, ...

  9. JS数组、对象、字符串常用方法汇总

    JS数组.对象.字符串常用方法汇总 前言 数组常用方法 Array.prototype.slice(start, end) Array.prototype.map() Array.prototype. ...

  10. es6删除数组某一项_javascript基础系列:数组常用方法解析

    javascript基础系列:数组常用方法解析 今天是比较特殊的日子,我们编程人员共同的节日,1024,祝每个编程人员节日快乐! 数组是javascript必不可少的一项,今天让我们来总结一下数组操作 ...

最新文章

  1. 洛谷 P3539 [POI2012]ROZ-Fibonacci Representation 解题报告
  2. python爬虫实战:利用scrapy,短短50行代码下载整站短视频
  3. 会计记忆总结之四:会计凭证
  4. dos命令行输入adb shell命令为什么报错
  5. 浏览器从输入到输出的过程与原理一
  6. thinkphp 表单令牌
  7. oracle erase,Arc SDE forOracle实现erase空间分析计算
  8. 莫兰迪颜色表以及RGB向16进制颜色的转换连接
  9. 【NovelAI】在QQ群中部署AI画图机器人
  10. canfd收不到数据_CAN FD网络的通信距离问题分析
  11. RPlidar学习(三)——RPlidar源代码库
  12. 【论文笔记】Combining Reinforcement Learning and Rule-based Method to Manipulate Objects in Clutter
  13. gif透明背景动画_在找gif制作app?分享一个GIF制作神器,视频、图片通通可以变GIF...
  14. Android 11.0 12.0关机界面全屏显示(UI全屏显示)
  15. Sending build context to Docker daemon 解决办法
  16. 回归初心才是智能家居APP掘金市场的制胜关键
  17. echarts 柱状图,分别给每个柱子设置不同的颜色
  18. ICC 图文学习——LAB2:Design Planning 设计规划
  19. spi通信问题-有波形但无法获取正确数据:MOSI和SCK
  20. termux最新安装kali

热门文章

  1. 基于云效Codeup一键恢复删库保护数据资源,程序员删库跑路不复存在
  2. 诺基亚培育低端机市场 迂回战术威胁中华酷联
  3. win10计算机丢失msvcr,Win10计算机丢失MSVCR120.dll怎么解决
  4. 淘宝、天猫API调用如何按关键词上搜索,item_search_tmall - 按关键字搜索天猫商品
  5. chm混淆+qq白利用免杀360主动防御
  6. 【电脑自检后无法进入电脑系统的搞定妙方】
  7. html展示微信昵称特殊字符,微信昵称特殊符号(独一无二的特殊符号)
  8. ACCESS sql语句数据类型转换 文本类型转换为数字类型
  9. 微信小程序(1)--注册及下载IDE
  10. eureka多台注册中心_spring cloud eureka集群,注册中心再添加一台服务器