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

第一个是: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]

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/71997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最大子数组和力扣--53

目录 题目 思路 代码 题目 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组是数组中的一个连续部分。 示例 1: 输入:nums [-2,1,-3,4,-1…

JavaScript 深浅拷贝全面解析

在 JavaScript 中,深浅拷贝是处理对象复制的重要概念。它们的核心区别在于对 引用类型数据 的处理方式,理解这一点对避免程序中的意外数据污染至关重要。 一、核心概念解析 1. 基本类型 vs 引用类型 基本类型:Number, String, Boolean, null…

【大模型】大模型推理能力深度剖析:从通用模型到专业优化

大模型推理能力深度剖析:从通用模型到专业优化 大模型推理能力深度剖析:从通用模型到专业优化一、通用语言模型与推理模型的区别(一)通用语言模型:多任务的“万金油”(二)推理模型:复…

RISC-V架构的平台级中断控制器(PLIC:platform-level interrupt controller)详解

英文缩写 英文缩写中文含义PLICplatform-level interrupt controller,平台级中断控制器SMTsimultaneous multi-threading,并发多线程HARTRISC-V架构中的硬件线程SMTsimultaneous multi-threading,多线程执行M-MODEmachine mode,机…

[Web 安全] PHP 反序列化漏洞 —— PHP 序列化 反序列化

关注这个专栏的其他相关笔记:[Web 安全] 反序列化漏洞 - 学习笔记-CSDN博客 0x01:PHP 序列化 — Serialize 序列化就是将对象的状态信息转化为可以存储或传输的形式的过程,在 PHP 中,通常使用 serialize() 函数来完成序列化的操作…

航空装配自动化神器Ethercat转profient网关搭配机器人精准控制

生产管理系统通过网关与装配机器人连接,加快航空器机身的装配速度,减少人为误差。 航空制造对装配线的精度和效率有着极高的要求。某航空制造厂使用的耐达讯Profinet转EtherCAT协议网关NY-PN-ECATM,将其生产管理系统与装配机器人连接&#xf…

什么是MySql的主从复制(主从同步)?

主页还有其他面试题总结,有需要的可以去看一下,喜欢的就留个三连再走吧~ 1.什么是MySql的主从复制原理? 主从复制的核心就是二进制binlog(DDL(数据定义语言)语句和DML(数据操纵语言&#xff09…

自然语言处理:初识自然语言处理

介绍 大家好,博主又来给大家分享知识了。从这次开始,博主给大家分享自然语言处理这个领域的内容。这也是博主非常感兴趣的研究领域。 最开始,博主计划在自然语言处理系列的第一篇博文中,和大家聊聊文本规范化这个话题。毕竟在自…

【保姆级视频教程(二)】YOLOv12训练数据集构建:标签格式转换-划分-YAML 配置 避坑指南 | 小白也能轻松玩转目标检测!

【2025全站首发】YOLOv12训练数据集构建:标签格式转换-划分-YAML 配置 避坑指南 | 小白也能轻松玩转目标检测! 文章目录 1. 数据集准备1.1 标签格式转换1.2 数据集划分1.3 yaml配置文件创建 2. 训练验证 1. 数据集准备 示例数据集下载链接:P…

【人工智能】蓝耘智算平台盛大发布DeepSeek满血版:开创AI推理体验新纪元

📝个人主页🌹:Eternity._ 🌹🌹期待您的关注 🌹🌹 ❀ 蓝耘智算平台 蓝耘智算平台核心技术与突破元生代推理引擎快速入门:三步调用大模型接口,OpenAI SDK无缝兼容实战用例文…

【网络编程】几个常用命令:ping / netstat / xargs / pidof / watch

ping:检测网络联通 1. ping 的基本功能2. ping 的工作原理3. ping 的常见用法4. ping 的输出解释5. ping 的应用场景6. 注意事项 netstat:查看网络状态 1. netstat 的基本功能2. 常见用法3. 示例4. 输出字段解释5. netstat 的替代工具6. 注意事项 xargs&…

【C++】:STL详解 —— list类

目录 list的概念 list的构造函数 list的大小 size() resize() empty() list的插入 push_front()和emplace_front() push_back()和emplace_back() insert()和emplace() list的删除 pop_front() pop_back() erase() remove() remove_if() unique() clear()…

【数据结构】(11) Map 和 Set

一、Map 和 Set 的简介 1、Set 和 Map Map 和 Set 是集合类框架学习的最后一部分。Map 和 Set 都是接口,需要通过 TreeSet、HashSet 和 TreeMap、HashMap 实例化。注意,Set 实现了 Collection,Map 并没有。 Set 存放的是键(Key&a…

关于CanvasRenderer.SyncTransform触发调用的机制

1)关于CanvasRenderer.SyncTransform触发调用的机制 2)小游戏Spine裁剪掉帧问题 3)Dedicated Server性能问题 4).mp4视频放入RT进行渲染的性能分析闭坑指南 这是第421篇UWA技术知识分享的推送,精选了UWA社区的热门话题…

Kronecker分解(K-FAC):让自然梯度在深度学习中飞起来

Kronecker分解(K-FAC):让自然梯度在深度学习中飞起来 在深度学习的优化中,自然梯度下降(Natural Gradient Descent)是一个强大的工具,它利用Fisher信息矩阵(FIM)调整梯度…

【HTML— 快速入门】HTML 基础

准备工作 vscode下载 百度网盘 Subline Text 下载 Sublime Text下载 百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器,我们在写前端代码时,使用 Sublime Text 打开比使用记事本打开,得到的代码体验更好,比 vscode…

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar)

鸿蒙开发深入浅出01(基本环境搭建、页面模板与TabBar) 1、效果展示2、下载 DevEco Studio3、创建项目4、新建页面模板5、更改应用信息6、新建以下页面7、Index.ets8、真机运行9、图片资源文件 1、效果展示 2、下载 DevEco Studio 访问官网根据自己的版本…

自动驾驶泊车算法详解(一)

自动驾驶泊车算法是自动驾驶技术中的重要组成部分,主要用于实现车辆在复杂场景下的自动泊车功能(如垂直泊车、侧方位泊车、斜列泊车等)。其核心目标是通过感知、规划和控制技术,使车辆在无人工干预的情况下安全、高效地完成泊车动…

鸿蒙next 点击穿透实现

点击穿透可以参考华为开发的保留文章,该章节只能在developer preview版本下查看 点击穿透 主要的方法是hitTestBehavior // xxx.ets Entry Component struct HitTestBehaviorExample {build() {// outer stackStack() {Button(outer button).onTouch((event) > {console.i…

27.[前端开发-JavaScript基础]Day04-函数基本使用-递归-变量作用域-函数式编程

一、JavaScript函数 1 认识JavaScript函数 程序中的foo、bar、baz 认识函数 函数使用的步骤 2 函数的声明和调用 声明和调用函数 函数的参数 有参数的函数练习 函数的返回值 函数的练习 arguments参数(JS高级再学习) 3 函数的递归调用 函数中调用函数…