当前的位置： 捷杰建站   开发技术

JavaScript数组常见使用方法有哪些

开发技术 作者：iii 2024-04-17 21:15:02
今天小编给大家分享一下JavaScript数组常见使用方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考...

今天小编给大家分享一下JavaScript数组常见使用方法有哪些的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1. push()

  • 概括：数组末位增加

  • 参数：需要增加的数据

  • 返回值：数组更新后的长度

 let arr = [1,2,3]
 arr.push(1) // 返回新增后的数组长度 4
 arr.push() // 不传参数默认不新增 4
 arr.push(1,2,3) // 新增多条数据时，返回新增完成后的数组长度 7

2. pop()

  • 概括：数组末位删除

  • 参数：无

  • 返回值：删除的数据

 let arr = [3]
 arr.pop() // 返回已删除的数据 3
 arr.pop() // 当数组数据为空时，返回 undefined

3. unshift()

  • 概括：数组首位新增

  • 参数：需要新增的数据

  • 返回值：数组的长度

 let arr = [1,2,3]
 arr.unshift(1) // 返回新增后的数组长度 4
 arr.unshift() // 不传参数默认不新增 4
 arr.unshift(1,2,4) // 新增多条数据时，返回新增完成后的数组长度 7

4. shift()

  • 概括：数组首位删除

  • 参数：无

  • 返回值：数组的长度

 let arr = [3]
 arr.shift() // 返回已删除的数据 3
 arr.shift() // 当数组数据为空时，返回 undefined

5. reverse()

  • 概括：反转数组

  • 参数：无

  • 返回值：会将原数组修改成反转之后的数组

 let arr = [1,2,3]
 arr.reverse() // 返回反转之后的数组 [3,2,1]
 
 let arr = []
 arr.reverse() // 当数组数据为空时返回 []

6. sort()

  • 概括：将数组进行排序

  • 参数：排序函数

 // 当参数1 - 参数2时，为正序 
 function justSort(a,b) {
    return a-b
 }

 // 当 参数2 - 参数1 时，为倒序
 function backSort(a,b) {
    return b-a
 }

  • 返回值：排序后的数组

 let arr = [1,2,3]
 arr.sort() // 不传参默认通过Unicode（万国码）进行排序 [1,2,3]
 arr.sort(backSort) // 通过排序函数进行排序 [3,2,1]

7. join()

  • 概括：将数组转化成字符串

  • 参数：根据指定字符（可用空字符串）进行转化

  • 返回值：返回转化成字符串后的字符串

 let arr = [1,2,3]
 arr.join() // 不传参默认根据逗号进行转化 1,2,3
 arr.join('') // 根据空字符串进行转化 123
 arr.join(',') // 根据逗号进行转化 1,2,3

8. splice()

  • 概括：删除并替换指定单元的数据

  • 参数：该方法默认有几种传参情况

    • 一个参数：数组中保留几位，其余删除

    • 两个参数：参数1（开始索引）、参数2（删除个数）

    • 三个参数：参数1（开始索引）、参数2（删除个数）、参数3+（插入的数据，第三个参数以后可以传多个参数）

  • 返回值：已删除的数组数据

 let arr = [1,2,3,4]
 arr.splice() // 不传参默认不删除不插入，返回空数组 []
 arr.splice(3) // 数组中默认保留3位数据, 返回删除后的数据 [4]
 arr.splice(0,1) // 从数组首位删除一条数据 [1]
 arr.splice(0,1,9) // 从首位删除一条数据，并插入一条数据 [2]
 arr.splice(0,1,9,8,7,6,5,4,3,2,1) // 从首位删除一条数据并插入多条数据（参数3之后的为插入 [9]

9. slice()

  • 概括：截取并拷贝出子数组

  • 参数：两个参数

    • 参数1：起始位置，不传参数2默认截取起始位置之后的数据

    • 参数2：结束位置前一位

  • 返回值：截取的数组

 let arr = [1,2,3,4]
 arr.slice() // 不传参默认截取全部 [1,2,3,4]
 arr.slice(1) // 从索引为1的位置默认截取到末尾 [2,3,4]
 arr.slice(1,3) // 从索引为1的位置截取到索引为3的位置前一位 [2,3]

