Question

我的数据正在关注

  data=[
{
id: 1,
name: 'John Doe',
contacts: 'john.doe@gmail.com',
accepted: true
},
{
id: 2,
name: 'Jane Doe',
contacts: 'jane.doe@gmail.com',
accepted: false
},

]

我想过滤（如果filterKey变量不为空/ null）和sort（如果sortKey变量不为空/ null）。我可以用一些if / then但是有更好的方法吗？

 let computedList = data
 if(filterKey) {
      computedList = data.filter(item => item.name.includes(filterKey))
 }  
 if(sortKey) {
      computedList = data.sort(...)
 }
 computedList.map(item => <div>item.name</div>)

Answer 1

我可以用一些if / then但是有更好的方法吗？

不是，不。这是最干净，最清晰的方式，除非你在某些编程风格（如函数式编程）中工作，否则根本不需要替代方案，而你似乎并不是这样。但是，您希望在computedList语句中使用data，而不是sort（如果您已过滤）。当然，您需要使用map的返回值执行某些操作。

附注：sort已就位，因此无需分配，如果您不是数组data指向的所有者，则可能需要首先克隆没有过滤。 E.g：

let computedList = filterKey ? data.filter(item => item.name.includes(filterKey)) : data.slice();
if (sortKey) {
    computedList.sort(/*...*/);
}
let result = computedList.map(item => <div>item.name</div>);

或者

let computedList = data;
if (filterKey) {
    computedList = computedList.filter(item => item.name.includes(filterKey));
}
if (sortKey) {
    if (!filterKey) {
        computedList = computedList.slice();
    }
    computedList.sort(/*...*/);
}
let result = computedList.map(item => <div>item.name</div>);

...除非你需要，否则不要制作副本。

Answer 2

偶尔出现if/else没有问题。但是，您可以使用函数的组合“隐藏”if：

const data = [ 
  {id: 1, name: 'John Doe', contacts: 'john.doe@gmail.com', accepted: true},
  {id: 2, name: 'Jane Doe', contacts: 'jane.doe@gmail.com', accepted: false},
  {id: 3, name: 'Jane J', contacts: 'jane.doe@gmail.com', accepted: false}
];

const filter = (data, filterKey) => filterKey ? data.filter(item => item.name.includes(filterKey)) : data

const sort = (data, sortKey) => sortKey ? [...data].sort((a, b) => a[sortKey] > b[sortKey]) : data

const filterKey = 'Doe'
const sortKey = 'name'
const computedList = sort(filter(data, filterKey), sortKey)
      // .map(item => <div>item.name</div>) // removed for the demo
console.log(computedList);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

根据Javascript中的条件筛选，排序和映射数组

2 个答案: