检查JS对象中是否存在数组元素的更好方法？ [关闭]答案

【问题标题】：Better way to check if array element exists in JS object? [closed]检查JS对象中是否存在数组元素的更好方法？ [关闭]
【发布时间】：2018-11-09 19:30:19
【问题描述】：

我的应用程序中具有允许用户在下拉菜单中选择项目并上下移动它们的功能。一旦他们选择并单击按钮，我必须遍历对象数组并仅提取在下拉菜单中选择的记录。这是我的代码示例：

var selectedColumns = ['first','last','city'];

var data = [
   {
      first: "Mike",
      last: "Ross",
      dob: "05/26/1978",
      city: "Washington DC",
      state: "DC",
      zip: 22904
   },
   {
      first: "John",
      last: "Henderson",
      dob: "11/06/1988",
      city: "Iowa City",
      state: "IA",
      zip: 52401
   },
   {
      first: "Nina",
      last: "Barkley",
      dob: "01/16/1968",
      city: "New York",
      state: "NY",
      zip: 11308
   },
   {
      first: "Jessie",
      last: "Kuch",
      dob: "02/02/1956",
      city: "Des Moines",
      state: "IA",
      zip: 55432
   },
   {
      first: "Jenny",
      last: "Terry",
      dob: "012/28/1988",
      city: "Miami",
      state: "FL",
      zip: 83943
   }
]

在选定的列中，我们只有first、last 和city。然后我必须遍历data 并只拉取选定的列。一种方法是这样的：

for(var key in data){
   for(var i=0; i<selectedColumns.lenght; i++){
      var columnID = String(columns[i]);
      console.log($.trim(data[key][columnID]));
   }
}

虽然这个解决方案工作得很好，但我想知道是否有更好的方法来避免内循环并提高效率？我在我的项目中使用JQuery/JavaScript。如果有人知道解决此问题的更好方法，请告诉我。谢谢你。

【问题讨论】：

@epascarello 还有其他智能 cmets 吗？
嘿 espresso_coffee。 StackOverflow 通常用于不起作用的代码。如果您的代码按照您的意愿运行，并且您只是在寻找改进它的方法（无论是在编写方式还是效率方面），那么您可能会在 Code Review.
@TylerRoper 感谢您告诉我。我不知道代码审查网站。
@pushkin 随意推荐 CR 上的 OP 帖子，但以后请不要以 Code Review 网站的存在作为关闭问题的理由。评估请求并使用太宽泛、主要基于意见等原因。然后您可以向 OP 提及它可以在 Code Review 上发布（如果是） on-topic。请参阅this answer to A guide to Code Review for Stack Overflow users 中的你不应该做的事情部分
只是在输入类似于 @SᴀᴍOnᴇᴌᴀ 的内容。一个“更适合代码审查”的问题并不足以单独进行结束投票。根本不是要挑剔普希金，我只是经常看到它，觉得加强这一点压力不够。 :)

标签： javascript jquery arrays json loops

【解决方案1】：

您可以使用Array.map、Array.reduce 和Object.assign

var selectedColumns = ['first','last','city'];
var data = [{first: "Mike",last: "Ross",dob: "05/26/1978",city: "Washington DC",state: "DC",zip: 22904},{first: "John",last: "Henderson",dob: "11/06/1988",city: "Iowa City",state: "IA",zip: 52401},{first: "Nina",last: "Barkley",dob: "01/16/1968",city: "New York",state: "NY",zip: 11308},{first: "Jessie",last: "Kuch",dob: "02/02/1956",city: "Des Moines",state: "IA",zip: 55432},{first: "Jenny",last: "Terry",dob: "012/28/1988",city: "Miami",state: "FL",zip: 83943}];

let result = data.map(o => selectedColumns.reduce((a,c) => Object.assign(a,{[c]:o[c]}), {}));
console.log(result);

编辑

var selectedColumns = ['dob','last','city'];
var data = [{first: "Mike",last: "Ross",dob: "01/01/1900",city: "Washington DC",state: "DC",zip: 22904},{first: "John",last: "Henderson",dob: "11/06/1988",city: "Iowa City",state: "IA",zip: 52401},{first: "Nina",last: "Barkley",dob: "01/16/1968",city: "New York",state: "NY",zip: 11308},{first: "Jessie",last: "Kuch",dob: "02/02/1956",city: "Des Moines",state: "IA",zip: 55432},{first: "Jenny",last: "Terry",dob: "012/28/1988",city: "Miami",state: "FL",zip: 83943}];

let result = data.map(o => selectedColumns.reduce((a,c) => {
  if(c === 'dob' && o[c] === '01/01/1900') a[c] = 'N/A';
  else a[c] = o[c];
  return a;
}, {}));
console.log(result);

【讨论】：

有没有办法处理这个解决方案中的数据。例如：检查列是否等于dob 并且值是01/01/1900 然后我想显示N/A。
@espresso_coffee - 是的。您可以将[c]:o[c] 更新为[c]: c=== 'dob' && o[c] === '01/01/1900' ? 'N/A' :o[c]
if 声明和else if 怎么样？我可以在同一行中使用它吗？
@espresso_coffee - if else 也可以使用。例如代替Object.assign(...)，您可以使用{a[c] = o[c]; return a;}。现在在这个块中你可以放置任何支票
您能否更新您的示例并使用if else if 只是为了更好地理解代码。谢谢！

【解决方案2】：

另一件重要的事情是，在 JavaScript 中使用 for ... in 构造迭代数组项通常是一个坏主意（请参阅 Why is using "for...in" with array iteration a bad idea? 了解一些解释）。

【讨论】：

【解决方案3】：

通过映射所需属性只需一行代码。

Array#map 用于获取data 的新数组并将所需键映射为新对象
computed property names 和值，分配给单个对象
Object.assign 和
spread syntax ... 将数组作为参数。

var selectedColumns = ['first','last','city'],
    data = [{ first: "Mike", last: "Ross", dob: "05/26/1978", city: "Washington DC", state: "DC", zip: 22904 }, { first: "John", last: "Henderson", dob: "11/06/1988", city: "Iowa City", state: "IA", zip: 52401 }, { first: "Nina", last: "Barkley", dob: "01/16/1968", city: "New York", state: "NY", zip: 11308 }, { first: "Jessie", last: "Kuch", dob: "02/02/1956", city: "Des Moines", state: "IA", zip: 55432 }, { first: "Jenny", last: "Terry", dob: "012/28/1988", city: "Miami", state: "FL", zip: 83943 }],
    result = data.map(o => Object.assign(...selectedColumns.map(k => ({ [k]: o[k] }))));
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案4】：

你会发现Array.filter 适合这个用例

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => {
    return word.length > 6;
});

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

【讨论】：

【解决方案5】：

您可以考虑使用过滤器，根据搜索条件构建过滤方法并返回过滤后的数组。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

const newArr = oldArr.filter(record => record.first === 'Nina')
//newArr would only have Nina's record

或者，如果您尝试使用特定字段，您仍然可以使用过滤器

var newArr2 = data.filter(record => record.hasOwnProperty('first'))
// newArr2 would have all records with the property name

【讨论】：