Javascript JSON 以对象为参数的文件过滤器

Javascript JSON file filter with object as a parameter

我是 Javascript 的新手,我正在尝试理解 解构 方法以及对象文字。所以我想做的是创建一个函数,它有两种类型的 arguments: 1. 这是一个我想要迭代的 JSON 数据文件。 2. 分配了随机值的对象文字。因此,我尝试使用作为参数传递的此对象值进行迭代,并使用对象迭代器数组中的 if 语句 文件中的数据过滤 JSON 。并添加到 arr 所有匹配的对象。 提前谢谢大家。

对象数组:

[
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false }
]

main.js

const data = require('./example.json')

function dataFilter (items, {id: _id, hours: _hours, finished: _finished}) {

for (let i = 0; i < items.length; i++) {
    let arr = [];
    if (items[i].id === _id) {
        arr.push(items[i])
    }
    else if (items[i].hours >= _hours){
        arr.push(items[i])
    }
    else if (items[i].finished === finished){
        arr.push(items[i])
    }
    return arr;
  }
}

console.log(dataFilter(data,{ id: 65 }));
console.log(dataFilter(data,{ hours: 30 }));

你不需要解构,你需要的是数组过滤器。

您还忘记设置默认 {} 以便您可以访问 undefined 键:

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter

const data = [
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false },
  { "id": 1986, "hours": 30,"finished": false },
];

function dataFilter (items, {id: _id, hours: _hours, finished: _finished} = {}) {
  return items.filter((item) => item.id === _id || item.hours >= _hours || item.finished === _finished);
}

document.getElementById('results').innerHTML = `
<pre>
ID: 65
${JSON.stringify(dataFilter(data,{ id: 65 }), null, 2)}
  
HOURS: 30
${JSON.stringify(dataFilter(data,{ hours: 30 }), null, 2)}
</pre>
`
<div id="results"></div>

使用多个过滤器的方法

也可以一次使用多个过滤器:

const data = [
  { "id": 44, "hours": 100,"finished": false },
  { "id": 22, "hours": 80,"finished": false },
  { "id": 65, "hours": 34,"finished": false },
  { "id": 1098, "hours": 21,"finished": true  },
  { "id": 2, "hours": 67,"finished": false },
  { "id": 765, "hours": 32,"finished": false },
  { "id": 223, "hours": 555,"finished": false },
  { "id": 986, "hours": 2,"finished": false },
  { "id": 1986, "hours": 30,"finished": false },
];

function dataFilter (items, filters = {}) {
  // this will create a list of function on the fly for every `filters` you pass.
  const fnList = Object.keys(filters)
    .map((key) => (list) => list.filter((item) => item[key] === filters[key]));
    
  let res = [...items];
  while (cursor = fnList.shift()) {
    res = cursor(res);
  }
  return res;
}

document.getElementById('results').innerHTML = `
<pre>
ID: 44, HOURS: 100
${JSON.stringify(dataFilter(data,{ id: 44, hours: 100 }), null, 2)}
  
ID: 2, HOURS: 67
${JSON.stringify(dataFilter(data,{ id: 2 }), null, 2)}
</pre>
`
<div id="results"></div>

如果要指定用于比较的运算符,请使用此处说明的函数:Are Variable Operators Possible?

您似乎希望能够通过该对象中三项的任意组合来过滤数据。

function filterFactory({id, hours, finished}) {
  return function filter(item) {
    let isGoodValue = false;
    if (id !== undefined && item.id === id) isGoodValue = true;

    // for the second and third checks we'll short-circuit if it already
    // passed an earlier check
    if (!isGoodValue && hours !== undefined && item.hours >= hours) isGoodValue = true;
    if (!isGoodValue && finished !== undefined && item.finished === finished) isGoodValue = true;
    return isGoodValue;
  };
}

data.filter(filterFactory({id: 2})); 

请注意,我们在数组上使用本机 filter methodfilterFactory 是一个工厂,它根据您过滤的三个因素中的一个或多个来进行回调以传递给过滤器。