JavaScript数组操作指南：20个精通操作技巧指南

splice、 slice、 pop 和 shift。数组的排序方法是稳定且非原地算法的吗？要记住所有 JavaScript 数组方法以及它们之间的区别并不容易。它们的名称相似，就好像直接从同义词词典中提取一样。

这个数组速查表列出了 JavaScript 中通常需要的所有数组方法，以及不需要的方法都不包含在内。就是这么简单！为了让您更容易理解，我基于常见用例制作了这个速查表。

在我们开始之前，关于不可变性（Immutability）有一点需要注意。本文中使用的所有函数都是不可变的，简而言之，这意味着在使用这些方法时，您永远不会改变原始数组。不可变性在现代 JavaScript 中非常重要。

Stack Overflow 中对 Immutability 的理解。

尽管这些方法在各自的操作中都是不可变的，但您仍然不能完全确保不可变性。如果在不可变数组中包含可变数据类型（数组、对象、函数），您仍然可以修改数组内部的可变数据。我们将这种数组称为浅不可变数组，与深不可变数组相对，后者仅包含不可变项。

  1. 在数组的开头添加元素

    要将一个项目添加到数组的开头，使用数组扩展（array spreading）。不要使用 unshift 方法，因为它会修改原始数组。

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

  2. 在数组的末尾添加元素

    要在数组的末尾追加一个项目，使用数组展开（array spreading）。不要使用 push 方法，因为它会修改原始数组。

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

  3. 从数组的开头移除一个元素

    要移除数组中的第一个项目，使用 slice 方法。不要使用 shift 或 splice 方法，因为它们会修改原始数组。

    const arr = [1, 2, 3];
// 保留索引1及其之后的所有元素
const result = arr.slice(1);
console.log(result);
// [2, 3]

  4. 从数组的末尾移除一个元素

    要移除数组中的最后一个项目，使用 slice 方法。不要使用 pop 或 splice 方法，因为它们会修改原始数组。

    const arr = [1, 2, 3];
// 保留索引0及其之后的所有元素，除了数组中的一个元素。
const result = arr.slice(0, -1);
console.log(result);
// [1, 2]

  5. 在数组中的特定索引位置插入元素

    要在数组的特定索引位置添加一个元素，可以使用 toSpliced 方法。不要使用 splice 方法，因为它会修改原始数组。

    const arr = [1, 2, 3];
// 保留索引1，删除0个元素，在索引1插入元素 "one point five"，并保留其后的所有元素。
const result = arr.toSpliced(1, 0, "one point five");
console.log(result);
// [1, "one point five", 2, 3]

  6. 在数组中替换特定索引位置的元素

    要在数组中替换特定索引位置的元素，可以使用 toSpliced 或 with 方法。不要使用 splice 方法，因为它会修改原始数组。

    const arr = [1, 2, 3];
​
// 使用 toSpliced。
// 保留索引1，删除1个元素，在索引1插入元素 "two"，并保留其后的所有元素。
const result1 = arr.toSpliced(1, 1, "two");
console.log(result1);
// [1, "two", 3]
​
// 使用 with。
// 复制旧数组 arr，将索引1替换为 "two"。
const result2 = arr.with(1, "two");
console.log(result2);
// [1, "two", 3]

  7. 从数组中删除特定索引位置的元素

    要从数组中移除一个项，可以使用 toSpliced 方法。不要使用 splice 方法，因为它会修改原始数组。

    const arr = [1, 2, 3];
​
// 在索引1处删除1个元素。
const result = arr.toSpliced(1, 1);
console.log(result);
// [1, 3]

  8. 从数组中根据值移除一个元素

    要从数组中删除特定的值，可以使用 filter 方法。不要将 indexOf 与 splice 方法一起使用，因为它会修改原始数组。

    const arr = [1, 2, 3];
const result = arr.filter((element) => element !== 2);
console.log(result);
// [1, 3]

  9. 从数组中根据属性移除对象

    要从数组中删除具有特定属性的对象，可以使用 filter 方法。不要将 findIndex 与 splice 方法一起使用，因为它会修改原始数组。

    const arr = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result = arr.filter((obj) => obj.num !== 2);
console.log(result);
// [{ num: 1 }, { num: 3 }]

  10. 检查数组是否包含一个元素

    要检查数组是否包含一个值，可以使用 includes 方法。

    const arr = [1, 2, 3];
