paint-brush
深入探讨 JavaScript Some() 方法经过@iggy
2,074 讀數
2,074 讀數

深入探讨 JavaScript Some() 方法

经过 Ignatius Sani5m2023/07/05
Read on Terminal Reader

太長; 讀書

some() 方法确定是否至少有一个数组成员满足给定函数定义的测试。如果在数组中找到指定函数返回 true 的元素,则返回 true;否则,返回 false。因为这是一个方法,所以它接受参数,使您可以更灵活地使用数组执行操作。
featured image - 深入探讨 JavaScript Some() 方法
Ignatius Sani HackerNoon profile picture
0-item
1-item

今天,我们来看看另一个 JavaScript 数组方法,那就是some()方法。我们将学习如何使用some()方法确定数组中是否存在某个项目。


与往常一样,本文中的代码示例是用 JavaScript 语言编写的。因此,需要具备语言知识才能正确理解。事不宜迟,让我们开始吧。


JavaScript 的some()方法是什么?

Javascript some() 方法确定是否至少有一个数组成员满足给定函数定义的测试。如果在数组中找到指定函数返回 true 的元素,则返回 true;否则,返回 false。它不会对数组进行任何更改。

让我们回顾一下这段代码以便更好地理解这个方法:


 const basket = ["oranges", "apples", "pineapple", "yam"] basket.some(bas => bas.length === 3) // true basket.some(bas => bas.length <= 1) // false


我们只是尝试测试篮子数组中其中一个水果的长度是否恰好等于 3。至少在数组中,有一个成员符合此测试;在这种情况下是“山药”。我们的预期结果将是真实的。第二个条件检查是否有任何水果长度小于或等于 1。这将导致错误,因为我们显然没有任何长度小于或等于 1。



如何使用 JavaScript some()方法?

javascript some() 方法很容易使用;让我告诉你怎么做。

让我们首先了解语法是如何编写的。

语法只需将单词“some”用括号“()”括起来即可编写,如下所示:

some()

因为这是一个方法,所以它接受参数,这为您使用 some() 方法对数组执行的操作提供了更大的灵活性。


它们如下:

  1. 元素
  2. 指数
  3. 大批


元素

element 参数指示数组中当前正在处理的元素。

指数

索引只是数组中已处理的当前元素的索引。

大批

这是我们在其中调用 some() 方法的数组。

现在我们已经了解了语法,让我们看看完整的方法是什么样的。


 some((element, index, array) => { /*... */ })


正如您所看到的,我们在上面的代码片段中包含了三个参数,它提供了如何构建此方法的清晰示例。

根据您的需要,您可以选择跳过某些特征。与索引类似,如果您需要有关数组的更多详细信息,可以将其作为选项之一提供。并不总是必须包括所有标准。



JavaScript some() 方法的三种编写方式

Javascript常见的三种写法如下:

  1. 箭头功能
  2. 内联回调函数
  3. 回调函数


箭头功能

ES6中引入了箭头函数,试图解决传统函数面临的一些问题。该函数也可以与 some() 方法一起使用:


 some((element, index, array) => { /*... */ })


内联回调函数

我们可以在 some() 方法中编写回调函数,而无需将其存储在变量中。


 const basket = ["oranges","apples","pineapple","yam"] const result = basket.some(function (element, index, array)) { return element.length >= 7 }) console.log(result)


回调函数

这种风格可以通过首先声明函数并将其存储在变量中,然后将其作为回调传递给 some() 方法来编写,如下所示:


 const basket = ["oranges","apples","pineapple","yam"] function callBack(bas){   return bas.length === 7 } const result = basket.some(callBack) console.log(result)



用例

  1. 验证表单输入
  2. 确认物品的存在
  3. 授权和访问控制


使表单输入有效

在处理表单提交时,可以使用some()函数来确定哪些输入字段满足特定要求。例如,您可以验证所有输入是否包含有效的电子邮件地址,或者是否至少填写了一个必填字段。

我将给您举一个例子来说明它的外观。


 const formInputs = document.querySelectorAll('input'); const isAnyInputEmpty = Array.from(formInputs).some(input => input.value === ''); if (isAnyInputEmpty) {   console.log('Please fill in all required fields.'); } else {  console.log('Form submitted successfully.'); }


在代码示例中,我们确保用户不会提交空字段;如果他们将其留空,我们希望立即通知他们。如果他们至少提交了相关数据来满足要求,我们希望处理提交。


确认项目的存在

如果我们的 Web 应用程序中有一车产品或一个数据结构,我们可以使用 some() 来确定特定产品是否存在。当我们想要根据某个项目是否存在来执行某些操作时,这特别有用。让我们看一下这个代码示例,它可以更好地解释它。


 const shoppingCart = ['shoes', 'T-shirt', 'trouser']; const itemPresent = shoppingCart.some(item => item === 'trouser'); if (itemPresent){ console.log('Product exists in the cart.') } else { console.log('Product does not exist in the cart.') }


我们检查购物车中是否有“裤子”。当我们确认它在购物车中时,我们会登录控制台。


授权和访问控制

在实现用户身份验证和授权系统时,我们可以使用 some() 来检查用户是否至少具有一项所需的权限或属于任何指定的角色。这使我们能够控制对某些功能或资源的访问。


 const userRoles = ['admin', 'editor']; const permissions = ['admin', 'moderator']; const hasRequiredRole = permissions.some(role => userRoles.includes(role)); if (hasRequiredRole){ console.log('Access granted.') } else { console.log('Access denied.'); }


在代码示例中,我们结合使用includes()和some()方法来根据用户的角色授予权限。如果用户的角色与所需的权限一致,我们将授予他们访问权限;否则,我们将拒绝他们的访问。



要点

最后一点,javascript some() 方法用于测试条件。它不会改变原始数组。它们接受三个参数:element、Index 和 array',其中 element 参数表示数组中当前正在处理的元素,index 参数是数组中当前已处理元素的“索引”。


感谢您阅读我对 JavaScript 数组方法的评论,特别是 some() 方法。看完这个解释你觉得怎么样?你会尝试一下吗?


请在下面的评论中告诉我您的想法,并请在 HackerNoon 上关注我以获取未来的文章。