当前位置: 首页 > news >正文

前端或者后端通常用到数组使用方式

第一个是:Array.from() 将具有length属性或者可迭代的对象转化为数组

 Array.from('abcdef') // 返回值['a1', 'b1', 'c1', 'd1', 'e1', 'f1']

 Array.from(new Map([['b1', 1 ], ['a1', 2 ]]))

 Array.from(new Set([ 1 , 2 , 3 ]))

第二个是:Array.reduce() 遍历数组,将函数的返回值,存储到累加器中

 let arr = [ 1a , 2a , 3a , 4a , 5a ]

 const total = arr.reduce((total, item) => {

 // 每次遍历将total + item,下一次的遍历时,total为上一次返回的结果

 console.log(total) // 1a 3a 6 10

 return total + item

 })

 console.log(total) // 15

第三个是:Array.indexOf() 数组中是否存在某个元素,存在返回该索引,不存在返回-1,出现多次,也只会返回第一次出现时的索引

 let arr = ['a1','b1','c1','d1', 'c1', 'c1']

 arr.indexOf('c1') // 返回值为 索引 2

 arr.indexOf('ff') // 返回值为 -1 ff不存在数组中

第四个是: Array.findIndex() 遍历数组,返回第一个通过测试的元素的索引值

 let arr = [ 1a , 2a , 3a , 2a , 4a ]

 const num = arr.findIndex((item, index) => {

 console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束

 return item >= 2 // 返回item >= 2的第一个元素项的索引值,找到之后结束遍历,不会继续

 })

 console.log(arr) // [1a,2a,3a,2a,4a] 不会改变元素组

 console.log(num) // 索引值为 1

第五个是: Array.find() 遍历数组,返回第一个通过测试的元素项

 let arr = [ 1a , 2a , 3a , 2a , 4a ]

 const num = arr.find((item, index) => {

 console.log(item, index) // index 到 1 的位置就不会在打印了,循环结束

 return item >= 2 // 返回item >= 2的第一个元素项,找到之后结束遍历,不会继续

 })

 console.log(arr) // [1a,2a,3a,2a,4a] 不会改变元素组

 console.log(num) // 2

第六个是: Array.filter() 遍历数组,根据筛选出的符合条件的元素,组成一个新的数组

 let arr = [ 1a , 2a , 3a , 4a ]

 const newArr = arr.filter((item,index,arr) => {

return item > 2 // 返回元素项大于 2 的元素,组成一个新的数组

 })

 console.log(arr) // [1a,2a,3a,4a] 不会改变元素组

 console.log(newArr) // [3a, 4a]

第七个是 Array.map() 遍历数组,为每一个元素调用一次函数,根据函数return返回的结果组成一个新的数组

 let arr = ['a','b','c']

 const newArr = arr.map((item, index, arr) => {

 console.log(item, index, arr) // 元素项,索引,当前数组

 return item += 2

 })

 console.log(arr) // 原数组不会改变

 console.log(newArr) // 返回一个处理过的新数组 ['a2', 'b2', 'c2']

第八个是: Array.forEach() 遍历数组,为每一个元素调用一次函数

 let arr = ['a','b','c']

 arr.forEach((item, index, arr) => {

 console.log(item) // 当前遍历元素项

 console.log(index) // 当前遍历元素的索引

 console.log(arr) // 原数组

 })

第九个是:Array.join() 使用某个拼接符,将数组转化为字符串,返回该字符串,原数组不会改变

 let arr = [ 1 , 2 , 3 , 4 , 5 ]

 arr.join('-') // 返回拼接后的字符串 '1-2-3-4-5'

 console.log(arr) // [1, 2, 3, 4, 5] 原数组不会改变

第十个是:Array.slice() 返回选定的元素数组,原数组不会改变

 let arr = ['a','b','c','d']

 arr.slice( 1 , 3 ) // 从索引为 1 的位置,取到 3 的位置,但不包含 3 ,返回值为 新数组 ['b', 'c']

 console.log(arr) // ['a', 'b', 'c', 'd'] 原数组不会改变

第十一个是: Array.splice() 从原数组某个位置删除/添加元素,返回删除的元素数组

 let arr = [ 4 , 5 , 1 , 2 , 3 ]

 arr.splice( 0 , 1 ) // 从 0 的位置,删除一个元素,返回值为删除的元素数组 [4]

 console.log(arr) // [5, 1, 2, 3]

 arr.splice( 0 , 1 , 11 ) // 从 0 的位置,删除一个元素,并添加一个 11 元素 返回值为删除的元素数组 [5]

 console.log(arr) // [11, 1, 2, 3]

第十二个是:Array.shift() 删除数组的第一个元素,并返回该元素

 let arr = [ 4 , 5 , 1 , 2 , 3 ]

 arr.shift() // 返回值为删除的元素 4

 console.log(arr) // [5, 1, 2, 3]

第十三个是:Array.unshift() 在原数组前边添加一个或多个元素,返回该数组的长度

 let arr = [ 1 , 2 , 3 ]

 arr.unshift( 4 , 5 ) // 返回值为数组的长度 5

 console.log(arr) // [4, 5, 1, 2, 3]

第十四个是:Array.pop() 删除数组的最后一个元素,并返回该元素

 let arr = [ 1 , 2 , 3 , 4 ]

 arr.pop() // 返回值为删除的元素 4

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

第十五个是:Array.push() 在原数组末尾追加一个或多个元素,返回该数组的长度

 let arr = [ 1 , 2 , 3 ]

 arr.push( 4 , 5 ) // 返回值为数组的长度 5

 console.log(arr) // [1, 2, 3, 4, 5]

相关文章:

  • PMP项目管理—整合管理篇—2.制定项目管理计划
  • drupal的翻译集添加后如何起作用
  • mysql怎样优化where like ‘%字符串%‘这种模糊匹配的慢sql
  • ODE卷-可以处理的最大任务数(200分)
  • [记录贴] 火绒奇怪的进程保护
  • Cherry Studio + 火山引擎 构建个人AI智能知识库
  • 操作系统:设备与I/O管理
  • springboot浅析
  • 打印九九乘法表
  • 【Docker】使用Docker搭建-MySQL数据库服务
  • 31.C++多态4(静态多态,动态多态,虚函数表的存储位置)
  • 使用 kubeadm 创建高可用 Kubernetes 及外部 etcd 集群
  • 基于Spring Boot的产业园区智慧公寓管理系统设计与实现(LW+源码+讲解)
  • C++ 红黑树万字详解(含模拟实现(两种版本))
  • qt QProgressBar总结
  • `pip install .` 的作用详解:从当前目录安装Python包
  • 短连接服务器压测-wrk
  • 【缓存】缓存雪崩与缓存穿透:高并发系统的隐形杀手
  • IDEA 2024.1 最新永久可用(亲测有效)
  • redis序列化设置
  • 3年多来俄乌要首次直接对话?能谈得拢吗?
  • 汤加附近海域发生6.4级地震
  • 气候多米诺:厄尔尼诺与东南亚跨境害虫或威胁中国粮食安全
  • 美政府以拨款为要挟胁迫各州服从移民政策,20个州联合起诉
  • 四部门:到2025年底,全国行政村5G通达率超过90%
  • 《新时代的中国国家安全》白皮书(全文)