10. concat()

  • 概括：将数据合并到新数组中并返回

  • 参数：参数1+（参数可以设置多个，每个参数都将合并到原数组中，如果入参是一个数组会将入参数据合并到原数组中）

  • 返回值：合并后的新数组

 let arr = [1,2,3,4]
 arr.concat(5) // 会将入参数据合并到原数组中 [1,2,3,4,5]
 arr.concat(5,6,7,8) // 可以入参多条数据 [1,2,3,4,5,6,7,8]
 arr.concat([5,6,7,8]) // 可以入参数组进行合并，合并至原数组 [1,2,3,4,5,6,7,8]

11. indexOf()

  • 概括：返回指定单元的索引

  • 参数：参数1（要查找的数组数据），参数2（查找的起始位置）

  • 返回值：找到指定数据返回索引，未找到返回 -1

 let arr = [1,2,3,4]
 arr.indexOf(3) // 查找数组中指定数据的下标 2
 arr.indexOf(5) // 未找到数组中指定数据 -1

12. forEach()

  • 概括：遍历数组（需要配合函数使用）

  • 参数（入参函数参数）：

    • 参数1：数组单元数据

    • 参数2：每个单元索引

    • 参数3：数组本身

  • 返回值：undefined

 let arr = [1,2,3,4]
 arr.forEach((data,index,array) => {
     console.log(data) // 数组每个单元数据
     console.log(index) // 数组下标
     console.log(array) // 原数组本身
 })

13. map()

  • 概括：遍历数据（进行映射）

  • 参数（入参函数参数）：

    • 参数1：数组单元数据

    • 参数2：每个单元索引

    • 参数3：数组本身

  • 返回值：返回映射后的新数组

  let arr = [1,2,3,4]
  arr.map((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
  })

14. filter()

  • 概括：过滤数组（过滤出返回为true的数据）

  • 参数（入参函数参数）：

    • 参数1：数组单元数据

    • 参数2：每个单元索引

    • 参数3：数组本身

  • 返回值：返回过滤后的新数组

  let arr = [1,2,3,4]
  arr.filter((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 过滤返回为true的数据
  })

15. some()

  • 概括：检测数组（只要有一个数据符合条件时,返回true）

  • 参数（入参函数参数）：

    • 参数1：数组单元数据

    • 参数2：每个单元索引

    • 参数3：数组本身

  • 返回值：返回检测后的新数组

  let arr = [1,2,3,4]
  arr.some((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 检测指定数据是否符合条件
  })

16. eveny()

  • 概括：检测数组（只有数组中所有数据符合条件时,才返回true,否则反回false）

  • 参数（入参函数参数）：

    • 参数1：数组单元数据

    • 参数2：每个单元索引

    • 参数3：数组本身

  • 返回值：返回检测后的新数组

  let arr = [1,2,3,4]
  arr.eveny((data,index,array) => {
      console.log(data) // 数组每个单元数据
      console.log(index) // 数组下标
      console.log(array) // 原数组本身
      return data == 1 // 检测所有条件是否符合条件
  })

17. reduce()

  • 概括：迭代数组所有项(累加器)

  • 参数：两个参数

    • 回调参数1：上一次回调返回值，或者初始值（必选）

    • 回调参数2：数组中被处理的数据项（必选）

    • 回调参数3：数据项在数组中的索引（可选）

    • 回调参数4：原数组（可选）

    • 参数1（入参函数参数）：回调函数（必选）

    • 参数2：初始值（可选）

  • 返回值：返回数组计算后的结果

 let arr = [1,2,3,4]
 arr.reduce((pre,data,index,array) => {
     console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
     console.log(data) // 数组中被处理的数据项
     console.log(index) // 数据项在数组中的索引
     console.log(array) // 原数组
     return pre + data // 将每次累加结果进行累加下一项
 }, 0) // 设置遍历初始值

  • 扩展用法：

  • 计算数组中每个元素出现的次数

 let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
 let nameNum = names.reduce((pre,cur)=>{
    if(cur in pre){
       pre[cur]++
    }else{
       pre[cur] = 1 
    }
    return pre
 },{})
 console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

  • 数组去重

 // 单数组去重
 let arr = [1,2,3,4,4,1]
 let newArr = arr.reduce((pre,cur)=>{
     if(!pre.includes(cur)){
       return pre.concat(cur)
     }else{
       return pre
     }
 },[])
 console.log(newArr);// [1, 2, 3, 4]

 // 数组对象去重
 let arr = [{a: 0, name: 'zhangsan'}, {b: 0, name: 'lisi'}]
 let Obj = {}
 person = person.reduce((cur,next) => {
    obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
    return cur;
 },[])

  • 将二维数组转化为一维数组

 let arr = [[0, 1], [2, 3], [4, 5]]
 let newArr = arr.reduce((pre,cur)=>{
     return pre.concat(cur)
 },[])
 console.log(newArr); // [0, 1, 2, 3, 4, 5]

  • 将多维数组转化为一维数组

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
 const newArr = function(arr){
    return arr.reduce((pre,cur)=>{
        pre.concat(Array.isArray(cur) ? newArr(cur) : cur   
    }),[])
 }
 console.log(newArr(arr)); // [0, 1, 2, 3, 4, 5, 6, 7]

  • 对象里面属性求和

 var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
 ];

 var sum = result.reduce(function(prev, cur) {
     return cur.score + prev;
 }, 0);
 console.log(sum) //60

