javascript 的筛选方法(多种方法细解)

2023-11-04

filter() 是一个数组方法,于创建一个新的数组,其中包含原始数组中满足指定条件的所有元素。

返回满足条件的所有内容 放在新的数组里

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4, 6]

find() 是一个数组方法,用于在数组中查找满足特定条件的第一个元素,并返回该元素的值

遍历数组中所有内容 找到第一个符合值返回(返回一个对象) 否则为 undefined

const items = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'pear', price: 2 }
];
const item = items.find(item => item.name === 'banana');
console.log(item); // { name: 'banana', price: 3 }

some() 检测数组中是否有符合指定条件的元素,如果有则返回true,否则返回false。

一真则真

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // true

every() 检测数组中是否每个元素都符合指定条件,如果是则返回true,否则返回false

一假则假

const numbers = [2, 4, 6, 8, 10];
const isEvenNumbers = numbers.every(number => number % 2 === 0);
console.log(isEvenNumbers); // true

reduce() 对数组中所有元素进行累加或者其他操作,最终返回一个结果

所有内容进行累加

const numbers = [1, 2, 3, 4, 5];  //累加
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(sum); // 15

const arr = [   //去重
  { name: '内容1', id: 1 },
  { name: '内容2', id: 2 },
  { name: '内容2', id: 2 },	
  { name: '内容3', id: 3 },
  { name: '内容4', id: 4 },
]
const arr1 = arr.reduce((prev, cur) => {
  prev[cur.id] = cur
  return prev
}, {})
console.log(arr1)// 去除了 id:2的对象 当前返回的值

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

total

必需。initialValue,或函数先前返回的值。

currentValue

必需。当前元素的值。

index

可选。当前元素的数组索引。

arr

可选。当前元素所属的数组对象

initialValue

可选。作为初始值传递给函数的值。

reduce()方法详解:是 JavaScript 数组的一个高阶函数,它可以对数组中的元素进行迭代,并返回一个单一的值。它接收两个参数:一个是用于迭代的函数,另一个是初始值。

在 reduce() 方法中,第一个参数是一个匿名函数,它接收两个参数:prev 和 cur。prev 表示上一次迭代的返回值,而 cur 则表示当前迭代的元素。在第一次迭代时,prev 的值可以是数组的第一项值,也可以是 reduce() 方法的第二个参数值。如果没有指定第二个参数,prev 的值就是数组的第一项值,cur 的值就是数组的第二项值。

在匿名函数中,我们可以对 prev 和 cur 进行任何操作,并返回一个新的值。这个新的值将会成为下一次迭代的 prev 值。当迭代完成后,reduce() 方法会返回最终的 prev 值。

总之,reduce() 方法可以使用一个匿名函数对数组中的元素进行迭代,并返回一个单一的值。在匿名函数中,我们可以自定义 prev 和 cur 的值,并返回一个新的 prev 值,用于下一次迭代。

includes()方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false

语法:includes(searchElement,fromIndex)

searchElement

必须。需要查找的元素值。

fromIndex

可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

当fromIndex 参数负值,则按升序从 array.length + fromIndex 的索引开始 搜索

var arr = [1,2,3,4];
arr.includes(1,-1); //false
arr.includes(2,-4); //true
因为arr.length = 4
第一个: arr.includes(1,4+(-1) ) => arr.includes(1,3) 从索引3开始,所以没有找到元素返回false
第二个: arr.includes(2,4+(-4)) => arr.includes(2,0) 也就是从索引0开始,找到元素返回true

 indexof() 方法查找到第一个传入的元素,并返回当前元素的索引,如果没找到就就返回-1。

语法:arr.indexOf(searchElement[, fromIndex])

开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即-1表示从最后一个元素开始查找,-2表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,并不改变其查找顺序,查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0,则整个数组都将会被查询。其默认值为0.

let arr1 = ['a', 'b', 'c']

const r1 = arr1.myIndexOf('a')

console.log(r1) // 0

const r2 = arr1.myIndexOf('a', 1)

console.log(r2) // -1

const r3 = arr1.myIndexOf('a', -1)

console.log(r3) // -1

const r4 = arr1.myIndexOf('c')

console.log(r4) // 2

const r5 = arr1.myIndexOf('c', 1)

console.log(r5) // 2

const r6 = arr1.myIndexOf('c', -1)

console.log(r6) // 2

 findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

在数组中 找到则返回第一个下标,没找到则返回-1

1.当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

2.如果没有符合条件的元素返回 -1

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

javascript 的筛选方法(多种方法细解) 的相关文章

