es6的some和every方法使用;

news2024/11/19 19:17:18

文章略长,但比较简单。

es6中的数组方法some()和every()都接收一个回调函数作为参数,该回调函数又接收三个参数,分别是数组元素、数组元素的索引、调用some或every方法的数组本身。它们的区别就是:
some方法用于判断数组中是否存在某个符合判断条件的元素,判断在回调函数的函数体内完成,并由回调函数返回一个布尔值。如果回调函数在某次返回了true,则整个some方法返回true,且结束遍历。
every方法用于判断数组中是否任意一个元素都符合判断条件,判断同样是在回调函数的函数体内完成,并由回调函数返回一个布尔值。如果回调函数在某次返回了false,则整个every方法返回false,且结束遍历。
注意:some和every方法都不会改变原来的数组。

1、some方法举例如下图所示:
图1
图1图2
图2
分析图1可知,在每次执行回调函数时,回调函数返回的布尔值都为false,因此some方法不会提前退出遍历,因此会把数组中的每一个元素都遍历一次。从图2可知,在判断第一个元素是否符合条件时,回调函数就返回了true,则整个some方法返回true,直接停止了遍历,不再判断后面的元素。

2、every方法举例:
图3
在这里插入图片描述
图4
在这里插入图片描述
根据前面的描述:every方法会在回调函数返回false时直接中止遍历,因此得到图3和图4的执行结果。

3、回调函数没有(主动)返回
上面的4个例子都是在回调函数主动返回布尔值,即调用了return语句的情况下分析的。下面来看如果回调函数没有主动返回布尔值时的表现:
对于some方法:
图5
在这里插入图片描述
对于every方法:
图6
在这里插入图片描述
分析图5和图6,可以看到在回调函数没有主动返回布尔值的情况下,some方法没有提前停止元素遍历,而every方法在第一个元素后就停止遍历了;some方法提前停止遍历的条件是return true,every方法提前停止遍历的条件时return false;也就是说回调函数默认会返回false;

4、特殊情况
下面再来看关于回调函数的一种特殊情况:
对于some方法:
图7
在这里插入图片描述
对于every方法:
图8
在这里插入图片描述
分析图7和图8,在回调函数同样没有return语句的情况下,执行结果为什么与第3点描述的不一样?即为什么这里能返回正确的结果?实际上,这里和第3的区别在于回调函数虽然没有return语句,但同时也没有大括号{}包含函数体。这种情况下,实际上和 {return xxx}的效果是一样的,回调函数其实是有主动返回值的。

总结一下,有三个重要的点:
(1)some和every方法提前停止遍历的前提(分别是回调函数return true和return false);
(2)回调函数没有主动返回布尔值时,默认都是返回false;
(3)回调函数的函数体只有一个语句且没有{}包含,实际上和有{}包含且有return语句是相同的。

如有错误,欢迎指出。

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

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

相关文章

node-sass安装报错及其解决方案

一、下载依赖报错 这里报错了也就没后面的剧情了,就像电视剧刚开局主角就嗝屁了,看看执行 npm i 的时候报错类容: 二、解决方案 1、下载源在国外,更换中国镜像源,删除package.json中的node-sass,分别下载node包和node-…

你的应用太慢了,给我司带来了巨额损失,该怎么办

记得很久之前看过谷歌官方有这么样的声明:如果一个页面的加载时间从 1 秒增加到3 秒,那么用户跳出的概率将增加 32%。 但是早在 2012 年,亚马逊就计算出了,页面加载速度一旦下降一秒钟,每年就会损失 16 亿美元的销售额…

〖大前端 - 基础入门三大核心之CSS篇⑳〗- 2D变形

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放,购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐…

HTML 基本开发方式,学会常用的 HTML 标签

一、HTML 基本开发方式 1、如何编写 HTML 代码 本身的语法比较简单,语法风格和 Java 之类的差别很大,(并不能表达一些逻辑,而只是能表达 “有哪些东西" 一种信息),使用记事本创建一个文件,后缀名改成 .html 即可…

Vue报错:Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘skuId‘)“

背景: 当点击按钮时候,正常情况控制台的Network应该要发送一个变化量,现在控制台的Network不仅不显示,而且还报错,报错信息如下: vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: …

【React全家桶】Flux与Redux

🎞️🎞️🎞️ 博主主页: 糖 -O- 👉👉👉 react专栏:react全家桶 🌹🌹🌹希望各位博主多多支持!!&a…

Vue3.0 项目启动(打造企业级音乐App)

系列文章目录 内容参考链接Vue3.0 项目启动Vue3.0 项目启动(打造企业级音乐App)Vue3.0项目——打造企业级音乐App(一)Tab栏、轮播图、歌单列表、滚动组件Vue3.0项目——打造企业级音乐App(二)图片懒加载、…

