JavaScript笔记——快速了解 ES6 新增数组方法,开箱即用(含案例)

news2025/1/7 18:44:56

文章目录

  • 📋前言
  • 🎯Array.from()
  • 🎯Array.of()
  • 🎯Array.find()
  • 🎯Array.findIndex()
  • 🎯Array.includes()
  • 🎯Array.flat()
  • 🎯Array.flatMap()
  • 🎯Array.every()
  • 🎯Array.some()
  • 🎯Array.reduce()
  • 🎯Array.reduceRight()
  • 🎯Array.sort()
  • 🎯Array.reverse()
  • 🎯Array.fill()
  • 🎯Array.slice()
  • 🎯Array.splice()
  • 🎯Array.copyWithin()
  • 🎯Array.forEach()
  • 🎯Array.map()
  • 🎯Array.filter()
  • 📝最后


在这里插入图片描述

📋前言

数组是 JavaScript 以及多数编程其他编程语言的一种基础数据类型。ES6 提供了许多新的数组方法,这篇文章将介绍其中一些常用的数组方法及其使用示例。


🎯Array.from()

Array.from() 方法从一个类似数组或可迭代对象中创建一个新的,浅拷贝的数组实例。例如,将字符串转换为字符数组。

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

在这里插入图片描述


🎯Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例,而不考虑参数的数量或类型。

const arr1 = Array.of(1, 2, 3, 4);
console.log(arr1); // [1, 2, 3, 4]
const arr2 = Array.of(10);
console.log(arr2); // [10]

在这里插入图片描述


🎯Array.find()

Array.find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

const arr = [1, 2, 3, 4, 5];
const result = arr.find((element) => element > 3);
console.log(result); // 4

在这里插入图片描述


🎯Array.findIndex()

Array.findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => element > 3);
console.log(index); // 3

在这里插入图片描述


🎯Array.includes()

Array.includes() 方法判断一个数组是否包含某个指定的元素,根据情况,如果包含则返回 true ,否则返回 false

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

在这里插入图片描述


🎯Array.flat()

Array.flat() 方法创建一个新数组,其中所有子数组元素递归地连接到指定的深度。

const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(1)); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
console.log(arr.flat(3)); // [1, 2, 3, 4]
console.log(arr.flat(4)); // [1, 2, 3, 4]

在这里插入图片描述


🎯Array.flatMap()

Array.flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。可以同时实现 mapflat 两个操作。

调用 a.flatMap() 相当于(但是效率远高于)a.map(f).flat()

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]
const arr = [-1, -2, 1, 2];
const result = arr.flatMap(x => x < 0 ? [] : Math.sqrt(x));
console.log(result); // [1, 1.4142135623730951]

在这里插入图片描述


🎯Array.every()

Array.every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。如果函数对所有元素都返回 true,则该方法返回 true ,否则返回 false

let a = [1, 2, 3, 4, 5]
a.every(x => x < 10) // true 所有值小于10
a.every(x => x % 2 === 0) // false 并非所有值都为偶数

在这里插入图片描述


🎯Array.some()

Array.some() 方法测试一个数组内的所有元素是否至少有一个能通过某个指定函数的测试。如果函数对任一元素返回 true,则该方法返回 true,否则返回 false

let a = [1, 2, 3, 4, 5]
a.some(x => x % 2 === 0) // true a包含偶数
a.some(isNaN) // false a没有非数值

在这里插入图片描述


🎯Array.reduce()

Array.reduce() 方法对数组中的每个元素执行一个提供的函数,将其结果汇总为单个返回值。

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(result); // 15

在这里插入图片描述


🎯Array.reduceRight()

reduceRight()reduce() 类似,只不过是从高索引向低索引(从右到左)处理数组,而不是从低到高。

反正就是从数组的末尾开始执行。它对数组中的每个元素(从右到左)应用一个函数,将其结果汇总成单个值并返回。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log(sum); // 15

在这里插入图片描述


🎯Array.sort()

Array.sort() 方法对数组元素进行排序,默认情况下按照字符串排序。

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort();
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

在这里插入图片描述
若要按照数值大小排序,需要传入一个比较函数。

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

🎯Array.reverse()

Array.reverse() 方法将数组中元素的位置颠倒,并返回该数组的引用。

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

在这里插入图片描述


🎯Array.fill()

Array.fill() 方法填充一个数组中从起始索引到终止索引内的全部元素,使用一个静态值。可以用于初始化一个固定值的数组。

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4, 5]

在这里插入图片描述


🎯Array.slice()

Array.slice() 方法返回一个新数组,包含从起始索引到终止索引(不包括终止索引)内的所有元素。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // [2, 3, 4]

在这里插入图片描述


🎯Array.splice()

Array.splice() 方法通过删除或替换现有元素或者在指定位置插入新元素来修改数组。(注意 Array.splice()Array.slice() 不用混淆了)

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从第2个位置开始删除1个元素
console.log(arr); // [1, 2, 4, 5]

在这里插入图片描述


🎯Array.copyWithin()