18. reduceRight()

  • 概括：迭代数组所有项（从右至左进行计算，同数组reduce方法）

  • 参数：同数组的reduce方法参数

  • 返回值：数组计算结果

 let arr = [1,2,3,4]
 arr.reduceRight((pre,data,index,array) => {
     console.log(pre) // 数组上一次计算结果，如果未计算则是初始值
     console.log(data) // 数组中被处理的数据项
     console.log(index) // 数据项在数组中的索引
     console.log(array) // 原数组
     return pre + data // 将每次累加结果进行累加下一项
 }, 0) // 设置遍历初始值

19. Array.from()

  • 概括：将伪数组转化成数组，只要含length属性的都可转化成数组（ES6）

  • 参数：需要转化的伪数组

  • 返回值：转化后的数组

 let str = 'asdf'
 console.log(Array.from(str)) // 将字符串转化成数组 [a,s,d,f]

 let obj = {0:'a',1:'b',length:2}
 console.log(Array.from(obj))   // 含索引并length属性的对象也可以转化成数组 ['a', 'b']

20. Array.of()

  • 概括：将一组值转化成数组，类似于生明数组（ES6）

  • 参数：需要转化的值

  • 返回值：转化后的数组

 console.log(Array.of('11')) // 将字符串转化成数组 ['11']
 console.log(Array.of({a:1,b:2})) // 将对象转化成数组 [{a:1,b:2}]
 console.log(new Array('11')) // 类似于构造函数声明数组
 console.log(new Array(2)) // 构造函数生明因为入参问题容易容易引起重载  [empty × 2] 空数组

21. copyWithin()

  • 概括：在数组内部将指定位置的数组赋值到其他位置，会覆盖原数组项，返回当前数组

  • 参数：三个参数

    • 参数1：开始位置，从该位置开始替换数组项（必传）

    • 参数2：从指定索引开始读取数组项，默认为0，如果为负值，则从右往左读（可选）

    • 参数3：从指定索引结束读取数组项，默认为数组长度，如果是负值表示倒数（可选）

  • 返回值：处理好的数组

 let arr = [1,2,3,4,5]
 arr.copyWithin(3) // 从下标3的位置上开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 1, 2]
 arr.copyWithin(0, 2) // 从下标为0位置开始，默认将从下标2位置截取到末尾作为数据项进行替换，长度不够默认截取  [3, 4, 5, 4, 5]
 arr.copyWithin(0, 2, 3) // 从下标0位置开始，默认将从下标2位置截取到下标3位置之前作为数据项进行替换，长度不够默认截取 [3, 2, 3, 4, 5]

 arr.copyWithin(-1) // 从倒数倒数第一位开始，默认将整个数组作为数据项进行替换，长度不够默认截取 [1, 2, 3, 4, 1]
 arr.copyWithin(-1, -2) // 从倒数第一位置开始，默认将从倒数第二位置默认截取到末尾作为数据项进项替换，长度不够默认截取 [1, 2, 3, 4, 4]
 arr.copyWithin(-1, -4, -2) // 从倒数第一位置开始，默认将从倒数第四的位置开始截取到倒数第二的位置作为数据项项进项替换，长度不够默认截取 [1, 2, 3, 4, 2]

22. find()

  • 概括：找到第一个符合条件的数组数据项

  • 参数（入参函数参数）：

    • 参数1：数组数据项

    • 参数2：数据项下标

    • 参数3：原数组

  • 返回值：符合条件的数组数据项

 let arr = [1,2,3,4,5]
 arr.find((item, index, array) => {
     console.log(item) // 数组数据项
     console.log(index) // 数据项下标
     console.log(array) // 原数组
     return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
 })