const result = arr.includes(2);
console.log(result);
// true

  11. 检查数组是否包含具有特定属性的对象

    要检查数组是否包含具有特定属性的对象，可以使用 some 方法。

    const arr = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result = arr.some((obj) => obj.num === 2);
console.log(result);
// true

  12. 检查数组中的所有对象是否都具有特定属性

    要检查数组中的每个对象是否都具有特定属性，可以使用 every 方法。

    const arr1 = [{ num: 1 }, { num: 2 }, { num: 3 }];
const result1 = arr1.every((obj) => obj.num === 2);
console.log(result1);
// false
​
const arr2 = [{ num: 2 }, { num: 2 }, { num: 2 }];
const result2 = arr2.every((obj) => obj.num === 2);
console.log(result2);
// true

  13. 将数组转换为对象

    要将数组转换为自定义对象，可以使用 reduce 方法。

    // 将键映射到值的函数。
const arr1 = [1, 2, 3];
const result1 = arr1.reduce((acc, cur, index) => {acc[`attr${index}`] = cur;return acc;
}, {});
console.log(result1);
// { attr0: 1, attr1: 2, attr2: 3 }
​
// 一个计算出现次数的函数可能如下所示。
const arr2 = ["a", "b", "c", "c"];
const result2 = arr2.reduce((acc, cur) => {if (acc[cur]) {acc[cur] += 1;} else {acc[cur] = 1;}return acc;
}, {});
console.log(result2);
// { a: 1, b: 1, c: 2 })
​
// 将数组元素映射到布尔值的函数可以如下所示。
// 即，将数组转换为对象键。
const arr3 = ["a", "b", "c"];
const truthValues = ["b", "c"];
const result3 = arr3.reduce((acc, cur) => {acc[cur] = truthValues.includes(cur);return acc;
}, {});
console.log(result3);
// { a: false, b: true, c: true }

  14. 将对象数组转换为对象

    要将对象数组转换为对象，可以使用 Object.assign方法和数组扩展语法。

    const arr = [{ attr1: 1 }, { attr2: 2 }, { attr3: 3 }];
const result = Object.assign({}, ...arr);
console.log(result);
// { attr1: 1, attr2: 2, attr3: 3 }

  15. 将对象转换为数组

    要从对象创建一个数组，可以使用 Object.keys、Object.values 或 Object.entries 方法，可能与 map 方法一起使用。

    const obj = { a: 1, b: 2, c: 3 };
​
// 键的数组。
const result1 = Object.keys(obj);
console.log(result1);
// ["a", "b", "c"]
​
// 值的数组。
const result2 = Object.values(obj);
console.log(result2);
// [1, 2, 3]
​
// 键值对象的数组。
const result3 = Object.entries(obj).map(([key, value]) => ({ key, value }));
console.log(result3);
// [{ key: "a", value: 1 }, { key: "b", value: 2 }, { key: "c", value: 3 }]

    在某些情况下，可以链式使用一些 map 和 filter方法来修改和筛选值。

    const obj = { a: 1, b: 2, c: 3 };
​
// 具有平方值大于3的值的数组。
const result1 = Object.values(obj).map((value) => value * value).filter((value) => value > 3);
console.log(result1);
// [4, 9]
​
// 具有值大于1的键值对象的数组。
const result2 = Object.entries(obj).map(([key, value]) => ({ key, value })).filter((keyValueObj) => keyValueObj.value > 1);
console.log(result2);
// [{ key: "b", value: 2 }, { key: "c", value: 3 }]

  16. 合并两个数组

    要合并两个 JavaScript 数组，可以使用 concat 方法或数组的扩展语法。不要使用 push 方法，因为它会修改原始数组。

    const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
​
// 使用 concat 方法更快。
const combinedArray1 = arr1.concat(arr2);
console.log(combinedArray1);
// [1, 2, 3, 4, 5, 6]
​
// 使用扩展语法可能更可读。
const combinedArray2 = [...arr1, ...arr2];
console.log(combinedArray2);
// [1, 2, 3, 4, 5, 6]

  17. 对数组进行排序

    如果要按值对数组进行排序，可以使用 toStorted方法。toStorted 方法是稳定的，这意味着它会保持相互相等的元素的顺序不变。而且，该方法是非原地的，通常这是一件好事，因为它不会修改现有的数组。不要使用 sort 方法，因为它会进行原地排序，从而修改原始数组。

    // 对字符串进行排序。