Array.copyWithin() 方法把数组切片复制到数组中的新位置,它会就地修改数组并返回修改后的数组,但不会改变数组的长度。该方法接受的参数:

  • target(必需):从该位置开始替换数据。如果为负值,则表示倒数第几个位置。如果 target 大于等于数组长度,则什么也不发生。
  • start(可选):从该位置开始读取数据,默认为 0。如果为负值,则表示倒数第几个位置。如果 start 被忽略,copyWithin() 将会从第一个元素开始复制。如果 start 大于等于数组长度,则什么也不发生。
  • end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,则表示倒数第几个位置。
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, -3);
console.log(arr); // [3, 4, 5, 4, 5]

在这里插入图片描述


🎯Array.forEach()

Array.forEach() 方法对数组的每个元素执行一次提供的函数,函数接受三个参数:当前元素,当前索引和数组本身。该方法没有返回值。

const arr = [1, 2, 3, 4, 5];
arr.forEach((element, index) => {
  console.log(`arr[${index}] = ${element}`);
});
// 输出:
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
// arr[3] = 4
// arr[4] = 5

在这里插入图片描述


🎯Array.map()

Array.map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map((element) => element * 2);
console.log(mappedArr); // [2, 4, 6, 8, 10]

在这里插入图片描述


🎯Array.filter()

Array.filter() 方法创建一个新数组,其中包含所有通过指定函数测试的元素。测试函数接受三个参数:当前元素,当前索引和数组本身。

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((element) => element > 3);
console.log(filteredArr); // [4, 5]

在这里插入图片描述
等等…


📝最后

以上就是常用的 ES6 数组方法及其使用示例,这些方法为我们处理数组提供了非常便捷的方式,使用它们可以让我们更加高效地编写代码。
在这里插入图片描述

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

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

相关文章

MQTT相关知识点

目录 一、简述 二、设计规范 三、MQTT协议原理 3.1 MQTT协议实现方式 3.2 网络传输与应用消息 3.3 MQTT客户端 3.4 MQTT服务器 3.5 MQTT协议中的订阅、主题、会话 3.6 MQTT协议中的方法 四.MQTT脑图 五.体验MQTT 搭建MQTT服务器&#xff08;Broker&#xff09; MQT…

MFC 工具栏SOP 线程创建非模式化窗口 实现拓展工具栏

自己在学习工具栏的时候&#xff0c;做的笔记 1 实现基本工具栏 1.1 在Dlg.h文件中声明变量和定义资源ID #define ID_BUTTONS 501CToolBar m_toolbar; //工具栏 CImageList m_imageList; //工具栏图片 CImageList m_hotImageList; //工具栏热点图片 CReBar m_Rebar; //…

Jenkins安装以及部署

本文基于war包形式部署的 需要提前下载Jenkins的war包 Jenkins 的安装和设置下载内容 https://mirrors.jenkins.io/war 版本对应 目录 1.初始化环境 2.安装jdk 安装git Maven配置 安装Jenkins 使用DockerFile的方式进行部署 1.初始化环境 mkdir -p /home/soft 2.安装…

Python零基础入门(一)——Python简介与基础语法

系列文章目录 个人简介&#xff1a;机电专业在读研究生&#xff0c;CSDN内容合伙人&#xff0c;博主个人首页 Python入门专栏&#xff1a;《Python入门》欢迎阅读&#xff0c;一起进步&#xff01;&#x1f31f;&#x1f31f;&#x1f31f; 码字不易&#xff0c;如果觉得文章不…

智慧食堂如何建造?手把手教你

智慧食堂是现代科技与餐饮行业相结合的创新应用。随着技术的不断发展&#xff0c;许多企业和机构正积极采用智慧收银系统来改进食堂管理和收银流程。 引入智慧收银系统不仅可以提高企业食堂的运营效率&#xff0c;降低错误率&#xff0c;还能为企业带来更多的商机和竞争优势。 …

开源客户沟通平台Chatwoot

什么是 Chatwoot &#xff1f; Chatwoot 是一个开源客户沟通平台&#xff0c;可帮助公司在其网站、Facebook 页面、Twitter、Whatsapp、SMS、电子邮件等上吸引客户。 它是 Intercom、Zendesk、Salesforce Service Cloud 等的开源替代品。 很多网站的右侧或者右下角&#xff0c;…

中银国际在以太坊上发行代币化票据?三种可能,扑朔迷离!

* * * 原创&#xff1a;刘教链 * * * 号外&#xff1a;今天在“刘教链Pro”发表了一篇内参文章&#xff0c;《内参&#xff1a;对币本位高抛低吸策略的一点儿思考》&#xff08;次条&#xff09;&#xff0c;以及一篇原创文章《他提案将SEC主席Gary Gensler撤职》&#xff08;…

加速44%!RT-DETR量化无损压缩优秀实战

RT-DETR 模型是飞桨目标检测套件 PaddleDetection 最新发布的 SOTA 目标检测模型。其是一种基于 DETR 架构的端到端目标检测器&#xff0c;在速度和精度上均取得了 SOTA 性能。在实际部署中&#xff0c;为了追求“更准、更小、更快”的效率能力&#xff0c;本文使用飞桨模型压缩…

