在 JavaScript 中将项目附加到数组的 5 种方法

以下是 5 种在数组末尾添加元素的方法。push、splice和length会改变原始数组。而concat和spread不会改变原始数组，而是返回一个新数组。哪种方法最好取决于你的用例👍

变异

这将改变原始数组

const array = ['🦊'];

array.push('🐴');
array.splice(array.length, 0, '🐴');
array[array.length] = '🐴';

// Result
// ['🦊', '🐴']

非变异

这将创建一个新数组，而原始数组保持不变。

const original = ['🦊'];
let newArray;

newArray = original.concat('🦄');
newArray = [...original, '🦄'];

// Result
newArray; // ['🦊', '🦄']
original; // ['🦊']

将项目附加到数组的 3 种方法（可变）

让我们看看将元素推送到数组的三种方法。这是可变方法，这意味着它将更改原始数组。

推

将项目添加到数组末尾的最简单方法是使用push。

const zoo = ['🦊', '🐮'];

zoo.push('🐧');

console.log(zoo); // ['🦊', '🐮', '🐧']

请注意，我说的是 item* s *，而不仅仅是 item 😉 是的，您可以推送多个项目。

const zoo = ['🦊', '🐮'];

zoo.push('🐧', '🐦', '🐤');

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

但是传递单个元素实在太麻烦了，好在我们可以使用 ES6 的展开功能。这允许我们传递一个数组，然后使用...语法将元素展开成单个参数。

const zoo = ['🦊', '🐮'];
const birds = ['🐧', '🐦', '🐤'];

zoo.push(...birds);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

拼接

乍一看，这个方法似乎很麻烦😂，因为我们传递了一堆参数。这是因为这个方法可以添加或删除数组项。因此，我们需要给它提供更多信息才能让它完成工作。让我们看看它需要哪些参数。

参数	参数名称	定义
1	起始索引	您想要添加/删除项目的索引
2	删除数量	您要移除的项目数量
3	项目	您要添加的号码（如果要删除，则可将其留空）

const zoo = ['🦊', '🐮'];

zoo.splice(
  zoo.length, // We want add at the END of our array
  0, // We do NOT want to remove any item
  '🐧', '🐦', '🐤', // These are the items we want to add
);

console.log(zoo); // ['🦊', '🐮', '🐧', '🐦', '🐤']

长度

我认为这是所有方法中最聪明的。这是我从未想过的方法之一。那么，让我们来了解一下它为什么有效。

JavaScript 中的数组是从零索引开始的。因此，第一个元素的索引为0。

const zoo = ['🦊', '🐮'];

// '🦊' | Index = 0
// '🐮' | Index = 1

数组中的括号符号允许我们检索项目，但也可以让我们覆盖该项目。

const zoo = ['🦊', '🐮'];

// Retrieve
zoo[0]; // Returns '🦊'

// Override
zoo[1] = '🥩';

console.log(zoo); // ['🦊', '🥩']; **

// ** JUST JOKING 😂
// ...I promise no animals were hurt in this blog post 😬

有趣的是，它array.length返回的是数组中元素的总数。这意味着长度总是比索引的最后一项高一个数字。因此，在长度索引处赋值，本质上就是在数组末尾添加一个元素。

const zoo = ['🦊', '🐮'];
const length = zoo.length; // 2

zoo[length] = '🐯';

console.log(zoo); // ['🦊', '🐮', '🐯']

将项目附加到数组的 2 种方法（非可变）

好了，让我们继续以非可变的方式向数组添加新元素。此时，原始数组将保持不变，而新添加的内容将保存在新数组中。

连接

此方法用于合并数组。因此，我们可以通过传入一个数组来添加多个项目。

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟']; // Array of multiple items

const aquarium = ocean.concat(fish);

aquarium; // ['🐙', '🦀', '🐠', '🐟']

// Original Array Not Affected
ocean; //  ['🐙', '🦀']

但它不仅接受数组作为参数，还接受值。

const ocean = ['🐙', '🦀'];

const aquarium = ocean.concat('🐡'); // Add a single value
const sushi = ocean.concat('🐡', '🍚'); // Add multiple values

aquarium; // ['🐙', '🦀', '🐡']
sushi; //  ['🐙', '🦀', '🐡', '🍚']

// Original Array Not Affected
ocean; // ['🐙', '🦀']

传播

我们可以使用扩展语法将每个数组元素扩展为单独的元素。一个非常流行的应用是使用扩展来创建副本或合并两个独立的数组。这类似于的效果concat。

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟'];

const aquarium = [...ocean, ...fish];

aquarium; // ['🐙', '🦀', '🐠', '🐟']

// Original Array Not Affected
ocean; //  ['🐙', '🦀']

然而，如果我们不使用扩展，我们就会得到一个嵌套数组，这不是我们想要的。

const ocean = ['🐙', '🦀'];
const fish = ['🐠', '🐟'];

const aquarium = [ocean, fish];

// [  ['🐙', '🦀'],  ['🐠', '🐟'] ]

因此我可以用它来合并数组，但我们也可以传递单个值，就像我们创建常规数组一样。

const ocean = ['🐙', '🦀'];

const aquarium = [...ocean, '🐡']; // Add a single value
const sushi = [...ocean, '🐡', '🍚']; // Add multiple values

aquarium; // ['🐙', '🦀', '🐡']
sushi; //  ['🐙', '🦀', '🐡', '🍚']

// Original Array Not Affected
ocean; // ['🐙', '🦀']

变异还是不变异？

所以问题是，要改变还是不改变？🎭 这真的取决于你的用例。当你使用 Redux 或任何状态管理架构时，一切都与不变性有关。因此，非可变方法将是你的选择。此外，不变性的概念通常更受青睐，因为它被认为是避免副作用的良好做法——这是函数式编程和编写纯函数的基础。

但这是否意味着我们永远不应该使用可变方法呢？完全不是。因为有些时候，不变性根本就不重要。举个简单的例子。

function menu(isFriday) {
  const food = ['🍗', '🍳'];
  isFriday ? food.push('🍷') : food;

  return food;
}

在这些情况下，为什么不使用可变方法呢？我常用的附加值方法是push。为什么？因为它打字少（是的，我很懒😂）而且可读性极佳。没错，你可以说concat也太短了。但看看这个性能测试。push 快多了！⚡️

性能测试：Push 与 Concat

社区意见

@DigianPaul： 要修改还是不要修改？总的来说，这是一个很深奥的问题。不过，简单来说，假设原始数组在其他地方仍然需要？那么就不要修改它。如果不需要，可以直接修改它，这通常比创建副本更快。

据说存在这样的数据结构，其中创建数组的副本与改变它一样便宜（或相当便宜），并且这些非常酷但在 JavaScript 社区中并不那么普遍。

这些被称为“持久数据结构”，在很多情况下非常有用。但它们的设计相当复杂。

它们使诸如撤销/重做之类的功能变得简单。但它们在函数式编程和多线程应用程序中也发挥着真正的作用。

@KClarkADSTech：您也可以使用[ newEl, ...array]或array.unshift(newEl)。

@stojakovic99：向数组添加空项的一种简单方法（如果我们甚至可以称之为将项附加到数组，我认为更合适的术语是调整大小）是：（但是你永远不应该这样做。）

const array = [1, 2];

array.length = 3;

console.log(array); // [1, 2, <1 empty item>]

@devhammed：您还可以使用它来缩小数组

const array = [1, 2];

array.length = 1;

console.log(array); // [1]

@johnkazer：如果在其他地方需要数组，就不要修改，这个观点很好，尤其是在并行或并发编程中。即使在单线程 JavaScript 中，你也可能通过引用传递数组，从而意外地修改数据。总的来说，我觉得不修改数组是一个更轻松的方法！

资源

感谢阅读❤
打个招呼！Instagram | Twitter | SamanthaMing.com

文章来源：https://dev.to/samanthaming/5-way-to-append-item-to-array-in-javascript-bgm