let arr1 = ["b", "c", "a"];
const result1 = arr1.toSorted();
console.log(result1);
// ["a", "b", "c"]
​
// 注意：数字是按其 toString 值进行排序的，而不是按其数值进行排序的！
const arr2 = [10, 1, 5];
const result2 = arr2.toSorted();
console.log(result2);
// [1, 10, 5]
​
// 若要对数字进行排序，可以使用比较器。
const arr3 = [10, 1, 5];
const result3 = arr3.toSorted((a, b) => a - b);
console.log(result3);
// [1, 5, 10]

  18. 对对象数组进行排序

    要按值对数组进行排序，请使用具有比较函数的 toStorted 方法。比较函数用于确定两个值中哪个应该首先排序。toStorted 方法是稳定的，这意味着它会保持相互相等的元素的顺序不变。此方法不会原地排序，通常这是一件好事，因为它不会修改现有的数组。不要使用 sort 方法，因为它会修改原始数组。

    const arr = [{ num: 3 }, { num: 1 }, { num: 2 }];
​
// 如果比较函数返回正值，objA 将在 objB 之前排序。
const byNumberAttribute = (objA, objB) => objA.num - objB.num;
const result1 = arr.toSorted(byNumberAttribute);
console.log(result1);
// [{ num: 1 }, { num: 2 }, { num: 3 }]
​
// 更通用的比较函数。
const byAttribute = (attr) => (objA, objB) => objA[attr] - objB[attr];
const result2 = arr.toSorted(byAttribute("num"));
console.log(result2);
// [{ num: 1 }, { num: 2 }, { num: 3 }]
​
// 注意：比较函数必须返回整数值。
// 如果需要对其他数据类型进行排序，可以返回 1、0 或 -1。
const arr3 = [{ letter: "c" }, { letter: "a" }, { letter: "b" }];
const alphabetically = (objA, objB) => {if (objA.letter < objB.letter) {return -1;}
​if (objA.letter > objB.letter) {return 1;}
​// objA === objBreturn 0;
};
const result3 = arr3.toSorted(alphabetically);
console.log(result3);
// [{ letter: 'a' }, { letter: 'b' }, { letter: 'c' }]

  19. 反转数组

    要反转数组中的所有值，请使用 toReversed 方法。

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

  20. 从数组中移除重复项

    要从数组中移除重复的元素，可以使用 filter 方法或使用集合（Set）。

    const arr = [1, 2, 3, 2, 1];
​
// 使用 filter 方法。
const result1 = arr.filter((item, index) => arr.indexOf(item) === index);
console.log(result1);
// [1, 2, 3]
​
// 使用 Set。
const result2 = [...new Set(arr)];
console.log(result2);
// [1, 2, 3]

在这篇博客中，我们深入研究了JavaScript数组的20个必备高效技巧，旨在帮助您更智能、更高效地处理数组数据。我们从数组的基础操作开始，逐步引导您掌握更高级的技能。

我们学到了如何在数组的开头和末尾添加、移除元素，以及如何在特定索引位置插入、替换和删除元素，而不会影响原始数组。我们了解了如何检查数组中是否包含特定元素，以及如何将数组转换为对象或对象数组转换为对象或数组。我们还探讨了如何合并两个数组，对数组进行排序，包括对象数组，以及如何反转数组和去除重复项。

这些技巧不仅仅是一堆代码示例，它们代表了更深刻的概念，涉及到JavaScript中数组操作的核心原则。通过掌握这些技巧，您将能够：

  • 编写更整洁、可读和高效的代码。
  • 更智能地处理数组数据，无论是在前端还是后端开发中。
  • 解决各种常见问题，从数据过滤到数据转换和排序。
  • 提高您的编码技能，使您成为JavaScript数组操作的专家。

不管您是新手还是经验丰富的开发者，这些技巧都将成为您工具箱中的宝贵资产。JavaScript数组是开发中不可或缺的一部分，精通数组操作将使您的项目更具竞争力。

如果您想更深入地了解这些技巧，我鼓励您动手实践。尝试在自己的项目中应用它们，以加深理解。最重要的是，保持好奇心，不断学习和探索，因为JavaScript的世界充满了无限的可能性。

感谢您阅读这篇博客，希望它为您提供了有价值的知识，帮助您在JavaScript数组操作中取得更大的成功。如果您有任何问题或反馈，请随时与我联系。愿您的编码之路充满挑战和成就！ 🚀

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Gson使用Object接收长数字问题

Gson使用Object接收长数字问题

