フィルター、ソートとJavascript

Question

内の条件に基づいてマップ配列私のデータは、私が（filterKey変数が空/ nullでない場合）、フィルタおよびソート（ソートキー変数が空でない場合/ nullにしたい

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 
}, 

] 

に従っているが）。私はいくつかの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

/場合、私はその後、いくつかでそれを行うことができますが、良い方法はありますか？

実際にはありません。これは最もクリーンで明確な方法ですが、実際にはそうではないような特定のプログラミングスタイル（関数型プログラミングなど）で作業している場合を除き、代替手段は必要ありません。しかし、ステートメント（フィルタリングした場合）で（dataではなく）を使用します。もちろん、返り値mapで何かする必要があります。

---

サイドノート：sortインプレースではありませんので、割り当てのための必要性、そしてあなたは、配列dataポイントの所有者でない場合は、フィルタリングされていない場合は、あなたが最初のクローンを作成することもできますし。例えば：

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>