js数组高阶函数——includes()方法

news2024/11/20 8:26:19

js数组高阶函数——includes方法

  • 前言
  • 数组的一般化操作
    • 创建数组
    • 获取数组长度
    • 访问(遍历)数组元素
    • 修改数组元素
    • 删除数组元素
    • 数组尾部添加
    • 数组尾部删除
  • includes()方法
  • 举例说明
  • 关键点

前言

⭐JS的数组是一种特殊的对象,其特点是在值的列表中按照顺序存放值。JS数组用于存储按照索引顺序排列的数据,例如数字、字符串和对象等。数组是一个类似于列表的高阶对象,它可以存储任何类型的数据,并且具有一些非常有用的方法。其中,includes()方法是其中最常用的之一。
在 JS中,数组是由中括号 [] 括起来的数值序列。数组可以包含不同类型的值,例如数字、字符串、对象等。以下是一些基础的 JS数组操作:


数组的一般化操作

创建数组

let myArray = []; // 创建一个空数组
let myArray = [1, 2, 3]; // 创建一个包含三个数值的数组
let myArray = new Array(); // 用构造函数创建一个空数组
let myArray = new Array(1, 2, 3); // 用构造函数创建一个包含三个数值的数组

获取数组长度

 let myArray = [1, 2, 3];console.log(myArray.length); // 输出 3

访问(遍历)数组元素

let myArray = [1, 2, 3];
console.log(myArray[0]); // 输出 1
console.log(myArray[1]); // 输出 2
console.log(myArray[2]); // 输出 3

修改数组元素

let myArray = [1, 2, 3];
myArray[1] = 4;
console.log(myArray); // 输出 [1, 4, 3]

删除数组元素

let myArray = [1, 2, 3];
delete myArray[1];
console.log(myArray); // 输出 [1, 3]

数组尾部添加

let myArray = [1, 2, 3];
myArray.push(4);
console.log(myArray); // 输出 [1, 2, 3, 4]

数组尾部删除

let myArray = [1, 2, 3];
myArray.pop();
console.log(myArray); // 输出 [1, 2]

includes()方法

⭐对于数组中是否包含某个元素,我们可以使用 includes() 方法。includes() 方法用于判断数组中是否包含某个指定的元素,如果包含,则方法返回 true,否则返回 false。

以下是 includes() 方法的语法:

 array.includes(searchElement[, fromIndex])

其中:

  • searchElement:需要查找的元素,必选。
  • fromIndex:可选,从该索引处开始查找元素。如果省略该参数,则从数组的头开始查找。如果 fromIndex 大于或等于数组长度,则返回 false。

举例说明

当我们使用includes()方法时,可以通过传入一个元素作为参数来判断数组中是否包含该元素。
⭐⭐⭐第一例:判断数组中是否包含某个数字

const numbers = [1, 2, 3, 4, 5];

console.log(numbers.includes(3)); 
console.log(numbers.includes(6)); 

在这里插入图片描述

数组numbers包含数字3,因此includes(3)返回true。而数组numbers不包含数字6,因此includes(6)返回false。


⭐⭐⭐第二例:判断数组中是否包含某个字符串

const fruits = ['长生界', '神墓', '遮天'];

console.log(fruits.includes('遮天')); 
console.log(fruits.includes('完美世界')); 

在这里插入图片描述

数组fruits包含字符串’遮天’,因此includes('banana')返回true。而数组fruits不包含字符串’grape’,因此includes('grape')返回false。


⭐⭐⭐第三例:判断数组中是否包含某个对象

const users = [
  { name: '叶天帝', age: 225 },
  { name: '石昊', age: 130 },
  { name: '辰南', age: 135 }
];

const user = { name: '石昊', age: 30 };

console.log(users.includes(user)); // true

在这里插入图片描述

数组users包含一个与user对象相等的对象,因此includes(user)返回true。


关键点

第一点:includes()方法在比较元素时使用的是严格相等(===)的方式。

第二点:如果数组中有多个相同的元素,includes()方法只会返回第一个匹配到的元素。

第三点:兼容性:
includes() 方法并不兼容所有的浏览器。如果需要在不支持 includes() 方法的浏览器中使用该方法,可以使用以下 polyfill 实现:

if (!Array.prototype.includes) {
    Array.prototype.includes = function(searchElement /*, fromIndex*/ ) {
        'use strict';
        var O = Object(this);
        var len = parseInt(O.length) || 0;
        if (len === 0) {
            return false;
        }
        var n = parseInt(arguments[1]) || 0;
        var k;
        if (n >= 0) {
            k = n;
        } else {
            k = len + n;
            if (k < 0) {
                k = 0;
            }
        }
        while (k < len) {
            var currentElement = O[k];
            if (searchElement === currentElement ||
                (searchElement !== searchElement && currentElement !== currentElement)) {
                return true;
            }
            k++;
        }
        return false;
    };
}

在这个 polyfill 中,Array.prototype.includes() 方法首先通过对象来获取数组的长度,并使用 while 循环来遍历数组。如果搜索的元素存在则返回 true,否则返回 false。


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

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

相关文章

SSH通过VSCode远程访问服务器Opencv和matplotlib等无法直接显示图像问题

需求描述&#xff1a; 在VSCode中通过SSH连接服务器&#xff0c;使用cv2.imshow或plt.show()无法显示图像。 解决思路如下&#xff1a; 1、首先查看与服务器之间的网络连接问题&#xff08;百分之九十问题就是出在第一步骤&#xff0c;哈哈哈&#xff09; 在本地端打开cmd&…

「案例」95后占半壁江山的浙桂,如何在百家争鸣中快人一步

如果用一个历史时期来形容目前国内单光子雪崩二极管&#xff08;SPAD&#xff09;传感器芯片的市场格局&#xff0c;那就是——春秋。 各家IC设计公司百家争鸣&#xff0c;而浙桂半导体就是其中的“百分之一”。 浙桂半导体两大特点 一、浙桂研发SPAD传感器芯片需要召唤像元、…

C语言实现字符串的模式匹配

一.模式匹配 字符串的模式匹配算法是用来查找一个字符串中是否存在另一个指定的字符串&#xff08;即模式&#xff09;的算法。常见的模式匹配算法包括暴力匹配算法、KMP算法、Boyer-Moore算法和Rabin-Karp算法。 暴力匹配算法&#xff1a;暴力匹配算法也称为朴素匹配算法&am…

自学黑客!一般人我劝你还是算了吧

一、自学网络安全学习的误区和陷阱 1.不要试图以编程为基础的学习开始学习 我在之前的回答中&#xff0c;我都一再强调不要以编程为基础再开始学习网络安全&#xff0c;一般来说&#xff0c;学习编程不但学习周期长&#xff0c;而且实际向安全过渡后可用到的关键知识并不多 一…

【Java之JAR包解析】(三)除核心包 rt.jar之外的其他JAR包~

JAR包解析之其他jar包 前言:one: access-bridge-64.jar:two: charsets.jar:three: cldrdata.jar:four: deploy.jar:five: jce.jar:six: jfr.jar:seven: jfxrt.jar:eight: jfxswt.jar:nine: jsse.jar:keycap_ten: localedata.jar11、management-agent.jar12、nashorn.jar13、plu…

开发人员Git仓库提交与合并

参考&#xff1a;git 的变基(rebase)和合并(merge)具体有什么分别阿&#xff1f; - 知乎 1、Git工作流 在使用Git Flow工作模式时&#xff0c;业界普遍遵循的规则&#xff1a; 所有开发分支从develop分支拉取。所有hotfix分支从master分支拉取。所有在master分支上的提交都必…

flstudio21.0.3中文版水果软件下载

FL Studio就是国人众所熟知的水果编曲软件&#xff0c;圈内用户习惯叫它“水果”。它是一个全能音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;。FL Studio可以进行编曲、剪辑、录音、混音&#xff0c;让你的电脑变成全功能录音室&#xff0c;帮助你制作出属于自己的…

轻量服务器架设网站打开速度慢,如何加速?

轻量服务器非常适合流量适中的小、中型网站&#xff0c;虽作为轻量级主机包&#xff0c;但它一般与云服务器使用同样的 CPU、内存、硬盘等底层资源。只是&#xff0c;轻量服务器的资源(可用的存储空间、RAM 和 CPU等硬件/内存容量)更低&#xff0c;虽然这些对于较中、小的网站来…

GEN回零调试

一.根据motionstudio软件检测各部件完备&#xff1b; 二.调试点位模式的CPP测试程序 其中&#xff0c;配置文件如下&#xff1a; 回零相关&#xff08;就是轴状态同步&#xff09;&#xff1a; 下面是相关代码: // 例程 7-1 点位运动 //#include "stdafx.h" #inclu…

