Andy的前後端技術筆記、生活紀錄
Javascript的map,filter,reduce
發佈於: 2024-04-03 更新於: 2024-04-21 分類於: frontend > frontend_interview

什麼是map, filter, reduce

這三個東西都是ES5推出的Array method,的可以對Array裡面的元素做一些操作。

map

  • 會回傳一個新的array
閱讀更多
CSS的的selector的權重
發佈於: 2024-04-03 更新於: 2024-04-21 分類於: frontend > frontend_interview

selector是什麼?

是用來選擇HTML tag並設定寬、高、顏色、背景圖等等(如:H1,p,div),選擇器不僅限於標籤(div, p, span),還包含class及id。

1
2
3
4
5
6
7
.className {
color:blue;
}

div {
font-size:16px;
}
閱讀更多
Javascript中<script>的async與defer
發佈於: 2024-04-02 更新於: 2024-04-21 分類於: frontend > frontend_interview

什麼是async/defer

HTML做些什麼事?

在瀏覽器執行解析網頁時如果碰到<script>標籤,會先執行該script中的行為,而...

閱讀更多
Wordpress當後端傳文章內容到前端(Vue)
發佈於: 2024-01-29 更新於: 2024-04-21 分類於: frontend

以Wordpress為後端傳資料到前端

wordpress 為後端,前端向後端取得wp中的文章時,我希望直接取得可以呈現的HTML格式,試過使用 WP 中的 function get_post_field,雖然可以取得HTML,但是HTML結構與真正在以WP當作前端呈現的文章的html有些出入,也就是在WP呈現頁面前會對原始的ht...

閱讀更多
git local 及 remote repo 不同步怎麼處理
發佈於: 2024-01-28 更新於: 2024-04-21 分類於: frontend

Local的commit 與 Remote 的commit 沒有同步

閱讀更多

google_oauth2_flow
發佈於: 2024-01-27 更新於: 2024-04-21 分類於: frontend

google oauth2 的流程

一般人視角

以一般人視角來思考oauth2的驗證的流程,在一個網頁點擊登入頁面,選擇google登入,
會跳出一個是否要同意網站取用你的google資料用來登入,點擊同意後,就會回到...

閱讀更多
Javascript - 對object(key value)做 filter & map
發佈於: 2024-01-23 更新於: 2024-04-21 分類於: frontend

如何對object做類似filter的行為

透過Object.keys把key 輸出成 Array,這樣就可以使用filter,把key當作index逐一帶入obj做條件判斷,即可達到過濾效果

1
2
3
const obj = {a : 1, b : 2, c : 3};
const filteredResult = Object.keys(obj)
.filter((key) => obj[key] > 1)
閱讀更多
nextTick in Vue3
發佈於: 2024-01-20 更新於: 2024-04-21 分類於: frontend

什麼是nextTick()?

官方定義

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM

閱讀更多
在Javacript建立promise
發佈於: 2023-03-29 更新於: 2024-04-21 分類於: frontend

建立promise

延續前一篇關於promise的文章,來試試看要怎麼建立一個Promise。

promise初版

製作一個樂透功能的promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const lotteryPromise = new Promise(function(resolve,reject){
if(Math.random() >= 0.5){
resolve('You Win the Lottery'); //fulfilled
}else{
reject("loser la"); //reject
}
})

lotteryPromise.then((res)=>{
console.log(res) //印出You Win the Lottery
}).catch((err)=>{
console.log(err) //印出loser la
})

閱讀更多
Javascript中的JSON格式
發佈於: 2023-03-28 更新於: 2024-04-21 分類於: frontend

什麼是JSON

JSON(JavaScript Object Notation)是一種數據交換格式,不論是用在前後端透過RESTful API傳遞資料、function之間使用,都是很方便的,而要把資料轉換成JSON格式則是透過 JSON.strinify(data),把data轉換成JSON格式。
他是以一對大括號以及裡面的東西,這些東西則是以Key與Value組成的...

閱讀更多