功能:Session与Vue:登录获取权限,并完成session存储

一、需求说明 1、系统登录,每个账号表示一位用户,每位用户分配有不同的权限,不同的权限有着不同的操作。 2、现需要每位用户登录时都能获取到对应的权限,在登录系统中进行使用,退出时则清空权限。 3、项目框架&#x…

一个非常好看的前端Vue3登录页面

Vue3lessElement Plus <template> <div id"login"><div id"contain"><div id"left_card"><h1>欢迎来到我的Vue3大世界</h1><span>Welcome to my Vue3 world</span></div><div id&quo…

HTML学习笔记 1-用HBuilderX写的HTML无法在浏览器上运行怎么办?问题出在这里:HBuilderX外部web服务支撑配置

初学HTML的时候&#xff0c;用的是HBuilderX开发软件 写了一段简单的代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>这是网页的标题</title></head><body><p>这里是网页的内容</p>&l…

解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

问题描述&#xff1a;重复点击导航时&#xff0c;控制台出现报错 &#xff0c;虽然不影响功能使用&#xff0c;但也不能坐视不管。解决 Vue 重复点击相同路由&#xff0c;出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题 .报错内容&#…

Nginx部署前端静态网站详细教学(一步步操作)

前言 从零开始使用Xshell、Xftp、Nginx 简单部署静态网站&#xff0c;需准备云服务器(阿里云、腾讯云、华为云等都可) 一.下载安装Xshell和Xftp XShell 用于命令行操作服务器&#xff0c;Xftp 用于对服务器的文件上传和下载 官方下载地址&#xff1a;NetSarang Homepage CN - …

你评论,我赠书~【哈士奇赠书 - 16期】〖Vue.js 快速入门实战〗等你来拿

推荐&#xff1a; Python全栈白宝书专栏&#xff0c;免费阶段订阅数量4300&#xff0c;购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。福利&#xff1a;加入社区的小伙伴们&#xff0c;除了可以获取博主所有付费专栏的阅读权限之外&#xff0c;还有机会加入 星荐官共赢计划…

html网页调用后端python代码方法

当我们利用html代码制作网页时&#xff0c;可以用以下方法进行python代码的调用&#xff1a; 1.简单的python代码例如输出‘hello world’时,可以选择直接在网页写入python代码的方式调用&#xff0c;这时候我们就需要了解Pyscript了。以下是在网页里直接运行简易python语段的…

AJAX中的跨域(CORS) 问题 (更新于2023.02.04)

目录​​​​​​​ 预检请求 实例讲解 2023.02.04 更新 此文章在介绍跨域加载的同时&#xff0c;也解决了在使用axios.post()时如下跨域加载失败问题&#xff1a; from origin null has been blocked by CORS policy: Response to preflight request doesnt pass access c…

element-ui实现图片上传功能(前台部分)

文章目录前言一、 template 部分二、script部分1、导入token2、在data中注册以下3、method中的方法4、style前言 最近做的项目中需要实现图片上传功能&#xff0c;一开始也不懂&#xff0c;经过一段时间的学习后&#xff0c;终于实现了图片上传功能。我将分为前台与后台两部分…

vue 基于axios封装request接口请求——request.js文件

目录 了解几个Content-type类型 第一种&#xff1a;application/json;charsetUTF-8 第二种&#xff1a;multipart/form-data 第三种&#xff1a; application/x-www-form-urlencoded 第一步新建request.js文件 第二步新建services/apiUrl文件 第三步新建services/index.…

【前端】深入浅出缓存原理

缓存的基本原理 对于前端来说&#xff0c;缓存主要分为浏览器缓存&#xff08;比如 localStorage、sessionStorage、cookie等等&#xff09;以及http缓存&#xff0c;也是本文主要讲述的。 当然叫法也不一样&#xff0c;比如客户端缓存大概包括浏览器缓存和http缓存 所谓htt…

手撕前端面试题【javascript~文件扩展名、分隔符、单向绑定、判断版本、深浅拷贝、内存泄露等】

前端的那些基本标签&#x1f353;&#x1f353; 直角三角形&#x1f353;&#x1f353;文件扩展名&#x1f353;&#x1f353;分隔符&#x1f353;&#x1f353;单向绑定&#x1f353;&#x1f353;创建数组&#x1f353;&#x1f353;判断版本&#x1f353;&#x1f353;什么是…

四、nginx静态文件的配置

1. 根据上节内容的提示&#xff0c;我们知道如何进行nginx的信号控制和命令行控制了。 2. 这节主要是学习nginx的静态文件、缓存、静态文件压缩等相关内容。 一、 配置并访问nginx静态文件 1.1 root配置nginx静态文件地址 在nginx.conf 配置文件中默认使用root配置了nginx静态…