23. findIndex()

  • 概括：找到第一个符合条件的数组数据项下标

  • 参数（入参函数参数）：同数组find方法

  • 返回值：符合条件数据项下标

 let arr = [1,2,3,4,5]
 arr.findIndex((item, index, array) => {
     console.log(item) // 数组数据项
     console.log(index) // 数据项下标
     console.log(array) // 原数组
     return item > 1 // 此条件不会校验数组所有数据项，只会校验第一条符合条件的数据
 })

24. fill()

  • 概括：使用指定值填充整个数组

  • 参数：

    • 参数1：待填充的数据

    • 参数2：开始填充的位置

    • 参数3：结束填充的位置（该位置前一位）

  • 返回值：填充后的数组

 let arr = [1,2,3,4]
 arr.fill(1) // 默认将数组所有项填充成该数据 [1,1,1,1]
 arr.fill(1,2) // 以参数1为填充项，将数据从坐标为2位置开始填充至数组末尾 [1,2,1,1]
 arr.fill(1,2,4) // 以参数1为填充项，将是数据从坐标2位置开始填充至下标为4位置 [1,2,1,4]

25. keys()

  • 概括：遍历数组的键名（一般针对于Set、Map数据集合使用）

  • 参数：无

  • 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组下标

 let arr = [1,2,3,4]
 let arr2 = arr.keys()
 console.log(arr2) // Array Iterator {}

 for (let key of arr2) {
    console.log(key);   // 0,1,2,3
 }

26. value()

  • 概括：遍历数组键名（一般针对于Set、Map数据集合使用）

  • 参数：无

  • 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组每个数据项

 let arr = [1,2,3,4]
 let arr2 = arr.value()
 console.log(arr2) // Array Iterator {}

 for (let val of arr2) {
    console.log(val);   // 1,2,3,4
 }

27. entries()

  • 概括：遍历数组的键值和键名（迭代数组，一般针对于Set、Map数据集合使用）

  • 参数：无

  • 返回值：在日志层面显示Array Iterator {}（数组迭代器），在数据层面显示数组每个单元的数据项和下标作为一个数组

 let arr = [1,2,3,4]
 let arr1 = arr.entries()
 console.log(arr1) // Array Iterator {}

 for (let e of arr1) {
     console.log(e);   // [0,1] [1,2] [2,3] [3,4]
 }

以上就是“JavaScript数组常见使用方法有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注捷杰建站行业资讯频道。

原创声明
本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
本文链接：http://www.jiecseo.com/news/show_13132.html
javascript

相关新闻

Linux下DedeCMS详细安全设置教程
dedecms 上传目录路径
织梦58织梦模板加固版教程详解
加固版织梦CMS整站源码通用安装教程
织梦安装入门视频教程（织梦58莹莹主讲）
修改dede专题管理功能 自定义节点容器模板
织梦(Dedecms)文档关键词维护,文章页自动添加关键词内链锚文本
dedecms把文章批量设为未审核的办法
使用DEDE织梦计划任务功能定时更新首页

本站采用系统自动发货方式，付款后即出现下载入口，如有疑问请咨询在线客服！

售后时间：早10点 - 晚11:30点

咨询售后客服

推荐模板

推荐精华

热门标签

网站模板 企业网站模板 简单大气 个人网站模板 手机网站模板 响应式网站模板 门户网站模板 下载免费网站模板 学校网站模板 网站模板免费下载 旅游网站模板 电子商务网站模板 公司网站模板 教育网站模板 外贸网站模板 政府网站模板 新闻网站模板 免费网站模板下载 导航网站模板 音乐网站模板 班级网站模板 传奇网站模板 网站 模板 php个人网站模板 汽车网站模板 html个人网站模板 个人网站模板下载 工艺品网站模板 商业网站模板 旅游网站模板下载
服务热线 19970861797
服务热线 19970861797服务热线 19970861797
售前咨询
售后客服
立即联系
售前客服
立即联系
售后服务
售后客服
立即联系
投诉电话：19970861797
手机二维码
【捷杰建站】
关于我们| 支付账号| 帮助中心| 客户服务| 售后服务| 网站地图 AI工具箱

Copyright © 2024 jiecseo.com All rights reserved.  粤ICP备18085929号

欢迎光临【捷杰建站】，本站所有资源仅供学习与参考，禁止用于商业用途或从事违法行为！

技术营运：深圳市晟艺互动传媒有限公司