selenium自动化的时候网址重定向问题的解决思路

一、背景 因为我们系统是用企业微信扫码登录的&#xff0c;就输入网址 management-xxx.xxx.com以后&#xff0c;url就会重定向到企业微信授权的url &#xff1a;https://open.work.weixin.qq.com/wwopen/sso/3rd_qrConnect?statexxx&redirect_urimanagement-xxx.xxx.com …

如何制作数据可视化、数孪、安防、区域人流量识别+控制的项目?

制作与数据可视化、数字孪生、安防、区域人群识别和控制以及其他类似计划相关的项目需要仔细规划和执行。建议遵循以下通用框架来有效地开发这些项目&#xff1a; 定义项目目标&#xff1a;清楚地阐明项目目的和目标。确定要解决的具体问题、期望的结果以及衡量成功的关键绩效指…

vue3+ts+vite+electron打包exe

文章目录 一. 前言二. 准备写好的vue项目打包2.1 修改ts打包代码检测.这个比较烦人. 在package.json中 2.2 配置打包参数2.3 打包vue 三. 打包exe3.1 拉取electron官方demo3.2 下载打包插件3.3 在electron-quick-start项目中找到入口文件 main.js &#xff0c;修改打包的文件路…

差值结构的运动

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入有3个节点&#xff0c;训练集AB各由5张二值化的图片组成&#xff0c;让B全是0&#xff0c;让差值结构的5行分别有0&#xff0c;1&#xff0c;2&#xff0c;2&#xff0c;2个1&#xff0c;3列分别有1&#xff0c;3&#xff0…

知了堂Java V9.0重磅升级,真的很硬核!

“2023年&#xff0c;Java还值得学吗&#xff1f;” 说实话&#xff0c;Java自1995年诞生起&#xff0c;至今还难逢敌手&#xff0c;没有任何编程语言能够取代它的地位。不过随着互联网、计算机技术的发展&#xff0c;Java应用领域越来越广泛&#xff0c;因此也对掌握这门语言…

Vue全家桶(二):Vue中的axios异步通信

目录 1. Axios1.1 Axios介绍1.2 为什么使用Axios1.3 Axios API1.3 Vue使用axios向服务器请求数据1.4 Vue使用axios向服务器提交数据1.5 Vue封装网络请求 2. 使用Vue-cli解决Ajax跨域问题3. GitHub用户搜索案例4. Vue-resource 1. Axios 1.1 Axios介绍 Axios 是一个开源的可以…

flexible.js + rem 适配布局

什么是&#xff1a;flexible.js &#xff1f;&#xff1f; flexible.js 是手机淘宝团队出的移动端布局适配库不需要在写不同屏幕的媒体查询&#xff0c;因为里面js做了处理原理是把当前设备划分为10等份&#xff0c;但是不同设备下&#xff0c;比例还是一致的。要做的&#xf…

【亲测解决】import torch 出现段错误,报错信息 Segmentation fault

微信公众号&#xff1a;leetcode_algos_life import torch 出现段错误 【问题】【解决方案】 【问题】 安装pytorch-gpu版本&#xff0c;安装完成后&#xff0c;import torch发现报错直接返回&#xff0c;报错信息如下&#xff1a; Segmentation fault【解决方案】 Linux环境…

查看虚拟机网络IP和网关

查看虚拟网络编辑器和修IP地址: 查看网关&#xff1a; 查看windows:环境的中VMnet8网络配置(ipconfig指令): 查看linux的配置ifconfig: ping测试主机之间网络连通性: 基本语法 ping 目的主机&#xff08;功能描述&#xff1a;测试当前服务器是否可以连接目的主机) 应用实例 测…

一秒教你搞定前端打包上传后路由404的问题!

1、问题描述 前端实现权限管理后&#xff0c;本地路由跳转正常&#xff0c;打包上传线上出现前404找不到路由路径问题 报如下错误: 2、错误原因 打包之后根路径变化&#xff0c;前端没有将获取到的用户菜单权限中的component进行转换&#xff0c;导致上传后路径错误 3、解决…

Gurobi许可证获取并部署到Pycharm中

获取Gurobi许可证 海外版&#xff08;Gurobi&#xff09;~ 可略过 海外Gurobi地址但是就算用高校身份注册还是无法获取许可证图例 原因&#xff1b;学校的网关没有将本校的 IP 地址标注为学术机构&#xff0c;那么会出现 Error 303/305 错误&#xff0c;IP 验证不会成功&…