AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

🛠️ JavaScript数组操作指南：20个精通必备技巧🚀

2024-10-21 44
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本文详细介绍了 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]

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

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

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

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

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

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

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

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

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

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

    要在数组的特定索引位置添加一个元素，可以使用 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]

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

    要在数组中替换特定索引位置的元素，可以使用 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]

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

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

    const arr = [1, 2, 3];

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

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

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

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

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

    要从数组中删除具有特定属性的对象，可以使用 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 }]

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

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

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

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

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

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

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

    要检查数组中的每个对象是否都具有特定属性，可以使用 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

  1. 将数组转换为对象

    要将数组转换为自定义对象，可以使用 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 }

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

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

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

  1. 将对象转换为数组

    要从对象创建一个数组，可以使用 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 }]

  1. 合并两个数组

    要合并两个 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]

  1. 对数组进行排序

    如果要按值对数组进行排序，可以使用 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]

  1. 对对象数组进行排序

    要按值对数组进行排序，请使用具有比较函数的 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 === objB
  return 0;
};
const result3 = arr3.toSorted(alphabetically);
console.log(result3);
// [{ letter: 'a' }, { letter: 'b' }, { letter: 'c' }]

  1. 反转数组

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

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

  1. 从数组中移除重复项

    要从数组中移除重复的元素，可以使用 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数组操作中取得更大的成功。如果您有任何问题或反馈，请随时与我联系。愿您的编码之路充满挑战和成就！ 🚀

文章标签：
前端开发
JavaScript
索引
开发者
自然语言处理
关键词：
JavaScript数组
chnjames
目录
相关文章
神明木佑
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
37 3
神明木佑
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
神明木佑
51 4
邹荣乐
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
JavaScript中数组、对象等循环遍历的常用方法介绍（二）
邹荣乐
52 1
小强在此
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组，函数】的基础知识点
【javaScript数组，函数】的基础知识点
小强在此
32 5
Li370234940
|
2月前
|
JavaScript 前端开发 索引
探索JavaScript数组：基础
探索JavaScript数组：基础
Li370234940
21 3
Li370234940
|
2月前
|
JavaScript 前端开发 索引
JS 删除数组元素（ 5种方法 ）
JS 删除数组元素（ 5种方法 ）
Li370234940
76 1
跃@sir
|
2月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
跃@sir
31 0
cqtianxin1
|
2月前
|
存储 JavaScript 前端开发
JavaScript Array（数组） 对象
JavaScript Array（数组） 对象
cqtianxin1
35 3
游客d4ctjwcbkna34
|
3月前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素
游客d4ctjwcbkna34
60 8
神明木佑
|
2月前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
神明木佑
30 0

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    【JavaScript】——JS基础入门常见操作（大量举例）
    20
  • 2
    Nginx 支持 JavaScript：前所未有的扩展
    17
  • 3
    带方向感知功能的js图片遮罩层插件
    39
  • 4
    如何使用Selenium处理JavaScript动态加载的内容？
    33
  • 5
    捕获键盘输入和输入组合键的js库hotkeys
    23
  • 6
    兼容移动手机的js拖拽插件Draggin.js
    20
  • 7
    页面滚动触发css3动画js插件
    39
  • 8
    JavaScript中的数据类型以及存储上的差别
    38
  • 9
    时尚简洁的js轮播图特效插件
    40
  • 10
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
    89

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Go语言核心编程 - 基础语法、数组、切片、Map
  • HTML5 新特性教程
  • Python语言基础 - 语法入门
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)