useEffect, Promise, forEach, map, async, useState & ES5
ECMAScript 5 簡稱 ES5，為 JS 語言規範。React Native 採用 JS Compiler Babel 轉換 JS 及 JSX， 將新語法轉換為相容（向下相容於） ES5，因此我們可以調整語言規範向上升級為 ES6 也無妨。
- 變數宣告
以往語言版本使用 var，新版本開始劃分 let 和 const ， let 可以重新賦值，const 不可，且 let 僅僅能在宣告在同一程式區塊（local）。
-
預設參數
//為函式指定預設參數 let userChecker = (name = "plz enter name" ) => { console.log("welcome," + name + ".") }; userCheck("Eric"); // welcome, Eric. userChecker(); // welcom,plz enter name. -
引用透明
能直接將函式呼叫取代為回傳值（換句話說，直接用回傳值取代整個呼叫）並且不改變程式行為的能力，稱為引用透明。
// 郵件範例中，emailBody 即為引用透明。 sendMail(getUser().toGreet(), emailBody) // 回傳值（賦值）的引用透明函數範例 (()=>3000)(); // 回傳 3000 // 吃葡萄吐葡萄 ((x)=>x)(1000);// 回傳 1000 // 三倍卷範例 ((1000)=> 3000)() // 三倍卷複雜運算範例 /*a為民眾帶領三倍卷交付的現金金額 ; b 為國家政策優惠的倍數 */ ((a)=>a)(1000) * ((b)=>b)(3); // 回傳3000 -
字串插值
//ES5 const PKQ = 'katesreact2020' var url = 'https://github.com/' + PKQ; //ES6+ const PKQ = 'katesreact2020' let url = 'https://github.com/${PKQ}'; -
胖箭頭 => 函式與綁定 bind(this)
舊版本，常常需要 bind 函式，讓內容符合預期，尤其是回呼函式。 新版本，不用手動綁定，會自動綁定。
//ES5
var callbackfn = function(val){
//...
}.bind(this);
//ES6 +
let callbackfn(val){
};
//alternative
let callbackfn = (val) =>{
};
-
模組注入方式
(略) -
函數簡寫
(略)
import React, { useEffect } from 'react';
useEffect(() => {
async function methodCall() {
const digest = await Crypto.digestStringAsync(
Crypto.CryptoDigestAlgorithm.SHA256,
''
);
console.log('Digest: ', digest);
}
methodCall()
}, []
);
// requestPermission for camera
useEffect(() => {
(async () => {
const { status } = await Camera.requestPermissionsAsync();
setHasPermission(status === 'granted');
})();
}, []);
// requestPermission for geolocation
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})
();
});
Promise 是一種物件，用來表示某事件必然發生，在尚未有 Promise 的時代前，開發者需要手動處理回傳成功或失敗的函數， 然而有賴於 Promise 發明之後，此 API 提供非同步處理動作。
Promise 的優勢能讓我們輕易的組合函數，回調 (callback) 迫使我們在函式中寫死函式名稱（或是函式字面值)，然後以函式 的額外參數形式去傳遞。
Promise 幫助我們將如上述的值通通串聯起來，我們有值被包覆在 promise 裡面，然後 then 等待（倘若需要時）並解開它， 方才將這個值作為參數傳遞給一個 promise 或函式。
// 可用 then 串連回呼函式，避免掉入回呼地獄的陷阱。
updateToAPI().then().then().then()...
// 範例
function successor(res){
}
function errorHandler(err){
}
updateToAPI().then(successor, errorHandler)
// 其他範例
updateToAPI(res=>anotherInterface(res)).
then(callback=>successor(callback)).
catch(errorHandler)
Promise 四步驟：
(1) new Promise || Promise.resolve
(2) 放置一個值或是非同步的產生值的程序到 Promise 裡。
(3) 當計時器或是非同步函式有結果後，這個值，會被 resolve 設置。
(4) 值會被包在 Promise 裡面返回，如同吐司從烤箱中取出，無論途中開關幾度或是加入何種醬料。
Promise 此建構函數擁有兩個回調函式：
-
resolve
-
reject
使用 then 的注意事項：
then 可以接受兩個 promise 或是函式，一是完成時使用，一是拒絕時會用。 雖然通常顯示一個，完成時使用。
.then(fulfilment, rejection)
其他函式的用法：
reject 函式能創造出一個被拒絕的 promise 物件，而且有個 .catch() 函式能捕捉錯誤（但也不會全部捕捉）， .all() 函式則能在所有 promise 完成時回傳， .race() 函式能在第一個 promise 完成時回傳。
慎重叮嚀：
圍繞著 Promise API 的錯誤處理及初始建置有許多變種，會是相當刁鑽的體驗。
// AI Chat Bot
function wqerw(){
let endPoint = {
'url': url,
'method': 'POST',
'headers': {
'content-type': 'application/x-www-form-urlencoded'
},
'body': querystring.stringify({ 'jsonStr': JSON.stringify(params) })
};
request.post(endPoint).then((body) => {
console.log(body)
let bodyJSON = JSON.parse(body);
return bodyJSON;
}).catch((error) => {
console.log('call hoitai api error :' + error);
return null;
})
}
遍歷自己。
// 範例
let K_Array = [];
[500, 200, 100, 50, 10, 5].forEach(ele=>{
K_Array.push(ele * 2)
});
在陣列上套用函式創造出新陣列。
// 範例 1
let 3timesArray =[1000, 500, 200, 100].map(ele=>{
return ele * 3;
});
console.log(3timesArray);//[3000, 1500, 600, 300]
// 範例 2
https://github.com/QueenieCplusplus/GQL_app/blob/master/README.md#map-loop
基於陣列給出新值，難度比其他 forloop 高，但對於處理聚合的值效果良好， 倘若遍歷的值型別不太常見，那就特別適合使用 reduce()。
to be continued...
for...of 會比 for...in 安全，因為 fo...in 不保證順序，JS 的 for of 如同其他語言的 for in。
do...while 基本上與 while 相同，然而停止條件是 while(false) do 只會進行一次。
// do...while
/*(1) 設置變數
(2) 設定條件
(3) 更新方式*/
const i = 0;
let k_memory = [];
do{
//if(!k_memory.includes(music[i])){...}
k_memory.push(music[i])
i ++;
}while( i < music.count());
state = {
result: null,
};
pressHandler = async () => {
let result = await WebBrowser.openBrowserAsync('https://www.google.com/');
this.setState({ result });
};
import React, { useState, useEffect } from 'react';
//camera
const [hasPermission, setHasPermission] = useState(null);
const [type, setType] = useState(Camera.Constants.Type.back);
//map
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
to be continued...
to be continued...
https://wcc723.github.io/javascript/2017/12/30/javascript-async-await/
https://github.com/QueenieCplusplus/mongo_db (DB)
https://github.com/QueenieCplusplus/login (auth)
https://github.com/QueenieCplusplus/web_token (jwt)
https://github.com/QueenieCplusplus/js_time_app (time, no code)
https://github.com/QueenieCplusplus/fs_js (upload)
https://github.com/QueenieCplusplus/browser (browser)
https://github.com/QueenieCplusplus/row_data_fetcher (select, update)
https://github.com/QueenieCplusplus/menu_item (menu)
https://github.com/QueenieCplusplus/file_downloader (file downloader)
https://github.com/QueenieCplusplus/excel_util (windows spreadsheet)
https://github.com/QueenieCplusplus/emailer (email)
https://github.com/QueenieCplusplus/js_dba (db query)