ES6 数组的用法

1. forEach()   用来循环遍历的 for

  •  数组名.forEach(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用: 用来遍历数组
let arr = [1, 2, 3, 4];
console.log(arr);
let arr1 = arr.forEach((item, index, arr) => {
    console.log(item, index, arr);
})

2.map  映射数组的

  • 数组名.map(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用: 会返回一个跟你原数组一样大的数组,新数组的值,取决于你的return。
let arr = [1, 2, 3, 4];
console.log(arr);
let arr1 = arr.map((item, index, arr) => {
    return item * 10
})
console.log(arr1);

结果图: 

3.filter  过滤数组

  • 数组名.filter(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用:会返回一个经过过滤的数组,而过滤规则取决于你的return。

看下面结果,就是将你满足你return的元素,返回给一个新的数组中。

let arr = [1, 2, 3, 4];
console.log(arr);
let arr1 = arr.filter((item, index, arr) => {
    return item > 2;
})
console.log(arr1);

结果 

 4.every  判断数组是不是满足所有条件

  • 数组名.every(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用:判断你没数组元素是否都满足条件,返回值为布尔值

看下面知道,如果数组每个元素,都满足你制定的规则就返回true,只要有一个不满足返回false。

let arr = [1, 2, 3, 4];
console.log(arr);
let res = arr.every((item, index, arr) => {
    return item == 1;
})
console.log(res);

结果

 5.some() 数组中有没有满足条件的

  • 数组名.some(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用:判断你没数组元素是否至少有一个满足条件,返回值为布尔值

看下面,只要有一个满足,返回true,所有不满足返回false。

let arr = [1, 2, 3, 4];
console.log(arr);
let res = arr.some((item, index, arr) => {
    return item == 1;
})
console.log(res);

结果 

 6.find()用来获取数组中满足条件的第一个数据

  • 数组名.find(function (item,index,arr) {})
  • item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用:用来获取数组中满足条件的数据,如果有 就是满足条件的第一个数据;如果没有就是undefined

看下面,就是将满足条件的第一个元素,返回出来。

let arr = [1, 2, 3, 4];
console.log(arr);
let res = arr.find((item, index, arr) => {
    return item >= 1;
})
console.log(res);

结果

 7.reduce()叠加后的效果

  • 数组名.reduce(function (item,index,arr) {})
  • prev:一开始就是初始值 当第一次有了结果以后;这个值就是第一次的结果,item:数组每一项 , index : 数组索引 , arr:原数组
  • 作用:用来叠加,返回值是叠加后的结果。

PS:不写prev值,默认是0。

let arr = [1, 2, 3, 4];
console.log(arr);
let res = arr.reduce((prev, item, index, arr) => {
    return prev += item;
}, 10);
console.log(res);

结果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

客服型电话呼叫中心系统,助力企业提升客户服务质量

客服型电话呼叫中心系统是企业客户服务的重要工具之一,它通过电话和网络等方式,为客户提供快速、便捷、高效的服务。客服型电话呼叫中心系统具备自动接听来电、自动路由、管理知识库、录音和监控、生成报表分析等多种功能,有利于企业提高客户…

【前端 | CSS布局】 网格布局(grid)

概述 网格布局(Grid)是最强大的 CSS 布局方案。 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。 上图这样的布局&am…

VS+QT+VTK treeView树型结构模型加载隐藏实例

程序示例精选 VSQTVTK treeView树型结构模型加载隐藏实例 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<VSQTVTK treeView树型结构模型加载隐藏实例>>编写代码&#xff0c;代码…

uniapp h5支付宝支付后端返回Form表单,前端如何处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1.调取接口拿到后端返回的form表单 前言 uniapp h5 支付宝支付&#xff0c;后端返回一串form表单&#xff0c;前端如何拿到支付串并且调用支付 1.调取接口拿到…

内容动态展示抽屉组件

知识点 mousemove与mouseenter的区别在于mousemove会触发事件冒泡&#xff0c;mouseenter不会&#xff0c;mouseleave同理。 mousemove会触发事件冒泡&#xff0c;因此鼠标在范围区域内移动时会一直触发。 mouseenter只触发一次&#xff0c;鼠标移入后触发&#xff0c;鼠标移…

Linux知识点 -- 进程间通信(二)

Linux知识点 – 进程间通信&#xff08;二&#xff09; 文章目录 Linux知识点 -- 进程间通信&#xff08;二&#xff09;一、System V共享内存1.原理2.申请共享内存3.System V共享内存的使用4.为共享内存添加访问控制 二、信号量&#xff08;概念理解&#xff09;1.概念2.信号量…

JVM 调优

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ JVM调优是一项重要的任务&#xff0c;可以提高Java应用程序的性能和稳定性。掌握JVM调优需要深入了解JVM的工作原理、参数和配置选项&#xff0c;以及历史JVM参数的调整和优…

K8S系列文章 之 容器网络基础 Docker0

什么是Docker0 使用ip addr命令看一下网卡&#xff1a; rootKitDevVps:~# ip addr 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00inet 127.0.0.1/8 scope host…

数据结构之栈和队列---c++

栈和队列的简单介绍 栈 栈是一个“先进后出”结构 队列 入队演示 队列是一种“先进先出”的结构 出队演示 接下来我们开始本次的内容 栈实现队列 分析 1.我们可以老老实实的写一个栈然后将所有的接口函数实现出来&#xff0c;最后再进行实现队列&#xff0c;但是显然…

集中/本地转发、AC、AP

1.ADSL ADSL MODEM&#xff08;ADSL 强制解调器&#xff09;俗称ADSL猫 ADSL是一种异步传输模式&#xff08;ATM)。ADSL是指使用电话线上网&#xff0c;需要专用的猫&#xff08;Modem)&#xff0c;在上网的时候高频和低频分离&#xff0c;所以上网电话两不耽误&#xff0c;速…

合并果子C++详解

题目描述 在一个果园里&#xff0c;多多已经将所有的果子打了下来&#xff0c;而且按果子的不同种类分成了不同的堆。多多决定把所有的果子合成一堆。 每一次合并&#xff0c;多多可以把两堆果子合并到一起&#xff0c;消耗的体力等于两堆果子的重量之和。可以看出&#xff0c;…

【MCU学习】GD32F427VG开发

&#xff08;一&#xff09;学习文档和例程 兆易创新GD32 MCU参考资料下载 1.GD232F4xx的Keil芯片支持包 2.标准固件库和示例程序 3.GD32F4xx_固件库使用指南_Rev1.2 4.用户手册&#xff1a;GD32F4xx_User_Manual_Rev2.8_CN 5.数据手册&#xff1a;GD32F427xx_Datasheet_Rev…

Ansible环境搭建,CentOS 系列操作系统搭建Ansible集群环境

Ansible是一种自动化工具&#xff0c;基于Python写的&#xff0c;原理什么的就不过多再说了&#xff0c;详情参考&#xff1a;https://www.itwk.cc/post/403.html https://blog.csdn.net/qq_34185638/article/details/131079320?spm1001.2014.3001.5502 环境准备 HOSTNAMEIP…

为react项目添加开发/提交规范(前端工程化、eslint、prettier、husky、commitlint、stylelint)

因历史遗留原因&#xff0c;接手的项目没有代码提醒/格式化&#xff0c;包括 eslint、pretttier&#xff0c;也没有 commit 提交校验&#xff0c;如 husky、commitlint、stylelint&#xff0c;与其期待自己或者同事的代码写得完美无缺&#xff0c;不如通过一些工具来进行规范和…

22.Netty源码之解码器

highlight: arduino-light 抽象解码类 https://mp.weixin.qq.com/s/526p5f9fgtZu7yYq5j7LiQ 解码器 Netty 常用解码器类型&#xff1a; ByteToMessageDecoder/ReplayingDecoder 将字节流解码为消息对象&#xff1b;MessageToMessageDecoder 将一种消息类型解码为另外一种消息类…

AI赋能转型升级 助力打造“数智辽宁”——首次大模型研讨沙龙在沈成功举行

当前&#xff0c;以“ChatGPT”为代表的大模型正在引领新一轮全球人工智能技术发展浪潮&#xff0c;推动人工智能从以专用小模型定制训练为主的“手工作坊时代”&#xff0c;迈入以通用大模型预训练为主的“工业化时代”&#xff0c;正不断加速实体经济智能化升级&#xff0c;深…

K8S系列文章之 离线安装自动化工具Ansible

参考 文档 离线安装 Ansible - DevOps - dbaselife 一、Ansible简介 Ansible是一款开源的IT配置管理工具&#xff0c;常被IT界的小伙伴们用于自动化的场景&#xff0c;多用在服务部署、配置管理方面。配置文件采用最常见的yaml格式&#xff0c;学习起来也是比较容易&#xff…

从0开始全栈深度学习工程师之路(四):VSCode提效设置和插件

在从0开始深度学习工程师之路&#xff08;三&#xff09;&#xff1a;Python开发环境搭建&#xff08;VSCode) 中,我们一步步搭建了基于VSCode的开发环境&#xff0c;这一篇我们继续优化我们的开发环境&#xff0c;毕竟工欲善其事&#xff0c;必先利其器。 配置 同步设置 我…

《HeadFirst设计模式(第二版)》第三章代码——装饰者模式

代码文件结构&#xff1a; 星巴兹案例&#xff1a; CondimentDecorator package Chapter3_DecorativeObjects.Decorators;import Chapter3_DecorativeObjects.Beverage;/*** Author 竹心* Date 2023/8/3**/public abstract class CondimentDecorator extends Beverage {Bever…

数智保险 创新未来 | GBASE南大通用亮相中国保险科技应用高峰论坛

本届峰会以“数智保险 创新未来”为主题&#xff0c;GBASE南大通用携新一代创新数据库产品及金融信创解决方案精彩亮相&#xff0c;与国内八百多位保险公司高管和众多保险科技公司技术专家&#xff0c;就保险领域数字化的创新应用及生态建设、新一代技术突破及发展机遇、前沿科…