Leisure Rife

canva

日本的收據(レシート)

日本的收據並不像台灣的發票一樣,每兩個月就可以對獎,而且最高獎金還有一千萬。日本的收據除了偶爾上面有一些優惠券可以用(譬如像全家的收據偶爾上面會有咖啡優惠券),不然基本上收據沒什麼用途。那有辦法再利用這些收據嗎?

收據再利用的方法

現在有很多的APP是可以讓你拍照登錄你的收據,然後相對的就可以儲存成點數,儲存夠一定的點數後,就可以轉帳到銀行帳戶,或是換成常使用的平台的點數或禮物卡,譬如像是Amazon。

至於這個是什麼商業模式呢?雖然不知道對不對,但感覺就是搜集個人資料,然後去做資料分析,賣給其他公司之類的吧!?下圖是收據登錄的相關APP,不過自己只有用過ONE、 CODE、LINEレシート。

--

--

Canva

本篇文章屬個人見解,若有錯誤部分,請不吝指教

版本:ECMAScript 2015/ES6

說明

簡單來說,Number.parseFloat()跟parseFloat()就是一樣的功能,而為什麼在ES2015之後,會出現一樣的Function呢,這是為了模組化。所以未來也許parseFloat會被移除也說不定呢。

MDN裡Number.parseFloat的說明

This method has the same functionality as the global parseFloat() function:Number.parseFloat === parseFloat; // trueThis method is also part of ECMAScript 2015. (Its purpose is modularization of globals.)

關聯資料

--

--

高橋雄大 — [2020年版] JavaScriptの便利な書き方まとめ

本篇文章屬個人見解,若有錯誤部分,請不吝指教

版本:ECMAScript 2015/ES6

使用情境

  1. 假設在網頁上有一個表單,有很多的選項要填寫,填寫完後,要根據選項給「分數物件」加上相對應的名稱及分數。此時為了讓程式碼簡潔,則必須要動態的賦值給物件。此時就必須用Object[key]的方式來賦值。

範例程式碼

let scores = {
age: 0,
degree: 0,
}
const selectItem1 = {
key: 'age',
score: 50
}
const selectItem2 = {
key: 'degree',
score: 30
}
scores[selectItem1.key] = selectItem1.score
scores[selectItem2.key] = selectItem2.score
console.log(scores)// output: Object { age: 50, degree: 30 }

參考連結

--

--

Element UI

本篇文章屬個人見解,若有錯誤部分,請不吝指教

概要

在使用Element UI的Tooltip元件時,如果el-tooltip裡面沒有包含任何其他元件時,則會出錯或是顯示不出來。

常見錯誤寫法

下面的寫法會做成當isVisible=false的時候,el-tooltip裡面沒有包含任何element。

<el-tooltip>
<el-element v-if="isVisible" />
</el-tooltip>

正確寫法

寫法1

跟下一層的元件有著相同的判斷條件

<el-tooltip v-if="isVisible">
<el-element v-if="isVisible" />
</el-tooltip>

寫法2

使用v-show的話,元件已經渲染,只是沒有顯示而已。所以這樣的寫法也沒問題。

<el-tooltip>
<el-element v-show="isVisible" />
</el-tooltip>

vue2 & element-ui 2.4.6

不會出現錯誤訊息,但是顯示的結果會不如預期。 el-tooltip的提示訊息會跑到左上角。

vue3 & element-plus 1.0.2

出現錯誤訊息。

[Vue warn]: Unhandled error during execution of render function 
at <ElPopper ref="popper" appendToBody=true class="" ... >
at <ElTooltip content="hello" >
at <VisaVuex>
at <App>

--

--

Digamber — Introduction to TypeScript and How Does it Work?

本篇文章屬個人見解,若有錯誤部分,請不吝指教

問題

在寫TypeScript時,常常會看到這樣的程式碼objectA?.paramB ,而這個是代表什麼意思呢?

官方文件解釋

In JavaScript, if you access a property that doesn’t exist, you’ll get the value undefined rather than a runtime error. Because of this, when you read from an optional property, you’ll have to check for undefined before using it.

function printName(obj: { first: string; last?: string }) {  // Error - might crash if 'obj.last' wasn't provided!  console.log(obj.last.toUpperCase());  Object is possibly 'undefined'.Object is possibly 'undefined'.  
if (obj.last !== undefined) {
// OK console.log(obj.last.toUpperCase()); } // A safe alternative using modern JavaScript syntax: console.log(obj.last?.toUpperCase());}

使用時機

所以我們從上面知道,如果objectA後面沒接問號時,而直接使用paramB會發生什麼情況呢?

範例

在下面的這個例子的話,到底該不該加問號呢?個人是覺得應該不要加會比較好,理由是objectA是null時,objectA?.paramB會回傳undefined,這樣不會跳出錯誤,而是會導頁到{domain}/undefined/history,這樣反而要抓錯的時候不好抓,若是寫objectA.paramB則會跑出TypeError頁面,馬上就知道有問題。有空的話再來寫建議加的範例。

...
export default defineComponent({
setup() {
let vm = getCurrentInstance()
vm = null
const router = useRouter()
router.push('/${vm?.$route.params.productId}/history/')
})
...

結論

目前個人的見解的話,該加或不加還是應該要看情況而定。而並不是因為定義的object是不是可為nullable。但TypeScript還不是很熟,也許這個觀點會再被自己推翻。

參考資料

--

--

Leisure Rife

Leisure Rife

尋找著在忙忙碌碌的世界中,最適合自己的生活,也或許不斷的移動城市是我的生活方式