近期发现公司同事在使用Gson对数字进行反序列列化时出现丢失精度的问题&#xff0c;在这里搬运一下&#xff0c;做个记录~ 现象 使用Gson反序列化长Long数字(大于16位),如果用Object类型来接收则会丢失精度。 Gson会将数字反序列化为double类型,double类型本身就容易丢精度。…
阅读更多...
小程序基础

小程序基础

小程序基础 1. 认识什么是小程序 什么是微信小程序 微信小程序是一种运行在微信内部的 轻量级 应用程序。 在使用小程序时 不需要下载安装&#xff0c;用户 扫一扫 或 搜一下 即可打开应用。它也体现了 “用完即走” 的理念&#xff0c;用户不用关心安装太多应用的问题。它…
阅读更多...
weak的实现原理

weak的实现原理

iOS 在运行时维护着一个全局的弱引用表&#xff0c;该表是一个 hash 表&#xff0c;hash表的 key 是 对象本身&#xff0c;value 是指向该对象的所有 weak 指针的地址数组。 /**全局的弱引用表&#xff0c;本质是一个hash结构&#xff0c;对象本身作为key, 存储weak修饰的指…
阅读更多...
大模型训练经验

大模型训练经验

1.模型训练好后预测全是起始符号。 解决办法&#xff1a;训练数据的输入输出去掉起始符号。 2.模型训练后学不到有效信息。 加大epoch&#xff0c;我加大到了1000。 3.模型训练后预测没有结束符&#xff0c;暂时未解&#xff0c;另外&#xff0c;发现当训练不足时&#xff…
阅读更多...
Metasploit安装及使用教程（非常详细）从零基础入门到精通，看完这一篇就够了。

Metasploit安装及使用教程（非常详细）从零基础入门到精通，看完这一篇就够了。

通过本篇文章&#xff0c;我们将会学习以下内容&#xff1a; 1、在Windows上安装Metasploit 2、在Linux和MacOS上安装Metasploit 3、在Kali Linux中使用 Metasploit 4、升级Kali Linux 5、使用虚拟化软件构建渗透测试实验环境 6、配置SSH连接 7、使用SSH连接Kali 8、配…
阅读更多...
如何学习自然语言处理之语言模型

如何学习自然语言处理之语言模型

自然语言处理&#xff08;NLP&#xff09;是一种人工智能技术&#xff0c;它使计算机能够理解和处理人类语言。而语言模型是NLP中的一个重要概念&#xff0c;主要是用来估测一些词的序列的概率&#xff0c;即预测p(w1, w2, w3 … wn)&#xff0c;其中一个应用就是句子的生成。 …
阅读更多...
JVM运行流程

JVM运行流程

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;JavaEE &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; JVM 1. 运行流程2. 运行时数据区2.1 堆&am…
阅读更多...
ubuntu新建ap热点并分享

ubuntu新建ap热点并分享

测试环境ubuntu16,只有一台笔记本电脑&#xff0c;不插网线&#xff0c;无线网卡既连wifi&#xff0c;又作为热点 1.方法1 直接手动新建ap热点 参考https://jingyan.baidu.com/article/ea24bc39b03fc6da62b331f0.html https://jingyan.baidu.com/article/363872ecd8f35d6e4ba…
阅读更多...
机试指南：Ch5:线性数据结构 Ch6:递归与分治

机试指南：Ch5:线性数据结构 Ch6:递归与分治

文章目录 第5章 线性数据结构1.向量 vector2.队列 queue(1)队列的特点、应用(2)基本操作(3)例题例题1&#xff1a;约瑟夫问题2 &#xff08;难度&#xff1a;中等&#xff09; (4)习题习题1&#xff1a;排队打饭 &#xff08;难度&#xff1a;中等&#xff09; 3.栈 stack(1)栈…
阅读更多...
前端 JS 经典：Content-type 详解

前端 JS 经典：Content-type 详解

1. 什么是 Content-Type Content-Type 是 HTTP 协议中的一个请求头或响应头字段&#xff0c;用于指示发送或接收的实体的媒体类型&#xff0c;告诉服务器或客户端如何解析和处理请求或响应的主体部分。 2. Content-Type 的构成 Content-Type 由两部分组成&#xff1a;媒体类型…
阅读更多...
视频在线压缩

视频在线压缩

video2edit 一款免费的在线视频编辑软件&#xff0c;可以进行视频合并、视频剪辑、视频压缩以及转换视频格式等。 链接地址&#xff1a;在线视频编辑器和转换器 - 编辑&#xff0c;转换和压缩视频文件 打开视频压缩页面&#xff0c;上传想要压缩视频&#xff0c;支持MP4&…
阅读更多...
收入稳步增长 助力持续发展 尼康发布截至2024年3月财年第三季度财报

