【问题标题】:JavaScript shortcut for checking a particular key-value inside array of objects用于检查对象数组中特定键值的 JavaScript 快捷方式
【发布时间】:2017-03-06 23:47:08
【问题描述】:

我是 Angular 开发人员,对 JavaScript 速记方法了解不多。

我遇到了一种情况,我需要在 JavaScript 中使用 for 循环进行循环。

假设我有一个像

这样的对象数组
var arr = [{name:'abc', val:1}, {name:'xyz', val:2}, ....];

给定一个字符串“xyz”,如果我的对象数组将名称作为“xyz”值,是否有任何 JavaScript/Angular 速记不使用 for 循环返回 true。

我正在寻找一个速记表达式,例如 indexOf 函数。

非常感谢任何帮助。

【问题讨论】:

  • arr.some(o => o.name === "xyz")
  • 你也可以使用find function

标签: javascript angularjs shorthand


【解决方案1】:

你可以使用

if (arr.filter(function(x) { return x.name === 'xyz'; }).length > 0) { ... }

在 ES6 之前的版本中。

这是一个更麻烦的版本,当然你可以提取你的函数以获得更易读/更灵活的版本:

function equaling(attr, value) { 
  return function(obj) {
    return (obj || {})[attr] === value; 
  };
}

if (arr.filter(equaling('name', 'xyz')).length > 0) { ... }

你也可以使用

if (arr.some(({ name }) => name === 'xyz')) { ... }

使用 ES6 / ES2015。这基本上利用了最新的语言特性,并且无需创建自己的函数即可阅读、表达和维护。

提到的功能是:

  • (value) => expression:这是一个箭头函数(简写),相当于定义函数字面量,结果接近 ES5 中的函数定义(function(value) { return expression; })——区别是不是箭头函数变体中的this 与函数变体中的this 不同。
  • ({ name }) => ...:这是一个对象扩展表达式,允许您根据属性名称轻松地将任何对象解构为其组件(或组件的一部分)。

【讨论】:

  • 非常感谢,很好的回答和很好的解释。
  • 我会避免使用过滤器,因为它会要求您检查整个数组,从而保证每次都能保证最坏情况下的性能(数组末尾的感兴趣项目)
【解决方案2】:

没有快速的速记,我认为最快捷的解决方案是使用Array.some

var hasName = arr.some(o => o.name === "xyz")

一旦遇到一个匹配的元素就会被中断,并会给你truefalse

【讨论】:

  • 某些功能的完美用例。方法简洁,读起来很好,没有什么不必要的。
【解决方案3】:

您可以使用 angular forEach 函数循环搜索它。

var matchingIndex = -1;
angular.forEach($scope.data, function(item, itemIndex) {
   if(item.name === "xyz"){
      matchingIndex = itemIndex;
   }
});
console.log(matchingIndex);

【讨论】:

  • 和for循环一样,不是简写,只是异步循环。
  • 一旦找到匹配项,您应该“打破”循环。在这种情况下,它至少在功能上等同于“一些”数组函数。这说明了仅当您无权访问“some”数组函数时才应使用此方法。
【解决方案4】:

如果您不能使用数组“some”函数,那么您应该简单地构建一个基本的 for 循环并在其中进行测试。

避免使用诸如“forEach”或“filter”之类的数组函数,因为它们会要求您检查整个数组,从而保证每次都出现最坏情况的性能,即使感兴趣的项目位于数组的开头也是如此。短路“过滤器”的“forEach”将要求您做一些丑陋的事情,例如将函数调用包装在 try-catch 块中,然后在找到匹配项后抛出(不要这样做)。

所以,如果您不能使用“some”函数,那么请接受一个基本的 for 循环,并在找到匹配项后立即中断。

【讨论】:

    【解决方案5】:

    另一种解决方案是使用array.findIndex。您可以创建检查具有指定名称的元素是否存在的函数:

    const findByName = (name) => arr.findIndex(elem => elem.name === 'xyz') > -1;
    

    然后使用它:

    findByName('xyz')  // true
    findByName('wrongName')  // false
    

    查看:https://jsfiddle.net/63ayto1w/1/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2021-12-08
      • 1970-01-01
      • 2018-10-13
      • 2014-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多