JS短文 | 如何在数组中验证是否含某值
共 4871字，需浏览 10分钟
·
2021-05-11 10:00
作者：Dmitri Pavlutin
原文：Checking if an Array Contains a Value in JavaScript
字数：1000 字 (非直译)
阅读: 5 分钟
在一个数组中，如果给定一个值，让你判断数组中是否存在相同的值，你会怎么做？想必你会给出不少方法，因为JS提供了不少方法，让我们来使用。
虽然在数组中查找指定的数字或字符串相对容易，但是查找对象就稍微复杂一些。
在本篇文章，你将学习到如何使用更现代的方法，在数组中查找特定的值或对象。
一、查找是否存在指定的值
所谓指定的值，就是查找类似字符串、数字、布尔等这些类型的值。
最简单的方法就是使用ES2015提供的新方法array.includes()，其方法如下：
const hasValue = array.includes(value[, fromIndex]);
第一个参数就是指定要查找的值，第二个参数可选，其含义是从指定的索引位置开始查找。最终返回布尔值来判断指定的数值是否查找到。
接下来，我们来定义一个数组，查找其是否含有 'hi' 和 'hey' 这两个字符串，示例代码如下：
const greetings = ['hi', 'hello'];
greetings.includes('hi'); // => true
greetings.includes('hey'); // => false
1.1 、从指定的索引开始查找
此方法接受第二个参数，从指定的索引开始查找，这个参数是可选的，接下来，如下段代码所示，从索引 1 处开始查找给定的值，示例代码如下：
const letters = ['a', 'b', 'c', 'd'];
letters.includes('c', 1); // => true
letters.includes('a', 1); // => false
从上述代码我们可以看出，从数组索引1处开始查找，我们找到了c。但是由于 a 在数组索引0处，所以未找到。
二、查找指定的对象object是否包含
在数组中查找指定的对象稍微复杂些，我们还是通过代码来进行描述。
如果通过数组索引赋值对象变量的化，array.includes() 也能轻松完成，如下段代码所示：
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = greetings[0];
greetings.includes(toSearch); // => true
由上述代码可以看出，通过数组索引赋值对象变量,相当于引用，可以轻松完成查找，但是在实际应用中，我们并不是这么查找对象的，而是通过如下方式进行直接赋值查找，如下段代码所示：
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.includes(toSearch); // => false
运行上述代码，将返回false，由于数组不包含对象变量的引用，因此查找不到。那么，我们来如何确定数组对象中含有指定的对象呢，我们需要定一个方法，先判断两个对象是否一致，然后结合 array.some()方法来进行迭代数组实现查找指定的对象。
首先我们先定义一个方法 shallowEqual 来判断对象是否一致：
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (let key of keys1) {
if (object1[key] !== object2[key]) {
return false;
}
}
return true;
}
上述代码比较简单，就不过多解释，就是先判断属性值长度是否一致，然后在逐一判断对应属性的值是否一致。
接下来，我们来验证上述代码，定义如下三个对象变量，然后来判断后两个对象是否和第一个对象的内容是否一致：
const hi = { message: 'hi' };
const hiCopy = { message: 'hi' };
const hello = { message: 'hello' };
shallowEqual(hi, hiCopy); // => true
shallowEqual(hi, hello); // => false
运行上述代码，符合我们的预期，接下来我们可以使用 array.some(callback) 迭代数组，调用上述我们定义的 shallowEqual方法，示例代码如下：
const greetings = [{ message: 'hi' }, { message: 'hello' }];
const toSearch = { message: 'hi' };
greetings.some(item => shallowEqual(item, toSearch)); // => true
some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试,如果找到就返回。
如果要查找的对象是嵌套对象,可以使用如下deepEqual方法或使用lodash函数库的_.isEqual(object1, object2)方法。
function deepEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
return false;
}
for (const key of keys1) {
const val1 = object1[key];
const val2 = object2[key];
const areObjects = isObject(val1) && isObject(val2);
if (
areObjects && !deepEqual(val1, val2) || !areObjects && val1 !== val2
) {
return false;
}
}
return true;
}
function isObject(object) {
return object != null && typeof object === 'object';
}
三、总结
今天的文章就到这里，如果我们要在数组中查找简单的值，我们可以使用 array.includes(value) 方法，如果要在数组中查找对象，我们需要先定义对象比较的方法，然后通过array.some(callback)的迭代函数的方法进行判断：
array.some(item => shallowEqual(item, value));
注：本篇文章，并不是唯一数组查找指定值的方法，在过去很长的一段时间里，我们会常用 array.indexOf(value) !== -1 来进行判断，理解起来比较绕，不如 array.includes(value) 更符合我们人的思维。
你有什么好的方法查找数组中指定的值，欢迎大家在留言区进行讨论，感谢你的阅读。