【JavaScript入门-19】JacaScript中的数组方法

Array 原型充满了用于在数组中添加、删除和查找内容的有用方法。

再次更新名称数组以仅包含 3 个名称。

const names = ["张三", "李四", "王五"];

如果我们刷新页面并查看names控制台中的数组，我们应该会看到类似👇

这些都是方法… concat, copyWithin, push, pop, findIndex.

处理数组时有很多方法可供使用。

我们不会讨论每一个是如何工作的，我们会讨论更重要的，并学习不可变、可变和不可变的概念**，**

让我们再次谈谈可变和不可变这两个可怕的词。

可变方法执行突变。你可以把它想象成忍者神龟。

为什么他们是变种人？

因为他们从乌龟变成了戴着非常酷的头巾的青少年。

当某些东西改变了它的原始版本时，这就是所谓的突变。

不可变方法不会改变原来的东西，它们只是返回一个新数组。

让我们做一些例子。

首先，让我们看一下变异方法。

numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const numbersBackwards = numbers.reverse();
console.log(numbersBackwards);

这给了我们逆向的数组。

该数组中的数字是否仍然是正确的顺序，它们会被颠倒还是被删除？

原来的数组实际上也被颠倒了。

这就是所谓的突变，这意味着原始数据已从最初设定的内容发生变化。

在我们的示例中，我们甚至不需要第二个变量，因为下面的代码可以正常工作👇

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];numbers.reverse();console.log(numbers);

可变性不一定是坏的或不正确的，它只是关于 JavaScript 的重要知识，有些方法会修改原始数组，而有些方法会创建一个新数组并保持原始数组不变。

让我们采取numbers并使用该slice()方法。

该slice方法允许我们取出数组的一部分并将其制成一个新数组。

假设我们要将索引 2 处的项目带到索引 4。

添加以下代码👇，刷新HTML页面并打开控制台。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];console.log(numbers);const pizzaSlice = numbers.slice(2, 4);console.log(pizzaSlice);

你所做的是你已经从索引 2 开始，这是第 3 项，并在索引 4 处停止，这是第 5 项。

Slice 根据我们传递的索引值返回使用原始数组的子集。

如果我们需要从数组中取出一块，我们可以使用 slice。

现在的问题是，数字 3 和 4 还会在原始数字数组中吗？

在我们登录pizzaSlice、添加console.log(numbers);和刷新页面的位置下方。

如我们所见，数字仍然完好无损，这意味着数字 3 和 4 尚未从中删除。

这被称为不可变方法，这意味着它们不会更改原始数据。突变方法确实会改变原始数据。

那么，如果我们想使用可变方法但又不想实际改变原始数组，该怎么办？

你拿一个数组的副本！

让我们用一个代码示例来证明这一点。

我们可以使用方括号和扩展运算符复制数组，就像这样👇

const numbersReversed = [...numbers];
console.log(numbersReversed);console.log(numbers);

继续并调用reverse()反转的数字，如下所示。

const numbersReversed = [...numbers];numbersReversed.reverse();

我们也可以立即在创建的数组上调用该方法👇

const numbersReversed = [...numbers].reverse();

回顾一下：

任何时候你想调用一个可变方法而不改变原来的东西，你应该先复制它，然后调用该方法。

我们将在数组中学习的大多数方法都是不可变的。

注释掉我们添加的所有数字代码，因为我们将继续我们的names示例，该示例位于脚本标记的顶部。

我们想要对数组做的一件事是向其中添加项目。为此，请使用该push()方法。

names.push('lux');
console.log(names);

这确实会改变原始数组。

如果你不想改变原始数组，你可以做这样的事情👇

const names2 = [...names, 'lux'];

它所做的是复制names数组中的所有项目，然后添加一个附加项目，即“lux”。

如果我们想将一个项目添加到数组的前面，则不会使用 push，因为这会将项目添加到数组的后面。

你会使用unshift().

例如👇

names.unshift('first');console.log(names)

做到这一点的不变方法是👇

const names3 = ['poppy', ...names];