Question

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

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。如果有人知道解决此问题的更好方法，请告诉我。谢谢。

Answer 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);

Answer 2

值得一提的另一件事是，使用for ... in构造遍历JavaScript中的数组项通常是一个坏主意（有关解释，请参见Why is using "for...in" with array iteration a bad idea?）。

Answer 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; }

Answer 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"]

Answer 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

检查JS对象中是否存在数组元素的更好方法？

5 个答案: