当前位置: 首页 > news >正文

【掌握 JavaScript 数组迭代:map 和 includes 的使用技巧】

map

map()方法是数组原型的一个函数,用于对数组的每个元素执行一个函数,并返回一个新的数组,其中包含么哦一个元素执行的结果。

语法

const newArray = array.map(callback(currentValue, index, arr), thisValue)

参数

callback:表示对数组中的每个元素要执行的函数,该函数包含三个参数:

  • currentValue:当前正在处理的元素。
  • index(可选):当前正在处理的元素的索引。
  • arr(可选):调用 map 方法的数组。

thisValue:可选参数,表示实行callback函数时的this指向

示例

let num: number[] = [1, 2, 3, 4, 5];// #region 基本用法
let doubled = num.map((item) => {return item * 2;
})
console.log(doubled); // [2, 4, 6, 8, 10]
// #endregion//  #region 将对象数组转换为属性值数组
let objects = [{ name: 'apple', color: 'red' }, { name: 'banana', color: 'yellow' }, { name: 'orange', color: 'orange' }];
let colors = objects.map((item) => {if(item.color !='yellow')  return item.color
})
console.log(colors); // [ 'red', undefined, 'orange' ]
// #endregion// #region map this指向
let num2: number[] = [1, 2, 3, 4, 5];
let obj = { multiplier: 2 };
let doubled2 = num2.map(function (item) {return item * this.multiplier;
}, obj);
console.log(doubled2); // [2, 4, 6, 8, 10]
// #endregion

includes

includes 是 JavaScript 数组和字符串原型上的一个方法用于检查某个值是否存在于数组或字符串中。它返回一个布尔值:如果找到了该值,则返回 true;否则返回 false

语法

  • searchElement:必需。要在数组中查找的元素。
  • fromIndex:可选。开始搜索的位置。如果该索引值大于或等于数组长度,则该方法返回 false,因为搜索区间为空。如果省略,则从索引 0 开始搜索。如果是负数,则它代表从数组末尾开始计算的位置。即使该位置是负数,检查时仍是从前往后检查。
arr.includes(searchElement[, fromIndex = 0])

示例

/*** includes 方法用来判断一个数组是否包含一个指定的值,如果包含则返回 true ,否则返回 false。* 语法:* array.includes(searchElement,fromIndex)*/let arr: number[] = [1, 2, 3];
console.log( `查询数组 arr 中是否存在 1 :${arr.includes(1)}` ); // 查询数组 arr 中是否存在 1 :true
console.log( `查询数组 arr 中是否存在 4 :${arr.includes(4)}` ); // 查询数组 arr 中是否存在 4 :falseconsole.log( `从 arr 的索引 2 开始查找,是否存在 1 :${arr.includes(1, 2)}` ); // 从 arr 的索引 2 开始查找,是否存在 1 :false
console.log( `从 arr 的索引 0 开始查找,是否存在 2 : ${arr.includes(2, 0)}` ); // 从 arr 的索引 0 开始查找,是否存在 2 : true
console.log( `从 arr 的索引 -1 开始查找,是否存在 1 :${arr.includes(1, -1)}` ); // 从 arr 的索引 -1 开始查找,是否存在 1 :false/*** 当 fromIndex 为负数时,则它代表从数组末尾开始计算的位置;fromIndex 的值是负数时,* 如果数组长度小于 fromIndex 的绝对值,则 fromIndex 的值等于 0。*/// arr.length = 3
// arr.includes(1,-1) 等价于 arr.includes(1,2)
console.log( arr.includes(1,-1) ) // false
// arr.includes(2,-2) 等价于 arr.includes(2,1)
console.log( arr.includes(2,-2) ) // true
// arr.includes(2,-4) 等价于 arr.includes(2,0)
console.log( arr.includes(2,-4) ) // true
http://www.lryc.cn/news/520592.html

相关文章:

  • 深入浅出 Android AES 加密解密:从理论到实战
  • Clickhouse基础(一)
  • 深度学习|表示学习|一个神经元可以干什么|02
  • ubuntu22.04降级安装CUDA11.3
  • 为AI聊天工具添加一个知识系统 之32 三“中”全“会”:推理式的ISA(父类)和IOS(母本)以及生成式CMN (双亲委派)之1
  • Python----Python高级(函数基础,形参和实参,参数传递,全局变量和局部变量,匿名函数,递归函数,eval()函数,LEGB规则)
  • spring解决循环依赖的通俗理解
  • 用 Python 从零开始创建神经网络(十九):真实数据集
  • 介绍PyTorch张量
  • Vision Transformer (ViT)原理
  • 移动云自研云原生数据库入围国采!
  • Unity中对象池的使用(用一个简单粗暴的例子)
  • linux命令行连接Postgresql常用命令
  • 每日一题-单链表排序
  • webpack04服务器配置
  • JDK下载安装配置
  • 30_Redis哨兵模式
  • NLP三大特征抽取器:CNN、RNN与Transformer全面解析
  • 《使用 YOLOV8 和 KerasCV 进行高效目标检测》
  • 从MySQL迁移到PostgreSQL的完整指南
  • 服务器一次性部署One API + ChatGPT-Next-Web
  • 51单片机 和 STM32 的烧录方式和通信协议的区别
  • (STM32笔记)十二、DMA的基础知识与用法 第二部分
  • 【优选算法篇】:模拟算法的力量--解决复杂问题的新视角
  • 探秘 JMeter (Interleave Controller)交错控制器:解锁性能测试的隐藏密码
  • 脚本化挂在物理盘、nfs、yum、pg数据库、nginx(已上传脚本)
  • ESP嵌入式开发环境安装
  • Elasticsearch入门学习
  • 黑马linux笔记(03)在Linux上部署各类软件 MySQL5.7/8.0 Tomcat(JDK) Nginx RabbitMQ
  • 《软硬协同优化,解锁鸿蒙系统AI应用性能新高度》