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

Question

我是Javascript的新手，我正在尝试用对象文字来理解解构方法。所以我要做的是创建一个有两种类型参数的函数：1。它是一个我想要迭代的JSON数据文件。 2.分配了随机值的对象文字。所以我试图使用作为参数传递的此对象值进行迭代，并使用来自JSON文件的数据进行过滤，并在对象迭代器数组中使用if语句。并添加到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 }));

Answer 1

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

您还忘了设置默认的{}，以便访问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>

如果要指定用于比较的运算符，请使用如下所述的函数：qazxsw poi

Answer 2

看起来您希望能够通过该对象中三个项目的任意组合来过滤数据。

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 method是一个工厂，根据您要过滤的三个因素中的一个或多个，使回调传递给过滤器。