使用 JavaScript 在数组中查找和替换元素
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
本文最初发布在我的博客上。访问inspiredwebdev.com查看更多文章和教程。欢迎查看我在Educative上的JavaScript 课程，学习从 ES6 到 ES2020 的所有内容。
数组是一种非常常见的数据结构，了解如何通过检索、添加和替换数组中的数据来操作数组非常重要。
在本文中，我们将学习在数组中查找和替换元素的不同方法。
检查数组是否包含值
首先，我们来看看检查数组是否包含给定值的不同方法。
我们可以通过多种方式来实现这一点，例如：
const arr = [1,2,3,4,5];
arr.includes(2);
// true
arr.includes(6);
// false
Array.includes这可能是最容易记住的方法，它会返回数组true是否false包含我们传递的值。
此方法可以接受一个额外的参数，用于定义要从哪里开始查找的索引；如果要检查整个数组，请留空。
我们继续介绍其他方法：
const arr = [1,2,3,4,5];
!!arr.find((a) => a === 2);
// true
!!arr.find((a) => a === 6);
// false
Array.find这也是我们可以用来检查数组是否包含某个值的另一种方法。
此方法将返回值本身，如果未找到值则返回 undefined，因此我们可以使用!!运算符将结果转换为布尔值，并快速查看是否有匹配项。
与之前的方法相比，这种方法功能更强大，Array.includes因为我们可以向它传递一个回调函数，而不仅仅是一个要检查的值，这意味着我们可以进行更复杂的检查，例如：
const arr = [1,2,3,4,5];
!!arr.find((a) => a > 2 && a < 4);
// true
能够向其传递回调函数意味着，除非你的检查非常简单直接，否则你很可能会使用findover includes。
你可以向回调函数传递第二个参数，定义开始检查的起始点，留空则检查整个数组。
接下来Array.indexOf是Array.findIndex：
const arr = [1,2,3,4,5];
arr.indexOf(1) !== -1;
// true
arr.indexOf(6) !== -1;
// false
arr.findIndex((el) => el === 1) !== -1;
// true
arr.findIndex((el) => el === 6) !== -1;
// false
Array.indexOf它们Array.findIndex的相似之处在于，它们都返回数组中找到的第一个匹配元素的索引，-1如果找不到则返回空值。
要检查某个元素是否存在，我们只需要检查返回值是否-1为真即可。
这些方法很有用，因为它们既可以用来检查数组中是否存在某个元素，同时还能获取该元素的位置信息，然后我们可以利用这些信息来替换该元素。
Array.includes这两种方法之间的区别与我们之前看到的和之间的区别相同Array.find，其中第一种方法（Array.indexOf）将接受一个要检查的值，而第二种方法（Array.findIndex）将接受一个回调来执行更高级的检查。
与我们之前看到的所有方法类似，你也可以定义一个起始索引，从该索引开始检查数组。
接下来介绍ES6（ES2015）中引入的两种新方法：
const arr = [1,2,3,4,5];
arr.some((el) => el === 2);
// true
arr.every((el) => el === 3);
// false
Array.some它将检查数组中是否至少有一个值符合回调函数中的条件，并Array.every检查数组中的所有元素是否都符合该条件。
替换数组中指定索引处的元素
现在我们知道如何检查数组是否包含特定元素，假设我们想将该元素替换为其他元素。
掌握了以上方法，简直易如反掌！
为了替换一个元素，我们需要知道它的索引，所以让我们来看一些使用我们刚刚学到的方法的例子：
const arr = [1,2,3,4,5];
const index = arr.indexOf(2);
arr[index] = 0;
arr;
// [1,0,3,4,5];
如您所见，首先，我们获取了要更改的元素的索引，在本例中是数字 2，然后我们使用括号表示法替换了它arr[index]。
我们可以使用以下方法实现同样的效果findIndex：
const arr = [1,2,3,4,5];
const index = arr.findIndex((el) => el === 2);
arr[index] = 0;
arr;
// [1,0,3,4,5];
很简单吧？findIndex我们还可以用它来检查类似以下这种情况，即我们有一个对象数组：
const arr = [
{
id:1,
val: 'one'
},
{
id:2,
val: 'two'
},
{
id:3,
val: 'three'
},
{
id:4,
val: 'four'
},
{
id:5,
val: 'five'
},
];
const index = arr.findIndex((el) => el.id === 2);
arr[index] = {
id:0,
val: 'zero'
};
arr;
// [
// {
// id:1,
// val: 'one'
// },
// {
// id:0,
// val: 'zero'
// },
// {
// id:3,
// val: 'three'
// },
// {
// id:4,
// val: 'four'
// },
// {
// id:5,
// val: 'five'
// },
// ];
如您所见，使用该方法findIndex我们可以轻松地查找并替换对象数组中的对象。
假设我们不想替换某个值，而只想删除它，那么现在我们将探讨不同的删除方法。
&bnbsp;
从数组中删除值
首先，我们来看一些从数组中删除值的基本方法Array.pop：Array.shift
const arr = [1,2,3,4,5];
arr.pop();
arr;
// [1,2,3,4]
const arr2 = [1,2,3,4,5];
arr2.shift();
arr2;
// [2,3,4,5];
Array.pop`remove` 方法会移除数组的最后Array.shift一个元素，而 `remove` 方法会移除第一个元素。这些方法不允许使用其他参数，可见它们非常基础。
两种方法都会修改原始数组，并且都会返回删除的元素，因此您可以执行以下操作：
const arr = [1,2,3,4,5];
const el = arr.pop();
el;
// 1
现在我们将介绍几种从数组中删除特定元素的方法。
首先，我们来看Array.splice与 结合使用的用法Array.indexOf。
Array.splice允许我们从数组中移除从指定索引开始的元素。我们可以提供第二个参数来指定要删除的元素数量。
const arr = [1,2,3,4,5];
const index = arr.indexOf(2);
arr.splice(index,1);
arr;
// [1,3,4,5];
const arr2 = [1,2,3,4,5];
const index = arr2.indexOf(2);
arr2.splice(index);
arr2;
// [1]
如您所见，在第一个示例中，我们指定要删除的元素数量为 1，而在第二个示例中，我们没有传递任何参数，因此从起始索引开始删除了数组中的所有元素。
Array.splice将会修改你的原始数组并返回移除的元素，以便你可以执行以下操作：
const arr = [1,2,3,4,5];
const index = arr.indexOf(2);
const splicedArr = arr.splice(index,1);
arr;
// [1,3,4,5];
splicedArr;
// [2]
接下来，我们还可以使用以下方法，根据条件（而不仅仅是索引）从数组中删除元素Array.filter：
let arr = [1,2,3,4,5];
const newArr = arr.filter((el) => el >2);
newArr;
// [3,4,5]
arr;
// [1,2,3,4,5];
与和不同Array.pop，会创建一个新数组，其中包含回调函数中所有通过条件的元素，因此你的原始数组不会被修改，正如你从上面的代码中看到的那样。Array.shiftArray.spliceArray.filter
在这种情况下，我们的新数组由原数组中所有大于 2 的元素组成。
非常感谢您的阅读。欢迎在DevTo、我的博客inspiredwebdev或Twitter上关注我。也欢迎访问Educative.io，那里有互动式编程课程。
免责声明：文中链接指向亚马逊和Educative网站，均为联盟链接。您通过这些链接购买商品，我将获得额外佣金。谢谢！
我的电子书已在亚马逊和Leanpub上架。