Js object array 多條件篩選且條件可能為空

 最近在工作上遇到需要多條件篩選,且條件為空就不進行判斷,花了一點時間才研究出怎麼做

以下是解法

const originItems =
    [{id:1, live:true, name:"test1",color:"red",size:"large"},
    {id:2, live:true,name:"test2",color:"blue",size:"large"},
    {id:3, live:true,name:"test3",color:"green",size:"medium"},
    {id:4, live:false, name:"test4",color:"red",size: "small"},
    {id:5, live:false, name:"test5",color:"blue",size: "small"},
    {id:6, live:false, name:"test6",color:"green",size:"medium"}];

const sort = {live: true, color: "", size:"large"}

const result = originItems.filter( (o) =>
    (!sort.live || o.live === sort.live) && (!sort.color || o.color === sort.color)
        && (!sort.size || o.size === sort.size)
)

console.log(result)

結果如下：

1. 0: {id: 1, live: true, name: 'test1', color: 'red', size: 'large'}
2. 1: {id: 2, live: true, name: 'test2', color: 'blue', size: 'large'}
3. length: 2
4. [[Prototype]]: Array(0)

Read More

useEffect的三種dependency差異

第一種方式因為傳入的dependency是empty array

所以只會執行一次 

useEffect(() =>{

console.log("Hi)

},[])

第二種方式當每一次dependency變動時就會執行一次useEffect
useEffect(() =>{

console.log("Hi)

},[dependency])

第三種方式會變成無限迴圈...慎用
useEffect(() =>{

console.log("Hi)

},)

Read More

Js轉換時間格式為YYYY-MM-DD HH:MM:SS

身為前後端都要寫的工程師,時間處理總是會碰到的

以下是簡單的方法將Js 的Date 轉為 YYYY-MM-DD HH:MM:SS 格式的寫法

const d = new Date()
const formatedTimestamp = (d)=> {
    const date = d.toISOString().split('T')[0];
    const time = d.toTimeString().split(' ')[0];
    return `${date} ${time}`
}

Read More