单元测试:构建可靠软件的关键步骤

点击上方“程序猿技术大咖”&#xff0c;关注并选择“设为星标” 回复“加群”获取入群讨论资格&#xff01; 引言&#xff1a; 在当今快节奏的软件开发环境中&#xff0c;构建可靠的软件是至关重要的。单元测试作为软件开发过程中的关键步骤之一&#xff0c;能够帮助开发者发现…

006、体系结构之TiKV读取和Coprocessor

TiKV读取和Coprocessor 1、数据的读取1.1、ReadIndex Read1.2、Follower Read 协同处理器(Coprocessor) 1、数据的读取 1.1、ReadIndex Read 例如此时要读取 key 1 的内容&#xff0c;它不能直接去kv中读取&#xff0c;因为它是分布式的&#xff0c;它经过TiDB Server 收到读…

认识ASP.NET MVC的5种AuthorizationFilter

一、IAuthorizationFilter 所有的AuthorizationFilter实现了接口IAuthorizationFilter。如下面的代码片断所示&#xff0c;IAuthorizationFilter定义了一个OnAuthorization方法用于实现授权的操作。作为该方法的参数filterContext是一个表示授权上下文的AuthorizationContext对…

机器学习笔记 - 基于深度学习的多种目标跟踪检测框架简述

一、 目标跟踪 对象跟踪是执行一组初始对象检测的任务,为每个初始检测创建唯一的 ID,然后在每个对象在视频中的帧中移动时跟踪它们,从而维护 ID 分配。最先进的方法涉及融合来自RGB和基于事件的相机的数据,以产生更可靠的对象跟踪。仅使用RGB图像作为输入的基于CNN的模型也…

【JUC基础】17. 并发编程常见问题

目录 1、前言 2、上下文切换问题 2.1、什么是上下文切换 2.2、上下文切换过程 2.3、上下文切换的原因 2.4、上下文切换的开销和影响 2.5、注意事项和改进策略 3、死锁问题 3.1、什么是死锁 3.2、死锁示例 3.3、改进策略 4、竞态条件 5、内存可见性 6、小结 1、前言…

Hinton:我对“青蛙”创造出“人”这件事的后果很紧张丨全文整理+视频

假如青蛙创造了人&#xff0c;那现在是青蛙控制人类&#xff0c;还是人类控制青蛙&#xff1f;我不知道如何防止这种情况发生。我老了&#xff0c;希望像你们这样年轻而才华横溢的研究人员弄清楚如何拥有这些超级智能&#xff0c;并使我们的生活在不受超级智能控制的情况下变得…

Servlet+jsp+Layui图书管理系统

项目介绍 介绍 使用到了jsp&#xff0c;servlet&#xff0c;Mysql&#xff0c;Java&#xff0c;layui。 大致功能 关于用户&#xff1a; 登录&#xff0c;申请注册&#xff0c;查看搜索图书&#xff0c;查看有关用户的借阅记录&#xff0c;丢失记录&#xff0c;预借记录。对…

详解3DMAX室内建筑效果图的制作渲染过程

如果你并不了解室内、建筑效果图的制作渲染过程,本文将可能对你有一些帮助。 ​什么是 3DMax 渲染? 渲染是利用3dmax软件创建与原始建筑设计或模型精确的 3D 图片的技术。最终效果图在逼真度、精度、细节和真实性方面准确地反映了真实材料和光线。具有经验和专业知识的室内…

Elastic 8.8 版引入了全新的 Learned Sparse Encoder 模型,并宣布正式推出合成监测

作者&#xff1a;Brian Bergholm 2023年5月25日 今天&#xff0c;我们非常高兴地宣布 Elastic 8.8 版正式发布。 新增功能 Elastic 企业搜索可帮助开发人员利用 Elasticsearch 实现强大的现代搜索和发现体验。 请在 “Elastic 企业搜索亮点” 博文或 8.8 版发行说明中&#…

HarmonyOS学习路之开发篇—Java UI框架(TableLayout)

TableLayout TableLayout使用表格的方式划分子组件。 支持的XML属性 TableLayout的共有XML属性继承自&#xff1a;Component TableLayout的自有XML属性见下表&#xff1a; 属性名称 中文描述 取值 取值说明 使用案例 alignment_type 对齐方式 align_edges 表示TableL…

AI实战营第二期 第八节 《MMSegmentation代码课》——笔记9

AI实战营第二期 第八节 《MMSegmentation代码课》 【课程链接】https://www.bilibili.com/video/BV1uh411T73q/ 【讲师介绍】张子豪 OpenMMLab算法工程师 【学习形式】录播社群答疑 【作业布置】本次课程为实战课&#xff0c;需提交笔记作业。 课程大纲&#xff1a; 环境配…

5--Gradle入门 - junit 的使用

5--Gradle入门 - junit 的使用 Gradle 对测试支持 测试任务自动检测并执行测试源集中的所有单元测试。测试执行完成后会生成一个报告。支持JUnit 和 TestNG 测试。 默认测试目录及标准输出 Junit 使用 Gradle 对于Junit4.x 支持 dependencies {testImplementation group: jun…