随机推荐

  • 大学生团体天梯赛L3-016 二叉搜索树的结构(非暴力解法,建树后O1查找)

    不难发现 里面绝大多数的查询都是跟父节点有关 所以我们每次插入的时候维护他和他的父节点 同层则再维护一个层节点 1 指针法 include
  • logback源码解析及自定义Appender、自定义logback.xml标签

    本文基于slf4j 1 7 25 目录 0 基本概念介绍 1 简单实用示例 2 加载解析配置logback配置文件源码解析 3 加载解析配置文件拓展点 3 1 标签对应复杂对象 默认用NestedComplexPropertyIA解析执行
  • VCS基本选项命令介绍

    一 如何执行 编译执行 1 编译链接生成二进制可执行文件 vcs source file compile time options 例如 vcs v2k filename v debug all 2k指2001版本 compile time
  • 怎么这么慢!:flask 和 node express 性能测试

    问题 我写完项目之后 顺手测了测性能 发现是真的低 测试环境配置 操作系统 win10 CPU Ryzen7 3700X 主板 微星8450M MORTAR MAX 显卡 技嘉RTX2060Super Windforce OC 内存 金士顿
  • 高级选择器

    div class test background ffff00 div class card container position relative margin 40px auto width 200px height 200px we
  • VirtIO实现原理——数据传输演示

    文章目录 初始化 示意图 代码分析 Guest第一次添加buffer 示意图 代码分析 Notify Host Host第一次处理buffer 示意图 代码分析 Guest第二次添加buffer Host第二次处理buffer 初始化 示意
  • PLY格式文件

    PLY是一种电脑档案格式 全名为多边形档案 Polygon File Format 或 斯坦福三角形档案 Stanford Triangle Format 该格式主要用以储存立体扫描结果的三维数值 透过多边形片面的集合描述三维物体 与其他格
  • OpenTiny 前端组件库正式开源啦!面向未来,为开发者而生

    华为开发者大会2023 HDC Cloud 2023 于7月7日 9日在东莞拉开帷幕 本届大会以 每一个开发者都了不起 为主题 OpenTiny作为前端企业级组件库解决方案 在本次大会上正式进行发布 项目发展历程 从自研走向开源的 Tiny
  • 黑圈数字符号0到50复制_[LaTeX 中文使用] 使用「数字形式」的罗马数字

    本文已加入专栏文章目录 归入 进阶使用 文章系列 背景信息 阿拉伯数字 1 2 3 4 5 6 7 8 9 10 11 12 由数字符号 0 1 2 3 4 5 6 7 8 9 构成 小写罗马数字 i ii iii iv v vi vii
  • TensorFlow制作自己的数据集,并用神经网络来训练自己制作的数据集【下】

    参考文章 VGGnet 从TFrecords制作到网络训练 Tensorflow制作并用CNN训练自己的数据集 TensorFlow中的协调器tf train Coordinator和入队线程启动器tf train start queue
  • Untiy shader 初学 淡入淡出效果

    Properties MainTex Texture 2D white Range Range Range 0 1 0 FadeRange FadeRange Range 3 100 3 SubShader Tags RenderType
  • 《Linux0.11源码解读》理解(五) head之开启分页

    先回顾一下地址长度以及组合的演变 16位cpu意味着其数据总线 寄存器也是16位 但是地址总线 寻址能力 与此无关 可能是20位 可以参考 cpu的位宽 操作系统的位宽和寻址能力的关系 cpu位宽 brahmsjiang的博客 CSDN博客
  • 海外APP推送(上篇):厂商通道与谷歌FCM通道的差异

    作者 极光高级工程师 史坤坤 企业出海图景 在疫情持续 叠加复杂多变的国际贸易环境下 中国对外直接投资流量和存量连续四年稳居全球前三 近八成中国企业将维持和扩大对外投资意向 看好对外投资前景 企业出海 第一要务就是要建立与用户的触达通道 在
  • 好文推荐——无需公网IP,远程连接SQL Server数据库【内网穿透】

    文章目录 0 声明 1 前言 2 本地安装和设置SQL Server 2 1 SQL Server下载 2 2 SQL Server本地连接测试 2 3 Cpolar内网穿透的下载和安装 2 4 Cpolar内网穿透的注册 3 本地网页发布
  • python中常用的工具包

    一 Python中常用的科学计算工具包 我们最了解的科学计算工具可能是Matlab 它能进行集数值计算 可视化工具及交互于一身 可惜的是它是一个商业产品 开源方面除了GNU Octave在尝试做一个类似Matlab的工具包外 Python的
  • 【Verilog 基础】阻塞赋值和非阻塞赋值的区别

    目录 阻塞赋值 非阻塞赋值 实际工程仿真 阻塞赋值仿真 编写Verilog代码 编写测试文件代码 综合看RTL图 进行实际仿真 非阻塞赋值仿真 编写Verilog代码 编写测试文件代码 综合看RTL图 实际仿真图 总结 阻塞赋值 阻塞赋值的
  • 统计封闭岛屿的数目

    1254 统计封闭岛屿的数目 关于岛屿的相似题目 岛屿数量 二维矩阵的dfs算法 封闭岛屿数量 二维矩阵的dfs算法 统计封闭岛屿的数目 统计子岛屿 不同岛屿的数量 class MaxAreaOfIsland floodFill 算法 12
  • BaseModel(数据模型映射关系)

    import BaseModel h implementation BaseModel id initContentWithDic NSDictionary dic self super init if self self dicToObj
  • 矿场无盘服务器,七号矿场引领传输新时代

    随着时代的高速发展 Web3 0时代也即将到来 海量数据的产生是必然的 如何确保数据有足够的存储空间 保证数据的安全 这就是未来需要攻克的难点 那么 IPFS网络去中心化存储 信息加密保护 信息不能篡改等技术是现阶段发展所需的技术 With
  • javascript 的筛选方法(多种方法细解)

    filter 是一个数组方法 于创建一个新的数组 其中包含原始数组中满足指定条件的所有元素 返回满足条件的所有内容 放在新的数组里 const numbers 1 2 3 4 5 6 const evenNumbers numbers fi