💡 สวัสดีจ้าเพื่อน ๆ วันนี้แอดจะพาเพื่อน ๆ มารู้จักกับ Operator จาก JavaScript ที่จะช่วยให้เพื่อน ๆ เข้าถึงข้อมูลใน Object ได้ง่ายมากขึ้น !!
.
🌈 และเจ้านี่คือ...Optional chaining (?.) นั่นเองจ้า จะเป็นยังไง มีรายละเอียด และวิธีการใช้งานยังไง ไปติดตามกันได้ในโพสต์นี้เลยจ้า ~~
.
✨ Optional chaining (?.) - เป็นตัวดำเนินการที่ทำให้เราสามารถอ่านค่าใน Object ที่ซ้อนกันหลาย ๆ ชั้นได้ง่ายมากขึ้น เขียนง่าย และทำให้โค้ดสั้นลงนั่นเอง
.
จริง ๆ แล้วมันก็เหมือนเราใช้ เครื่องหมายจุด (.) นั่นแหละ แต่ความพิเศษของมันก็คือถ้าในกรณีไม่มีค่าใน Object หรือ Function มันจะ Return เป็น Undefined แทน Error
.
👨💻 Syntax
.
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
.
📑 วิธีการใช้งาน
.
❤️ ตัวอย่าง 1 : ใช้เข้าถึงข้อมูลใน Object
let customer = {
name: "Mew",
details: {
age: 19,
location: "Ladprao",
city: "bangkok"
}
};
let customerCity = customer.details?.city;
console.log(customerCity);
//output => bangkok
.
❤️ ตัวอย่าง 2 : ใช้กับ Nullish Coalescing
let customer = {
name: "Mew",
details: {
age: 19,
location: "Ladprao",
city: "bangkok"
}
};
const customerName = customer?.name ?? "Unknown customer name";
console.log(customerName); //output => Mew
.
❤️ ตัวอย่าง 3 : ใช้กับ Array
const obj1 = {
arr1:[45,25,14,7,1],
obj2: {
arr2:[15,112,9,10,11]
}
}
console.log(obj1?.obj2?.arr2[1]); // output => 112
console.log(obj1?.arr1[5]); // output => undefined
.
📑 Source : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
#javascript #optionalchaining #BorntoDev
console.log error 在 BorntoDev Facebook 的最佳解答
👉 Any และ Unknown เป็นการประกาศตัวแปรแบบไม่กำหนด Type ในภาษา TypeScript ซึ่งตัวแปรจะเป็น Type ใด ๆ ก็ได้นั่นเอง แล้วทั้งสองมันใช้งานแตกต่างกันยังไง มาหาคำตอบไปพร้อมกันเลยจ้า !!
.
🌟 Any - สามารถกำหนดค่าของตัวแปรให้เป็น Type ใด ๆ ก็ได้ ใช้เมื่อเวลาเราไม่สามารถทราบแน่ชัดว่าจะใช้ Type ของตัวแปรเป็นอะไร
.
👨💻 ตัวอย่างโค้ด
let x : number;
let y : any;
y = 'This is string.';
y = 99;
x = y;
console.log(x); // output => 99
.
จากโค้ดกำหนดให้ x เป็น Number และ y เป็น Any ต่อมาให้ y เท่ากับ String และ Number และให้ x เท่ากับ y ดังนั้นค่าของ x จะอิงตาม Type ที่เคยกำหนดไว้ในตอนแรก คือ number นั่นเอง ผลลัพธ์จึงเป็น 99
.
🌟 Unknown - เป็น Type Safe ของ Any ซึ่ง Unknown จะต้องเช็คค่าของ Type ก่อนการนำตัวแปรไปใช้งาน หากค่าไม่ตรงจะเกิด Error
.
👨💻 ตัวอย่างโค้ด
let x : number;
let y : unknown;
y = 'This is string.';
y = 99;
x = y;
.
จากโค้ด x จะ Error ดังนั้นจำเป็นต้องตรวจสอบ Type ให้กับ Unknown ก่อนนั่นเอง
.
let x: number;
let y: unknown;
y = 'This is string';
y = 99;
if(typeof y === 'number') {
x = y;
console.log(x); //output => 99
}
.
🌈 Unknown ดีกว่าการใช้ Any เพราะสามารถแน่ใจว่าตัวแปรนั้น ๆ ที่ได้รับมามี Property ตรงตามความต้องการ เพราะมีการเช็ค Type ก่อน
.
👉 ซึ่งทั้งสองเหมาะกับงานรับ-ส่งค่าจาก API เพราะเราไม่สามารถทราบ Type ของข้อมูลจากต้นทางนั่นเอง
.
พอจะเห็นความแตกต่างของทั้งสองกันแล้วเนอะ เพื่อน ๆ ก็ไปเลือกใช้ให้เหมาะสมกับงานด้วยนะ หวังว่าจะเป็นประโยชน์น้าาาา 🥰
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
console.log error 在 Taipei Ethereum Meetup Facebook 的精選貼文
📜 [專欄新文章] Solidity Weekly #20
✍️ mingderwang
📥 歡迎投稿: https://medium.com/taipei-ethereum-meetup #徵技術分享文 #使用心得 #教學文 #medium
Metamask “Privacy Mode”
前一陣子,Metamask 與其他幾家 Ether 數位錢包公司,為了安全起見,決定改變叫用帳號的流程。舊的 Ðapp 網站需要改寫,才能搭配使用,這裏來做個介紹。
Breaking Change: No Accounts Exposed by Default,這篇文章有做完整的說明,從 2018 年 11 月 6日起,Metamask plugin 錢包與 Status,Mist,以及 ImToken 計畫一起提供一個新而且更安全的方法 (EIP-1102),來讀取錢包帳號的資料,例如它的 balance,交易歷史,以及一些敏感資料,未來錢包的 “Privacy Mode” 將預設為開啟。也就是在使用舊有的 Ðapp 網頁, Metamask “Privacy Mode” 必須是關閉,才能跟以前一樣使用,直接可讀取 Metamask 裡的帳號資料,進行交易。
對程式設計師而言,簡單講就是要叫用一個新的 ethereum.enable() function,它會 return 一個 Promise。如果 user 同意讓 Ðapp 使用他的帳號, 就會回傳 provider 結果,否則回傳 Error。這個 ethereum 物件,是 Metamask 在啟動時,會加到瀏覽器的 window 裡的,所以程式範例如下(僅供參考, 它還可以寫得更好);
import Web3 from ‘web3’
let web3;
if (typeof web3 !== ‘undefined’ && window.ethereum) {
const ethereum = window.ethereum;
ethereum.enable().then((account) => {
const defaultAccount = account[0]
console.log(defaultAccount);}).error(console.log);
web3 = new Web3(web3.currentProvider);// orweb3 = new Web3(ethereum);
} else {console.log('maybe user does not install metamask');
// set the provider you want from Web3.providers
web3 = new Web3(new Web3.providers.HttpProvider(“http://localhost:8545"));
}
v4.14.0 版以後的 Metamask,provider 的 window.ethereum 就開始支援 enable() function,只是預設值是關閉的。
如上圖,新版 MetaMask v5.0.x 設定裡也已經可以看到 Privacy Mode 的開關。目前版本的預設是關著的。以後新版將會預設成開。有些舊 ÐApp 網站沒搭配著修改,就無法使用。但為了相容起見,user 關掉 Privacy Mode,還是能正常使用,但這樣對使用者來講就不安全了。
這個標準定義在 EIP-1102,想深入了解底層的開發者可以參考。
相關 Links:
EIP-1102: How to prepare your dapp
Tutorial — How To Connect A JavaScript Front-End To A Smart Contract On Ethereum
Solidity Weekly #20 was originally published in Taipei Ethereum Meetup on Medium, where people are continuing the conversation by highlighting and responding to this story.
👏 歡迎轉載分享鼓掌