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. length: 2

useEffect的三種dependency差異


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

所以只會執行一次 

useEffect(() =>{

console.log("Hi)

},[])



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

console.log("Hi)

},[dependency])


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

console.log("Hi)

},)

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

Css Combinators

Css Combinators 有以下四種


  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

以這個html為例，html都是巢狀，所以是一層包一層的結果，如果我們想要選擇下層的標籤內容，可以使用descendant selector  語法是：在上層跟下層中間加上一個”空白”


<!DOCTYPE html>
<html>
<head>
    <style>
        div p {
            background-color: yellow;
        }
    </style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>

output 





將style更換成child selector如下
<style>
    div > p {
        background-color: yellow;
    }
</style>

可以發現畫面paragraph3沒有變成黃色


因為paragraph3外面多了一層<section> 所以沒辦法直接被child selector 選擇



再將style更改如下
div + p {
    background-color: yellow;
}


我們這邊用adjacent sibling selector，這會選擇指定相鄰的元素，在<div>後面的<p>被選擇了
</div>

<p>Paragraph 4. Not in a div.</p>
所以只有paragraph4被選中


最後是general sibling selector，只要相同層級並且順序在自己後面，就可以使用
<div>
    <p>Paragraph 1 in the div.</p>
    <p>Paragraph 2 in the div.</p>
    <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
如圖，paragraph4跟paragraph5都跟div同個層級，又在div後面，所以會被選中




Css Selector

 範例如下

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>uHost</title>
    <link rel="shortcut icon" href="favicon.png">
    <link rel="stylesheet" href="index.css">
</head>

<body>
<main>
    <section>
        <h1>Get the freedom you deserve.</h1>
    </section>

    <section class="test_class">
        <h1 class="test_class_h1">Use class</h1>
    </section>

    <section id="test_id">
        <h1 id="test_id_h1">Use id</h1>
    </section>

    <button disabled>Use attribute</button>
</main>
</body>

</html>


index.css

section{
    background-color: bisque;
}
h1{
    color: aqua;
}

.test_class{
    background-color: cornsilk;
}

.test_class_h1{
    color: aquamarine;
}

#test_id{
    background-color: black;
}

#test_id_h1{
    color: aliceblue;
}

button[disabled]{
    color: aquamarine;
}


section 代表選擇所有 section element
.test_class 代表選擇所有class為test_class的element
#test_id 代表選擇所有id為test_id的element
button[disabled] 代表選擇所有 attribute有disabled的 button




terminal 基本操作 ＋ git (二)

快速複習一下上一章教過的指令









以上的步驟是：
創造一個叫second.txt的檔案 --> 編輯second.txt --> 加入stage --> commit 到repository

之後輸入git log

可以看到我們操作的歷史紀錄

每一個commit後面都會有一串id
可以試著下指令 git checkout 第一個commit的id (以我這邊的例子就是972b76e15fb15bcc88ff0be7ec2da43df2745b92）
這時候就代表到了第一次commit時的status
用ls查看會發現只剩一開始commit的檔案
用git log查看會發現log也恢復到第一次commit的樣子






然後再輸入 git checkout master(這是我們的branch名稱)
就可以回復原狀了







git branch 指令可以讓你查看所有branch 如果前面有*代表目前的branch
git branch branchname（以branchname 創造一個新的branch）




也可以使用git checkout -b branchname（以branchname 創造一個新的branch並且直接checkout到該branch）



然後在剛剛建立的third_branch新增檔案並commit

用ls指令時可以看到有三個檔案
但切換回master branch後再下ls就可以看到只剩兩個檔案
因為third.txt 是我們在third_branch 新增的,所以master branch不會有這個檔案


如果想要讓master也有這個檔案
就要使用merge指令

這樣就成功讓master branch 有了 third.txt
















terminal 基本操作 ＋ git (一)

 ls:列出目前資料夾內的檔案與資料夾






mkdir:創造資料夾

cd:移動到資料夾



移動到我們剛創造的git-basics資料夾後輸入code . 

就可以直接在這個資料夾開啟vs code



輸入git init,在目錄建立.git資料夾






輸入git status 可以看到目前git的狀態

目前還沒有任何的commit  





之後輸入touch test.txt 新增一個叫做test.txt的檔案

再輸入vim test.txt 使用vim來編輯檔案



進入vim以後畫面會像這樣









請按下i 進入編輯模式 這時畫面左下角會有一個insert










就可以開始輸入文字了

在畫面輸入 Hello World!

之後按下  esc 就可以看到左下角的insert不見了









這時輸入 :進入命命模式









再輸入wq 

w表示寫入

q 表示離開

按下enter就可以了









回到terminal後

輸入open text.txt



就會看到我們剛剛創的 test.txt   出來了









再輸入一次git status

可以看到untracked files 內有我們剛剛建立的test.txt





接著輸入   git add test.txt把檔案加入stage

再查看一次status    就可以看到已經加入stage了






加入stage後,還需要commit的指令才能把檔案加入到repository

所以再輸入 git commit -m "這次commit的註解"





可以看到檔案已經被commit到repository了

p.s.如果覺得terminal   太長可以輸入  "clear" 就會清空所有內容









訂閱： 文章 (Atom)