收入稳步增长 助力持续发展 尼康发布截至2024年3月财年第三季度财报

近日&#xff0c;尼康截至2024年3月财年的第三季度&#xff08;2023年10月1日-2023年12月31日&#xff09;财报正式发布。数据显示&#xff0c;尼康集团第三财季销售收入共计1977亿日元&#xff0c;较去年同期上涨300亿日元&#xff0c;涨幅约17.9%。其中影像业务领域&#xff…
阅读更多...
Java面试题：解释Java内存模型中的内存顺序规则，Java中的线程组（ThreadGroup）的工作原理，Java中的FutureTask的工作原理

Java面试题：解释Java内存模型中的内存顺序规则，Java中的线程组（ThreadGroup）的工作原理，Java中的FutureTask的工作原理

引言 在Java开发领域&#xff0c;内存模型、多线程和并发是三个至关重要的概念&#xff0c;它们直接影响到程序的性能、稳定性和可扩展性。作为面试官&#xff0c;考察候选人对这些概念的理解和应用能力是评估其技术水平的重要手段。本文将提供三道涉及这些核心知识点的面试题…
阅读更多...
视频记录仪_基于联发科MT6762的智能4G记录仪方案

视频记录仪_基于联发科MT6762的智能4G记录仪方案

智能记录仪采用联发科强劲八核处理器&#xff0c;12nm制程工艺的记录仪具便是满足这些需求的理想选择。搭载4GB32GB内存&#xff0c;并运行Android 11.0操作系统&#xff0c;这款记录仪具展现出强劲的性能表现。 首先&#xff0c;这款记录仪具具备优秀的视频录制功能。它能完整…
阅读更多...
WPS如何共享文件和文件夹

WPS如何共享文件和文件夹

1 WPS共享单个文件 用WPS打开要分享的文件&#xff0c;点击右上角的“分享”键&#xff0c;选择上传到云端。 之后点击“创建并分享”&#xff0c;即可分享该文档。 2 WPS创建共享文件夹 2.1 如何共享文件夹 首先打开WPS&#xff0c;点击左上角的首页。在首页栏中&#…
阅读更多...
Ubuntu系统下DPDK环境搭建

Ubuntu系统下DPDK环境搭建

目录 一.虚拟机配置1.添加一个网卡(桥接模式)2.修改网卡类型3.修改网卡名称4.重启虚拟机5.查看网卡信息6.dpdk配置内存巨型页 三 DPDK源代码下载和编译1.下载源代码2.解压源代码3.安装编译环境4.编译5.设置dpdk的环境变量6.禁止多队列网卡7.加载igb_uio模块8.网卡绑定9.验证测试…
阅读更多...
Vue3自定义文章列表组件

Vue3自定义文章列表组件

一、Vue3的代码展示 <template><div><div v-for"article in articles" :key"article.id" class"article-card"><div class"author-info"><img :src"article.avatar" alt"Author Avatar&qu…
阅读更多...
Android 验证启动模式

Android 验证启动模式

文章目录 Android 验证启动模式查看任务栈launchModestandardsingleTopsingleTasksingleInstance Intent标记FLAG_ACTIVITY_NEW_TASKFLAG_ACTIVITY_CLEAR_TASK 和 FLAG_ACTIVITY_NEW_TASKFLAG_ACTIVITY_CLEAR_TOPFLAG_ACTIVITY_SINGLE_TOP Android 验证启动模式 查看任务栈 可…
阅读更多...
软考52-上午题-【数据库】-关系模式2

软考52-上午题-【数据库】-关系模式2

一、关系模式的回顾 见&#xff1a;软考38-上午题-【数据库】-关系模式 二、关系模式 2-1、关系模式的定义 示例&#xff1a; 念法&#xff1a;A——>B A决定B&#xff0c;或者&#xff0c;B依赖于A。 2-2、函数依赖 1、非平凡的函数依赖 如果X——>Y&#xff0c;&a…
阅读更多...
Linux Shell脚本练习（三）

Linux Shell脚本练习（三）

1、测试用户名与密码是否正确。 2、输出1-1000内的素数。 3、对 100 以内的所有正整数相加求和(1234...100)。 4、输出9*9 乘法表。 5、编写脚本,显示进度条。 、 6、输入三个数并进行升序排序
阅读更多...
最新文章

Copyright @ 2022~2023