首页 > 编程语言 >js 数组筛选方法使用整理_JavaScript常用数组元素搜索或过滤

js 数组筛选方法使用整理_JavaScript常用数组元素搜索或过滤

时间:2024-03-05 20:24:26浏览次数:33  
标签:元素 const name JavaScript js 数组 array id

一、常用方案介绍

  • 如果你想找到在符合特定条件的阵列中的所有项目,使用 filter。
  • 如果你想检查是否至少有一个项目符合特定的条件,请使用 find。
  • 如果你想检查一个数组包含一个特定的值,请使用 includes。
  • 如果要在数组中查找特定项目的索引,请使用indexOf

 

二、js 数组筛选方法使用整理

1.Array.filter()

在数组中查找满足特定条件的元素

let newArray = array.filter(callback);

newArray是返回的新数组
array 是我们要进行查找的数组本身
callback 是应用于数组每个元素的回调函数
如果数组中没有项目符合条件,则返回一个空数组。

案例:

        //1.在数组中查找满足特定条件的元素
        //返回子数组,如果找不到返回空数组 []
        const array = [{id:10,name:'张三'},{id:5,name:'李四'},{id:12,name:'王五'},{id:20,name:'赵六'}];
        const result = array.filter(element => element.id >= 100);
        console.log(result) //[11, 20]

 

 

2.Array.find()

查找满足特定条件的第一个元素

let element = array.find(callback);

element -当前被遍历的元素(必填)
index -当前遍历的元素的索引/位置(可选)
array- 当前数组(可选)
但是请注意,如果数组中没有项目符合条件,则返回 undefined。

案例:

        //2.查找满足特定条件的第一个元素,如果找不到返回 undefined
        const array =[{id:10,name:'张三'},{id:5,name:'李四'},{id:12,name:'王五'},{id:20,name:'赵六'}];
        const greaterThanTen = array.find(element => element.id > 10);
        console.log(greaterThanTen)//11

 

3.Array.includes()

确定数组是否包含某个值,并在适当时返回 true 或 false

const includesValue = array.includes(valueToFind, fromIndex)

valueToFind 是要在数组中检查的值(必填)
fromIndex 是要开始从中搜索元素的数组中的索引或位置(可选)

案例:

        //3.确定数组是否包含某个值,并在适当时返回 true 或 false
        const array = [10, 11, 3, 20, 5];
        const includesTwenty = array.includes(20);
        console.log(includesTwenty)//true

 

4.Array.indexOf()

返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素,则返回 -1

const indexOfElement = array.indexOf(element, fromIndex)

element 是要在数组中检查的元素(必填),并且
fromIndex 是要从数组中搜索元素的启始索引或位置(可选)
请务必注意,includes 和 indexOf 方法都使用严格的相等性('===')搜索数组。如果值的类型不同(例如4和'4'),它们将分别返回 false 和 -1

案例:

        //4.返回可以在数组中找到给定元素的第一个索引。如果数组中不存在该元素,则返回 -1
        const array = [10, 11, 3, 20, 5];
        const indexOfThree = array.indexOf(3);
        console.log(indexOfThree)//2

 

 

5.for 循环自定义查找,自由查找

 

更多:

JavaScript数组(三)数组对象使用整理

JavaScript数组(二)实例

Javascript数组(一)排序

标签:元素,const,name,JavaScript,js,数组,array,id
From: https://www.cnblogs.com/tianma3798/p/18054822

相关文章

  • 使用 dat.GUI.js 简化试验流程
    导入jsimport{GUI}from"three/addons/libs/lil-gui.module.min.js";代码//定要要设置的属性varcontrols=new(function(){this.rotationSpeed=0.02;this.bouncingSpeed=0.03;//球体弹跳速度})();vargui=newGUI();gui.add(controls,"rotationS......
  • 前端基础学习2 | JavaScript
    1、什么是JavaScript相关链接:https://baike.baidu.com/item/JavaScript/321142JavaScript(简称:JS)是一门跨平台、面向对象的脚本语言,是用来控制网页行为的,它使得网页可交互。关于JavaScript有必要知道的事:1)JavaScript和Java是完全不同的语言,不论是概念还是设计,但是基础......
  • three.js动画
    旋转立方体functionrenderScene(){cube.rotation.x+=0.02;cube.rotation.y+=0.02;cube.rotation.z+=0.02;requestAnimationFrame(renderScene);stats.update();renderer.render(scene,camera);}renderScene();弹跳球varstep=0;fu......
  • 一、jsPlumb实现流程图配置--jsPlumb介绍
    jsPlumb是一个前端库,用来实现类似MicrosoftVisio的Web端流程图,可以实现拖拽节点,连线,填充文案等方式生成一个流程图。jsPlumb有两个版本,一个是商业版需要收费,另一个是社区版开源免费。目前社区版的最新的文档地址一、jsPlumb中的基本概念节点(Node)节点就是流程图中可以连线或......
  • centos 安装nodejs 18版本时,需要 glibc > 2.28
    前置条件1.make版本号4.32.gcc版本号12.2.0进行glibc-2.28配置时:../configure--prefix=/usr/local/glibc-2.28--disable-profile--enable-add-ons--with-headers=/usr/include--with-binutils=/usr/bin 遇到的错误:inux-gnu/12.2.0/include-fixed-isystem/......
  • day56 动态规划part13 代码随想录算法训练营 718. 最长重复子数组
    题目:718.最长重复子数组我的感悟:有难度,不好想。理解难点:二维DP,记住那个图:===============听课笔记:我的代码:classSolution:deffindLength(self,nums1:List[int],nums2:List[int])->int:#初始化#假设内层是nums1,n,j,外层是nums2,m,......
  • 【HarmonyOS NEXT】Map如何转JSON
    ​【关键字】HarmonyOSNEXT、Object.fromEntries 【问题背景】之前基于API9发过一篇文章【HarmonyOS】JSON格式化解析Map数据失败-开发者服务与平台部社区-3MS知识管理社区(huawei.com),里面提到用Object.fromEntries可将Map数据转为JSON数据,但是在NEXT版本上却被校验......
  • Java数组
    Java数组数组是一种容器,可以用来存储同种类型的多个值。数组的定义两种形式int[]arrayintarray[]数组的初始化在内存中为数组开辟空间,并将数据存入容器的过程。静态初始化//完整格式int[]array=newint[]{11,22,33};//简化格式int[]array={11,22,33};......
  • Three.js 快速入门指南
    Three.js介绍Three.js是一个开源的应用级3DJavaScript库,可以让开发者在网页上创建3D体验。Three.js屏蔽了WebGL的底层调用细节,让开发者能更快速的进行3D场景效果的开发。Three.js的开发环境搭建创建目录并使用npminit-y初始化package.json使用npminstall--sa......
  • CommonJS和ES Module 的区别
    最近开始接触web编程,一上来就看到一堆关于module的信息,commomJSmodule和ESmodule直接给我看懵了。网上搜一下,总结一下。大概意思就是CommonJS先出现,用在nodejs编程中。这玩意在浏览器中支持的不太好,随着时间的推移浏览器代码也需要模块化呀,于是ESmodule就出现了。ES......