CodeLove 愛寫扣論壇 - 新手友善的程式設計討論區，歡迎參與討論！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐教材
⭐ 自學網頁の嬰兒教材：JavaScript（十）—— 玩玩看 Node，做做看老派 CLI 應用程式
⭐ Git 入門上手教材 —— 基本觀念與指令玩玩看
⭐ 自學網頁の嬰兒教材：JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件
⭐ 自學網頁の嬰兒教材：JavaScript（八）—— 不想教你 Vue，只想讓你寫有趣專案
⭐ 自學網頁の嬰兒教材：JavaScript（七）—— 不想教你 Vue，只想教你怎麼學框架

🏠 首頁

🏠 首頁

JavaScript 中關於陣列的 13 個入門小技巧

陣列是 JavaScript 中最常用到的概念之一。處理資料時很常用到這種資料結構。這篇文章介紹一些陣列操作的基本方法，希望對你有幫助！ - 原文出處：https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo # 1. 從陣列中移除重複項目 很經典的面試問題，需要從陣列中找出獨立值。使用 Set 資料型態，可以輕易完成這任務。這邊介紹兩種方法，一個使用 .from() 一個使用 ... 展開運算子。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; // First method var uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”] // Second method var uniqueFruits2 = […new Set(fruits)]; console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”] ``` 很簡單吧！ # 2. 從陣列中抽換掉某個元素 這個情境也很常見。有一個簡單的好方法，就是使用 .splice ，參數分別是開始修改的位置、修改幾個元素、要更改成哪些值。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; fruits.splice(0, 2, “potato”, “tomato”); console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”] ``` # 3. 不用 .map() 的 map 功能 .map() 很常用、大家都會用，但有一個方法也很不錯，也很簡潔，就是 .from() ``` var friends = [ { name: ‘John’, age: 22 }, { name: ‘Peter’, age: 23 }, { name: ‘Mark’, age: 24 }, { name: ‘Maria’, age: 22 }, { name: ‘Monica’, age: 21 }, { name: ‘Martha’, age: 19 }, ] var friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”] ``` # 4. 清空陣列 有時候你會需要清空一個陣列。一個一個把元素刪掉太慢了，下面這個方法快多了：直接把長度設為 0 吧！ ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; fruits.length = 0; console.log(fruits); // returns [] ``` # 5. 把陣列轉換為物件 有時需要把陣列轉成物件。使用 ... 展開運算子可以很快完成這任務。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”]; var fruitsObj = { …fruits }; console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”} ``` # 6. 陣列塞滿資料 有時需要把一個陣列塞滿某些資料。使用 .fill() 可以快速完成這任務： ``` var newArray = new Array(10).fill(“1”); console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”] ``` # 7. 合併陣列 老方法是使用 .concat() 來合併。但有個新方法，就是用 ... 展開運算子，非常簡單俐落： ``` var fruits = [“apple”, “banana”, “orange”]; var meat = [“poultry”, “beef”, “fish”]; var vegetables = [“potato”, “tomato”, “cucumber”]; var food = […fruits, …meat, …vegetables]; console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”] ``` # 8. 找出陣列交集 這也是 JavaScript 面試最常見的問題。這邊使用 filter 跟 .includes 來完成這任務。 ``` var numOne = [0, 2, 4, 6, 8, 8]; var numTwo = [1, 2, 3, 4, 5, 6]; var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues); // returns [2, 4, 6] ``` # 9. 把 false 相關的值從陣列移除 false 相關值包含 false, 0, "", null, NaN, undefined。使用 .filter() 可以俐落地過濾陣列。 ``` var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false]; var trueArr = mixedArr.filter(Boolean); console.log(trueArr); // returns [“blue”, 9, true, “white”] ``` # 10. 從陣列撈出隨機元素 有時需要隨機撈元素出來。根據陣列長度，隨機撈一個索引出來，就可以囉。 ``` var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var randomColor = colors[(Math.floor(Math.random() * (colors.length)))] ``` # 11. 逆轉陣列 不需要複雜的迴圈跟函數，也能逆轉一個陣列。這樣一行就可以： ``` var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var reversedColors = colors.reverse(); console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”] ``` # 12. .lastIndexOf() 方法 這個有趣的方法，可以找到特定元素最後一次出現的索引。如果陣列中有重複值，就可用上這方法。 ``` var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; var lastIndex = nums.lastIndexOf(5); console.log(lastIndex); // returns 9 ``` # 13. 陣列中全部數值加總 這也是面試常見考題。使用 .reduce 可以快速解決這問題。 ``` var nums = [1, 5, 2, 6]; var sum = nums.reduce((x, y) => x + y); console.log(sum); // returns 14 ``` # 結論 這 13 個小技巧，分別有一些進階觀念可以研究，這篇文章作為入門介紹，希望對您的工作有幫助！

0個讚   0留言 1,222瀏覽

10 個可以學習 JavaScript 的互動式網頁遊戲

利用玩遊戲來學習程式語言，不但好玩，還可以視覺化學習。 來看看這十個遊戲吧！ - 原文出處：https://dev.to/dailydevtips1/10-games-to-learn-javascript-155j ## 1.CodinGame ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669180583597/1D_NywE8W.png) CodinGame 是一個多語言平台，可以邊玩遊戲邊學多種程式語言，包括 JavaScript。 最酷的是有多人模式，可以跟朋友或同事一起玩。 https://www.codingame.com/ide/puzzle/onboarding ## 2.CodeCombat ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669180891032/OPOCUVmSM.png) CodeCombat 是一款 RPG 遊戲，可以學習網路基礎知識、程式語言，等等電腦觀念。 基本關卡免費，付費可以解鎖更多學習關卡。 https://codecombat.com/play/level/dungeons-of-kithgard ## 3.Untrusted ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181105367/mEnfeBOA0.png) 這遊戲把命令列視窗變成密室逃脫。 需要輸入 JavaScript 程式碼才能通關。很容易讓手，也有很多提示。 https://alexnisnevich.github.io/untrusted/ ## 4.Codewars ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181416059/mshCexo8U.png) 通過填空來解決關卡。 可以跟別人討論、查看別人的解法。 很適合學習、發展新技能。 https://www.codewars.com/dashboard ## 5.JSRobot ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181700097/ANwMAnMU5.png) JSRobot 需要輸入 JavaScript 來控制機器人、清除關卡。 https://lab.reaal.me/jsrobot/#level=1&language=en ## 6.JSDares ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181942194/FgsC6Zo8M.png) JSDares 是一個開源遊戲平台，上面的關卡都是社群提供的。 都是小遊戲，可以每天早上玩一點。 很值得一試的遊戲平台！ https://jsdares.com/ ## 7.Screeps ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182404647/2kevLRBHA.png) Screeps 是一款沙盒遊戲，寫 JavaScript 來控制一個殖民地。 可以學習 JavaScript 的各種方面。 關卡很多，內容龐大的遊戲。 https://screeps.com/a/#!/sim/tutorial/1 ## 8.Crunchzilla ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182635041/KvPpkah2d.png) Crunchzilla 有大量的圖形說明、多種難度關卡，可以逐步學習。 利用大量視覺說明，來解釋程式語言觀念。 https://www.crunchzilla.com/code-maven ## 9.Elevator Saga ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182844012/hF13igJGy.png) 這是個電梯遊戲，需要寫 JavaScript 來運送乘客。 有很多關卡跟說明文件。 可以不斷改進解法，來讓電梯更有效率 https://play.elevatorsaga.com/ ## 10.CheckIO ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669183173116/Yi7hnNf-0.png) CheckIO 會顯示各種解決方法，可以看到不止一種寫程式的方法。 有助於了解各種解法以及優化方案。 https://js.checkio.org/ --- 感謝閱讀，希望對您有幫助！

0個讚   0留言 537瀏覽

開發 React 時，推薦使用這些 Best Practices

在開發 React App 時，遵循一些 best practices 會使您的程式碼品質提高，這篇文章列出一些給您參考。 - 原文出處：https://dev.to/iambilalriaz/react-best-practices-ege # 強烈推薦 VS Code 作為 IDE Visual Studio Code 有幾個超好用的 React 功能。強大的外掛生態系，對開發者大有幫助： - Prettier - ES Lint - JavaScript (ES6) code snippets - Reactjs code snippets - Auto import # 使用 ES6 語法 程式碼越漂亮越好。在 JavaScript 中，採用 ES6 語法可以讓程式碼更簡潔。 ## Arrow Functions ``` // ES5 function getSum(a, b) { return a + b; } // ES6 const getSum = (a, b) => a + b; ``` ## Template Literal ``` // ES5 var name = "Bilal"; console.log("My name is " + name); // ES6 const name = "Bilal"; console.log(`My name is ${name}`); ``` ## const $ let const $ let 有各自的變數作用域。const 宣告的變數不能修改，let 宣告的變數可以修改。 ``` // ES5 var fruits = ["apple", "banana"]; // ES6 let fruits = ["apple", "banana"]; fruits.push("mango"); const workingHours = 8; ``` ## Object Destructuring ``` var person = { name: "John", age: 40, }; // ES5 var name = person.name; var age = person.age; // ES6 const { name, age } = person; ``` ## Defining Objects ``` var name = "John"; var age = 40; var designations = "Full Stack Developer"; var workingHours = 8; // ES5 var person = { name: name, age: age, designation: designation, workingHours: workingHours, }; // ES6 const person = { name, age, designation, workingHours }; ``` ES6 的語法特性、彈性，很多值得您一試。 # JSX 使用 map 時記得加上 key array map 時，永遠記得替每個元素加上獨立的 key 值。 ``` const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}]; // in return function of component <ul> {students.map(({id, name}) => ( <li key={id}>{name}</li> ))} </ul>; ``` # 元件名稱使用 PascalCase ``` const helloText = () => <div>Hello</div>; // wrong const HelloText = () => <div>Hello</div>; // correct ``` # 變數和函數名稱使用 camelCase ``` const working_hours = 10; // bad approach const workingHours = 10; // good approach const get_sum = (a, b) => a + b; // bad approach const getSum = (a, b) => a + b; // good approach ``` # ID 和 css class 名稱使用 kebab-case ``` <!--bad approach--> <div className="hello_word" id="hello_world">Hello World</div> <!--good approach --> <div className="hello-word" id="hello-world">Hello World</div> ``` # 永遠要檢查物件＆陣列的 null & undefined 忘記檢查的話，常常會導致一堆錯誤。 所以要保持檢查的習慣。 ``` const person = { name: "Haris", city: "Lahore", }; console.log("Age", person.age); // error console.log("Age", person.age ? person.age : 20); // correct console.log("Age", person.age ?? 20); //correct const oddNumbers = undefined; console.log(oddNumbers.length); // error console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct console.log(oddNumbers.length ?? "Array is undefined"); // correct ``` # 避免 Inline Styling Inline styling 會讓 jsx 程式碼變得很亂。用單獨的 css 文件拆分出來比較好。 ``` const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach const text = <div className="learning-text">Happy Learing!</div>; // good approach ``` 在 .css 文件中： ``` .learning-text { font-weight: bold; } ``` # 避免 DOM 操作 用 React state 為主，別用 DOM 操作 糟糕做法： ``` <div id="error-msg">Please enter a valid value</div> ``` ``` document.getElementById("error-msg").visibility = visible; ``` 推薦做法： ``` const [isValid, setIsValid] = useState(false); <div hidden={isValid}>Please enter a valid value</div>; ``` 使用 isValid 來管理 UI 顯示邏輯。 # 在 useEffect 記得清乾淨每個事件監聽器 加過的事件監聽器，都要記得清乾淨： ``` const printHello = () => console.log("HELLO"); useEffect(() => { document.addEventListener("click", printHello); return () => document.removeEventListener("click", printHello); }); ``` # 避免重複開發，多寫通用元件 讓程式碼越乾淨越好。相似的東西可以寫通用元件。再根據 props 內容傳遞來處理相異處即可： ``` const Input=(props)=>{ const [inputValue, setInputValue]=useState(''); return( <label>{props.thing}</label> <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} /> ) } ``` 在其他元件中，就能這樣用： ``` <div> <Input thing="First Name" /> <Input thing="Second Name" /> </div> ``` # 檔案要分類一下 相關檔案可以分類成一個資料夾。 例如在 React 寫一個導覽列，那就可以開一個資料夾，相關的 .js 與 .css 檔案放裡面。 # 寫 functional components 為主 簡單顯示一些東西、沒用到 state 的話，那寫 functional components 比寫 class components 好。 如果你會寫 react hooks 的話，那就連 state 都完全不成問題。 # 養成編寫輔助函數的習慣 有時你在 React App 中會需要一些通用功能。 這種情況，可以開一個 `helper-functions.js` 檔案，在裡面寫輔助函數，就可以到處使用了。 ## 使用三元運算子代替 if/else if 使用 `if/else if` 語句會使程式碼變得龐大。使用三元運算子，就簡潔、清楚多了： ``` // Bad approach if (name === "Ali") { return 1; } else if (name === "Bilal") { return 2; } else { return 3; } // Good approach name === "Ali" ? 1 : name === "Bilal" ? 2 : 3; ``` # 新增 index.js 檔案，讓匯入元件更簡單 如果你在 actions 資料夾中有一個 index.js 檔案，當你想在元件中導入時，會像這樣： ``` import { actionName } from "src/redux/actions"; ``` actions 後面的 index.js 可以省略不寫，就不用這樣囉唆了： ``` import { actionName } from "src/redux/actions/index"; ``` # Destructuring of Props 物件屬性名稱可以拆出來，後面用起來比較方便。 假設你的元件有 `name`、`age` 和 `designation` 這些 props： ``` // Bad approach const Details = (props) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.designation}</p> </div> ); }; // Good approach const Details = ({ name, age, designation }) => { return ( <div> <p>{name}</p> <p>{age}</p> <p>{designation}</p> </div> ); }; ``` # 不要嘗試在同一函數中，去碰修改過的 state 變數 在一個函數中，如果你正在為一個狀態變數賦值，在同一個函數中，是拿不到新值的 ``` const Message = () => { const [message, setMessage] = useState("Hello World"); const changeMessage = (messageText) => { setMessage("Happy Learning"); console.log(message); // It will print Hello World on console }; return <div>{message}</div>; }; ``` # 使用 === 運算子代替 == 在比較兩個值時，嚴格檢查變數型別比較好： ``` "2" == 2 ? true : false; // true "2" === 2 ? true : false; // false ``` --- 以上 Best Practices 供您參考，祝福您不斷變強！

0個讚   0留言 1,527瀏覽

10 個現代 JavaScript 中的好用語法：新手推薦

在 ES6 版本之後，Javascript 多了很多好用的語法，建議新手一定要學起來這幾招。 - 原文出處：https://dev.to/azure/modern-javascript-10-things-you-should-be-using-starting-today-1adm # -1- 展開運算子 Spred operator 在物件或陣列前面寫 ... 可以很輕鬆地把資料展開，舉例來說： ## Spread array ``` let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four', ...firstHalf]; ``` 寫起來非常簡潔。不然原本要這樣寫： ## NO Array spread ``` let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four']; for(var i=0, i <firstHalf.length; i++ ) { secondHalf.push(firstHalf[i]); } ``` 用在物件也可以，能夠合併屬性： ## Spread object ``` const hero = { name: 'Xena - Warrior Princess', realName: 'Lucy Lawless' } const heroWithSword = { ...hero, weapon: 'sword' } ``` 不然的話，就要用迴圈來跑全部屬性： ## NO Object spread ``` let keys = Object.keys(hero); let obj = {}; for(var i=0; i< keys.length; i++) { obj[keys[i]] = keys[props[i]]; } ``` 舊寫法其實有 Object.assign() 可以用，看起來會像： ``` const heroWithSword = Object.assign({}, hero, {weapon:"sword"}) ``` 但展開運算子還是簡潔多了： ``` const heroWithSword = { ...hero, weapon: 'sword' } ``` # -2- 其餘參數 Rest parameter 其餘參數能夠將剩下的參數蒐集到一個陣列中。JavaScript 有足夠彈性可以處理這些參數。通常會這樣寫： ``` function add(first, second, ...remaining) { return first + second; } ``` 以上只是加總前兩個參數，也就是 add(1,2) 或 add(1,2,3, 4) 結果一樣。接著這樣改寫： ``` function add(first, second, ...remaining) { return first + second + remaining.reduce((acc, curr) => acc + curr, 0); } ``` 這樣就會把全部參數都加總在一起了。 如您所見，前面加上 ... 就可以搜集其餘參數。這是一種命名變數的方式而已，比較少人知道這招，但可以知道一下。 # -3- 字串插值 String interpolation 看過這種寫法嗎？ ``` class Product { constructor(name, description, price) { this.name = name; this.description = description; this.price = price; } getDescription() { return " Full description \n" + " name: " + this.name + " description: " + this.description } } ``` 看看那個 getDescription() 方法，又長、跨行、又難讀。在大多數程式語言都只能這樣寫。幸好，有些程式語言支援字串插值，包括 JavaScript，所以可以改寫如下： ``` getDescription() { return `Full description \n: name: ${this.name} description ${this.description} `; } ``` 反引號 ` 可以定義多行字串。再使用 ${} 進行插值。是不是好多了呢：） # -4- 屬性縮寫 Shorthand properties 雖然還沒搞懂，你可能早就在用了。在 ES5 需要這樣寫： ``` function createCoord(x, y) { return { x: x, y: y } } ``` 在 ES6 之後，如果 : 後面名稱一樣，可以直接省略，像這樣： ``` function createCoord(x, y) { return { x, y } } ``` 簡潔多了吧？ # -5- 方法屬性 Method properties 在物件裡面指向方法的寫法。以下是 ES5 寫法： ``` const math = { add: function(a,b) { return a + b; }, sub: function(a,b) { return a - b; }, multiply: function(a,b) { return a * b; } } ``` 在 ES6 之後可以少寫一大堆，像這樣： ``` const math = { add(a,b) { return a + b; }, sub(a,b) { return a - b; }, multiply(a,b) { return a * b; } } ``` # -6- 解構 Destructuring 解構用得好，有益身心健康。 ## Object destructuring 這段： ``` function handle(req, res) { const name = req.body.name; const description = req.body.description; const url = req.url; log('url endpoint', url); // lots of logic happening dbService.createPerson( name, description ) } ``` 有點難讀吧，但要從多層深度挖資料，就會寫成這樣。還能怎麼辦？其實有以下妙招喔： ``` function handle(req, res) { const { body: { name, description }, url }, = req; log('url endpoint', url); // lots of logic happening dbService.createPerson( name, description ) ``` 變成俐落的一行了。 ## Array destructuring 不只物件能用，陣列也可以用，像這段： ``` const array = [1,2,3,4,5,6]; const a = array[0]; const c = array[2]; ``` 可以更優雅地改寫成這樣： ``` const array = [1,2,3,4,5,6]; const [a, ,c, ...remaining] = array; // remaining = [4,5,6] ``` 上面的模式配對，就可以拆出我們需要的變數。如果要跳過某值，就寫 , , 即可。我另外多寫了一個 rest parameter 來取得其餘資料。 ## Parameter matching 函數的參數也能這樣寫。當函數有超過 2-3 個參數時，業界慣例常常是這樣寫： ``` function doSomething(config) { if(config.a) { ... } if(config.b) { ... } if(config.c) { ... } } ``` 更漂亮的寫法其實是： ``` function doSomething({ a, b, c }) { if(a) { ... } if(b) { ... } if(c) { ... } } ``` # -7- 陣列方法 ES6 有大量好用的陣列方法，例如： - find()，回傳符合條件的項目，否則回傳 null - findIndex()，尋找項目的索引 - some(), 確認是否包含符合條件的項目 - includes(), 確認是否包含某個項目 舉例說明如下： ``` const array = [{ id: 1, checked: true }, { id: 2 }]; arr.find(item => item.id === 2) // { id: 2 } arr.findIndex(item => item.id === 2) // 1 arr.some(item => item.checked) // true const numberArray = [1,2,3,4]; numberArray.includes(2) // true ``` # -8- Promises + Async/Await 在只有 callback 能寫的年代，這種寫法很常見： ``` function doSomething(cb) { setTimeout(() => { cb('done') }, 3000) } doSomething((arg) => { console.log('done here', arg); }) ``` 用來寫非同步任務時，就會這樣寫。但現在我們有 promise 能寫了，所以可以這樣： ``` function doSomething() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('done') }, 3000) }) } doSomething().then(arg => { console.log('done here', arg); }) ``` 多個流程還能整個串起來，就像這樣： ``` getUser() .then(getOrderByUser) .then(getOrderItemsByOrder) .then(orderItems => { // do something with order items }) ``` ## Async/await 接著還有 async/await 可以用。上方的範例，相關 promise 變成： ``` async function getItems() { try { const user = await getUser(); const order = await getOrderByUser(user); const items = await getOrderItemsByOrder(order); return items; } catch(err) { // handle error here, the suggestion to return something or rethrow } } getItems().then(items => { // do something with order items }) ``` 看起來像是同步，但其實非同步的一段程式碼：） # -9- 模塊 Modules 幾乎所有程式語言都支援模塊功能。將程式碼分為多個檔案，各自為獨立單元，就是模塊了。像這樣： ``` // math.js export function add(a,b) { return a + b; } export function sub(a,b) { return a - b; } export default (a,b) => a * b; // main.js import mult, { add, sub } from './math'; mult(2, 4) // 8 add(1,1) // 2 sub(1,2) // -1 ``` 使用 export 關鍵字來表示 add 跟 sub 是公開可用的。export default 代表不指定函數時直接導入的內容。在 main.js 中，將預設導入命名為 mult，然後指定導入函數 add 和 sub。 # -10- 箭頭函數 + this 整篇文章一直在用箭頭函數，其實只是另一種函數的寫法而已。以前要這樣寫： ``` function printArray(arr) { // do something } ``` 現在可以這樣寫： ``` const printArray = (arr) => { // do something } ``` ## 單行函數 函數還可以用一行寫完： ``` const add = (a,b) => a + b ``` 這種寫法可以省略 return 直接回傳結果。要回傳物件也可以，這樣即可： ``` const create = (a,b) = > ({ x: a, y: b }) ``` ## Lexical this 以前常常會搞混 this 代表什麼，舉例來說： ``` let array = [1,2,3]; function sum() { this.total = 0; arr.forEach(function(item) { this.total+= item; // `this` is the inner functions `this`, BAD }) return total; } ``` 這個例子中，this 在 forEach 指錯地方了。以前的解法是： ``` function sum() { this.total = 0; var self = this; arr.forEach(function(item) { self.total+= item; // now we are using `self`, it solves it but feels hacky }) return total; } ``` 雖然多寫個 self 變數可以解決，但實在很鳥。新的箭頭函數寫法則解決了這問題： ``` function sum() { this.total = 0; arr.forEach((item) => { this.total+= item; // all is well `this` points to outer function }) return total; } ``` # 結論 ES6 之後有很多好東西可以用，今天先介紹一些，希望對大家有幫助！

1個讚   0留言 4,749瀏覽

一行 JavaScript 就能完成的 7 個小任務

一行程式碼有時可以做到很多事。這邊有七個小任務都用一行就可以完成，給您參考！ - 原文出處：https://dev.to/ruppysuppy/7-killer-one-liners-in-javascript-one # 洗亂陣列 在需要將陣列隨機打亂的時候，這行會很好用。 ``` const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5); // Testing const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(shuffleArray(arr)); ``` # 複製到剪貼板 在寫網站功能的時候，有時會需要這個功能。 ``` const copyToClipboard = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text); // Testing copyToClipboard("Hello World!"); ``` # 不重複元素 每種語言都有實作自己的 Hash List ，在 JavaScript 中，叫做 Set。可以使用 Set Data Structure 輕鬆地找出不重複元素。 ``` const getUnique = (arr) => [...new Set(arr)]; // Testing const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5]; console.log(getUnique(arr)); ``` # 檢測深色模式 深色模式日益流行，如果用戶在他們的設備中啟用了深色模式，最好將您的應用程序也切換到深色模式。 ``` const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; // Testing console.log(isDarkMode()); ``` # 滑到頂部 新手常常發現滑動元素很難做。最簡單的方法是使用 scrollIntoView。加上 behavior 可以讓動畫更流暢。 ``` const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" }); ``` # 滑到底部 一樣使用 scrollIntoView 就可以，只需要將 block 值改成 end ``` const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" }); ``` # 產生隨機顏色 如果您需要隨機色碼，可以參考這段： ``` const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`; ``` --- 謝謝閱讀，希望對您有幫助！

1個讚   0留言 2,415瀏覽

軟體工程師：面試的時候，你應該問公司的 36 個重要問題

面試的時候，通常面試官會問：你有什麼問題想問我們嗎？ 就跟公司面試你一樣，其實你也在面試公司。應該把握機會問對問題。 這邊有幾個重要問題，給你參考，下次面試可以問問看。 - 原文出處：https://dev.to/semaphore/36-questions-to-ask-your-future-software-employer-552g --- # 可以問人資的問題 面試通常會先跟人資聊聊，有些問題可以先問他們。建議可以問一下公司的運作方式以及面試流程。 ## 關於職位 **1. 公司為什麼要招人？** 這是個暖身問題。可以了解公司的大致狀態。缺人是因為在擴編？還是有人剛離職呢？ **2. 這個職位上一個人怎麼樣了？他們是辭職了，還是被開除？** 如果不是擴編，那可以先搞清楚這職位剛發生什麼事。弄清楚這段，可以更了解公司對這個職位的期望。 **3. 公司的離職率是多少？去年僱用了多少開發人員，又有多少人辭職了？團隊中待最久、跟最新進的人員分別是多久？** 這問題可以嗅出一些端倪。高流動率代表工作條件有點問題。可能得不到直接答覆，但別擔心，後面的流程有機會深入討論。 **4.到職流程如何運作？面試過程的下一步是什麼？** 獲取準備下一步所需的資訊。 ## 關於員工生活 **5. 公司是否投資於員工發展、培訓或認證？是否有用於學習活動或參加研討會的預算？** 公司當然喜歡積極進修的員工。所以員工至少要有一點時間能學習或參加活動。如果他們有提供進修預算，那非常加分。 **6. 公司允許遠端工作嗎？我應該在辦公室待多少天？遠端工作者的比例是多少？** 疫情讓遠端成為常態。有些公司 100% 遠端工作。有些公司則是混合辦公。你需要知道公司是哪種 。如果是完全遠端，你要問一下有沒有定期的團建活動，或是聚餐之類的。 **7. 有補助去共享空間工作嗎？** 有些人在家很難專心。這時可以考慮去租共享工作空間。 **8. 有育嬰假嗎？有無薪假嗎？病假和特休等等，怎麼安排？** 如果應徵公告沒有寫清楚，你可以這時先問清楚相關規則。 --- # 技術面試後要問的問題 這時你應該在跟技術人員交談。可能是未來的同事、技術主管、或技術長。 藉此機會暸解工作環境。有些問題可以防止踩雷。 ## 關於每日作息 **9. 通常我一周開幾次會議？** 會議一定會有，但有些公司實在開太多了。這問題可幫助評估，工作時會不會一直被打斷。 **10. 公司有 CI/CD 嗎？或者其他開發流程呢？** DevOps、Scrum、Lean 和 Agile 等術語已被濫用到沒什麼意義了。CI/CD 的意義清楚多了。公司有實踐嗎？如果沒有，代表團隊依賴手動部署、測試。 當然，也有CI/CD不可行的地方。但 99% 的情況下，利大於弊。 **11. 多久部署一次？如何部署？** 關於 CI/CD ，需要知道一天部署幾次。這代表部署流程多順暢。 除非是受到政府監管的產業，不然手動、久久部署一次，代表緩慢又低效率的開發文化。 **12. 你們使用 TDD 還是 BDD？如何寫測試？** 測試驅動開發和行為驅動開發對生產力很有幫助。無論是不是在測試團隊，都應該知道一下公司的測試習慣。如果公司完全不寫測試，那就要小心了。 **13. 你們如何追蹤錯誤/問題？寫功能和修理之間的比例是多少？** 這能幫助了解技術債。有技術債是正常的，但如果太多，你可能就一直在救火、整理超亂的程式碼。 **14. 你們偏好哪種：系統穩定或者快速上新功能？你們對技術債的態度是什麼？** 直接問技術債的態度，但也要知道滿足客戶需求的重視程度。 **15. 文件完整嗎？有程式碼風格指南嗎？有現成的測試規格嗎？** 了解一下文件的習慣。可以詢問 API 規範、技術文件、風格指南、用戶故事之類的。文件不夠通常代表你需要一直開會、一直詢問同事。 測試本身就是一種文件，所以有寫測試也很重要。 ## 工具和文件 **16. 使用什麼版本控制系統？** 如果沒有在用版本控制，建議直接換別間面試。除非你在面試技術長或者技術副總之類的。這情況，要詢問能否導入。如果能，你需要很痛苦的花幾個月導入，談薪水的時候要一併考慮進去。 **17. 使用什麼技術/語言/框架？** 不熟悉也沒關係。通常幾週內就都能上手。 **18. 我可以使用我 ${最愛的 IDE} 嗎？** 用自己最愛的，最棒。 **19.公司有提供設備嗎？我有設備的全部權限嗎？我可以用自己的設備嗎？** 如果在自己的電腦上沒有根權限，代表公司不信任員工。 ## 開發團隊文化 **20. 你為什麼選擇加入這家公司？** 如果跟面試官聊開了，請問一些個人問題。了解你將要為之工作或與之共事的人的價值觀，是很有價值的。 **21. 團隊有多大？新手與資深工程師的比例是多少？** 試著深入了解團隊組成與規模。如果你是應徵初階職位，同事大部分都是資深人士，那就是好事一件。 **22. 有多少女性員工？公司有確保員工多樣性的流程嗎？** 了解一下團隊都是同一種人、或者具有很高多樣性。這對工作氛圍也有影響。 **23. 你在這家公司犯過的最大錯誤是什麼？** 我喜歡這個問題，因為它與「生成式文化」的概念有關。生成式文化是一種風險共擔、鼓勵創新、人們不會因失敗而受到譴責（而是被用作學習機會）的文化。 當人們在心理上感到安全，他們會把握更多機會並進行更多嘗試，從而實現創新。 反例則是，病態或官僚文化。在這種情況下，人們傾向於「謹慎行事」——以免因失敗而受到懲罰。這絕對是很差的工作環境，對你的工作跟心情都很不好。 ## 工作與生活的平衡 **24. 人們平均每週工作多少小時？人們通常什麼時候下班？** 你需要每天早點回家、好好享受生活，才能持續打拼。長期過勞代表團隊生產力很差，只能透過加班彌補。 **25. 有 on-call 的時間表嗎？標準工時以及您對加班的期望？我將多久 on-call 一次？緊急情況或人們被迫加班的頻率有多高？** 這個問題是對上一個問題的補充。一個月通常要加班幾次？ 大量加班、習慣性的周末工作以及不頻繁、手動部署，是工作與生活不平衡的跡象。如果公司有這些危險信號，請繼續貨比三家。 **26. 我是否需要一直在 Slack/Teams 上面，還是可以分批處理我的工作？** 我常常在沒有鍵盤的時候解決問題。常常在散步或洗澡的時候有新想法。能夠離開電腦散步一下，生產力會更好。 --- # 向經理、首席執行長或創辦人提出的問題 痛苦的技術面試完成後，你可能會見到經理、首席執行長、甚至創辦人。可以把握機會了解公司在市場上的表現、也能讓公司知道你對公司很有興趣。 ## 關於公司 **27. 有公司運作 SOP 嗎？** 查看各種 SOP 可以知道公司的運作方式，讓新員工快速進入狀況。 **28. 公司是怎麼賺錢的？損益兩平了嗎？成長速度有多快？** 如果在面試新創公司，獲利需要好幾年的時間，而且機率不高。所以，你其實正在賭一個高風險、高報酬的事情。 您的專業成長通常會反應到公司的成長。如果你追求穩定並打算待好幾年，那麼選擇一家現金流穩定的老牌公司比較好。 **29. 公司或團隊現在面臨的最大挑戰和機會是什麼？** 開放式問題可以讓你深入了解公司的目標和管理層的心態。檢查您的職涯目標是否與公司的目標一致。 **30. 您認為未來 5/10 年後，公司會在哪？** 面試的時候，被問這個是最難回答的。所以你當然也要問公司，這樣才公平。 **31. 公司如何設定季度/年度目標？這一季/今年的目標是？** 如果沒有公司或團隊目標，那麼您要么是在與錯誤的人交談，要么是在與錯誤的公司交談。 對公司的目標表現出興趣，更重要的是，了解當季、當年的優先事項。是否使用 OKR 管理？如果沒有，那是用什麼規劃目標？如何評估成效？ ## 關於職位 **32. 你如何定義我這個職位的成功？你希望我在頭 3 個月內完成什麼？您將如何評估我在試用期的表現？您如何確定某人是否適合您的公司？** 你需要了解試用期如何評估。 **33. 績效考核如何進行？升遷流程如何運作？績效考核與加薪掛鉤嗎？** 您和您的主管可能對成功有不同定義。但績效評估使您、您的主管和公司保持一致。雖然很可怕，但能促進人員和公司的持續改進。這是主管提供回饋、認可成就並提供職業發展指導的好時間。 沒有績效評估，就沒有回饋，晉升或加薪的機會也很小。 **34. 我有多少自主權來決定要做什麼？工作的優先順序如何？是否有分配用於副專案/實驗的時間？** 弄清楚有多大自主空間，藉此了解團隊目前專注什麼。 如果有分配用於副專案/實驗的時間，那就太幸運囉。 ## 提升職業生涯 **35. 我的主管會定期進行一對一的交流嗎？** 一對一對於讓你和主管保持一致非常重要 **36. 我可以為 XXX 開源專案做貢獻嗎？可以去研討會演講嗎？是否需要任何批准？** 如果你有這些興趣，就要問問。這些都是職業發展的寶貴機會。 --- # 結論 公司會展現好的一面，吸引面試者。你需要看穿表面宣傳、弄清楚真實狀況。找到有興趣的問題，不斷提問，直到放心為止。 不要問你本來就該知道的事情。職位描述看清楚，公司網站跟之前的對話看清楚，問重複問題會很鳥。 祝你好運，感謝閱讀！

0個讚   0留言 337瀏覽

工程師大補丸：五個整理了大量學習資源的 github 專案

Github 是開發人員互相分享的寶庫。可以在上面找到任何與軟體工程有關的東西。就跟一般礦山一樣，要懂得採礦，才能得到有價值的礦物。 我一直在尋找 github 上面的寶庫，以下列出五個優質寶庫： - 原文出處：https://dev.to/wizdomtek/5-github-repositories-every-developer-should-know-1p93 # 1. Professional Programming 整理了大量經典書籍、優質網站的專案。 閱讀相關內容會有點花時間，但如果你想要持續提升自己，那這專案很適合你。 https://github.com/charlax/professional-programming # 2. Web Dev For Beginners 這是由 Microsoft 的 Azure Cloud Advocates 團隊，提供的 12週、24週線上課程。通通關於 JavaScript、CSS 和 HTML 基礎知識。每節課都包括課前和課後測驗、內容說明、解決方案、作業等。這種以寫專案為主的教學法，讓您一邊開發、一邊學習，是一種讓有效學習新技能的方法。 https://github.com/microsoft/Web-Dev-For-Beginners # 3. The art of command line 命令列是一門藝術，每個開發人員都有自己的使用習慣。最有用的指令是 man，可以用來查詢各種指令。 這個專案列出了各種常用指令與說明，值得一讀。 https://github.com/jlevy/the-art-of-command-line # 4. Project Based Learning 以專案開發為主的一系列學習資源。由一群熱心分享的工程師所整理。內含多種程式語言。 動手開發是學習程式設計的最好方法。不斷解決問題時，同時學習了知識。因為有了目標，大腦的記憶也更有效率。 https://github.com/practical-tutorials/project-based-learning # 5. Every Programmer Should Know 無論您有多熟練，您對技術的了解可能永遠都不夠。 聽起來很刺耳，但這句話是真的。技術世界太廣闊了，不可能了解一切。但這不是停止學習的理由。 瀏覽此專案，可以掌握很多新知識。 如果您想學習一些新鮮有趣的東西，可以將它當成學習工具。 https://github.com/mtdvio/every-programmer-should-know --- 以上，歡迎有空逛逛這些資源，祝您不斷變強。

1個讚   0留言 245瀏覽

7個超特別的工程師作品集網頁：讓您大開眼界

工程師要怎麼設計作品集網頁呢？來看看這些人的網頁，或許能給你一些靈感！ - 原文出處：https://dev.to/ruppysuppy/7-developer-portfolio-for-inspiration-4no7 # 1. Bruno Simon 如果您有試過開發 3D 網站，那你一定聽過 Bruno Simon。他是 Three.js Journey 的作者。從他的作品集就可看出為什麼他是這個領域的高手。 他的作品集網站，本身就是一個電玩遊戲。你可以在裡面控制吉普車，在 3D 世界裡面開車，然後可在裡面探索他的作品集世界。這網站可說是作品集網站的巔峰之作。 https://bruno-simon.com/ ![](https://imgur.com/kqpLGNH.png) # 2. Robby Leonardi 另一個超厲害的作品集網站！Robby Leonardi 的作品集是一個互動式的履歷表，往下滑就可以瀏覽他的作品、看到更多個人資訊。 http://www.rleonardi.com/interactive-resume/ ![](https://imgur.com/tZ6QJcX.png) # 3. Nitin Ranganath 一個有創意、又很新潮的網站！整個作品集頁面，看起來就像是 VS Code 編輯器！ https://vscode-portfolio.vercel.app/ ![](https://imgur.com/4ePEkBe.png) # 4. Dejan Markovic 與傳統網頁設計的風格大相徑庭，但實際操作起來，卻非常順暢、巧妙！ https://www.dejan.works/ ![](https://imgur.com/w0jf0i6.png) # 5. Hype4 極簡主義風格的網站，具有超級簡潔、專業的設計感。 https://hype4.com/ ![](https://imgur.com/FhT8j3c.png) # 6. Jacek Jeznach 利用微互動來提高留存率的絕佳範例。雖然網站上的廣告很煩人，但對於互動細節的設計，值得您親自見識一下！ https://jacekjeznach.com/ ![](https://imgur.com/NR7v2KV.png) # 7. Tapajyoti Bose 最後一個範例讓我老王賣瓜一下！😜 我做了一個帶有滾動特效的單頁式作品集網站！ https://tapajyoti-bose.vercel.app/ ![](https://imgur.com/GpmgsPC.png) --- 以上，希望大家覺得有趣、有啓發性！

0個讚   0留言 314瀏覽

軟體工程師必看：20個提高生產力的簡單方法！

每個人都想提高生產力，但該如何提高呢？此文章整理20種簡單、我親自試過、且有效的方法！希望對大家有幫助！ - 原文出處：https://dev.to/code_jedi/20-easy-ways-to-be-more-productive-as-a-developer-5f99 # 1. 時間箱子 將您的時間當成多個箱子安排，例如： ``` 9:30 --> 10:00 回電子郵件 10:00 --> 12:00 處理新登錄頁面的設計與功能 12:00 --> 13:00 午餐和休息 13:00 --> 15:00 編輯文件 15:00 --> 17:30 動手重新設計登陸頁 ``` # 2. 深度工作 深度工作是一種強調進入狀態來提高工作效率的方法。這方法希望你嘗試長時間（2 到 3 小時）不被打斷地工作，讓你進入一種心流狀態。然後，當你處於那種狀態時，就不太會被中斷、就不會在工作上又拖拖拉拉的。 # 3. 80/20 法則 80/20 法則也稱為柏拉圖法則，它鼓勵您專注在最高價值的工作。這法則認為您 80% 的產出往往來自您 20% 的努力。這方法的重點在於要認出哪些任務最重要、能夠提供最大的回報。重點在於將心力花在「正確的任務」上，而不要浪費時間在次要細節上。 # 4. 三的法則 對於那些常常寫下一堆待辦事項，卻沒完成幾件的人來說，這法則會很有幫助。您需要找出最重要、有意義的三件事情。要列出的不是任務本身，而是明確的結果。比方說「部署 AWS 應用程式」。每天都安排三件明確、有意義的事情，就可以不斷提醒自己，什麼是最重要的、最需要關心的。這個小技巧的效果非常巨大。 # 5. 做點小事情 我們都有那種感覺整天什麼都做不了的經驗。覺得沒有任何動機與精力、好像做什麼都沒力氣。發生這種情況時，最好的辦法就是做點小事情。在房子/公寓周圍做一些家事，寫一些程式碼（未必要與您的工作/專案相關），寫一篇部落格文章。光是做一些小事情，通常就足以將您拉回正軌！ # 6. 硬著頭皮開始 想想看你拖延了很久的事情。可能是一個困難的專案，或者是學一些很困難的東西。別再猶豫了，硬著頭皮開始吧。可能會犯一些錯或者看半天看不懂，但只要有了起步，之後一定會慢慢適應的！ # 7. 不要重複做工（Don’t Repeat Yourself 原則） 重複使用已經做過的東西（簡稱 DRY 原則），可以節省不少時間。重複做工是很低效且沒必要的。DRY 原則鼓勵您建立工作流程與模板，盡量減少重複做工。程式碼、電子郵件、部落格文章，都可以適用。 # 7. 不要重複做工 開玩笑的哈哈😄 # 8. 兩分鐘法則 如果待辦事項中有兩分鐘內可以完成的任務，就應該立刻去完成再說。這法則讓您可以克服拖延的習慣。如果有一封該回的郵件放著會讓你心煩意亂，但回起來只要兩分鐘的話，那就立刻先回覆。這會讓你覺得有進度，反過來又會激勵自己、增強動力。此外，它還可以幫助您理清思緒，讓您不必再為那些待辦小任務煩惱。 # 9. 單工 多工（一次忙很多事）會降低生產力。單工是鼓勵您一次專注一件事。如此一來，您將花費更少的時間和精力在任務之間來回切換。 # 10. 必須、應該、想要 在一天開工之前，根據以下標準整理一份清單： ``` 我必須 ... 我需要 ... 我想要 ... ``` 這將幫助您確定優先順序與當天的目標。 # 11. 艾森豪矩陣 名字聽起來很花俏，但這方法只是列出所有待辦任務，然後分成四種類別而已。 這四個類別是： ``` 緊急而重要的任務 重要但不緊急的任務 緊急但不重要的任務 不緊急也不重要的任務 ``` 這能幫助您根據類別來安排時間優先順序。 # 12. 生物黃金時間 在一天當中，觀察、發覺您的自然能量水平。 請花幾週時間，記錄您一整天的精力充沛程度。 對於一天中的每個小時，給它一個 1-10 之間的等級（10 是最高能量）。根據結果 - 相應地規劃您的一天作息。如果您在早上精力充沛 – 就在早上做您最需要做的事情。 如果您下午的精力不足 – 將比較不花心力的任務留到下午吧。像是寫電子郵件或寫部落格文章之類的。 # 13. 每週回顧 每週一次，找一個安靜的地方坐坐，在那裡思考和反省一下。如果您想動手紀錄，也可以使用筆記本和筆。 回顧過去一周的工作效率、精力水平、哪些事情對您有用，哪些事情沒有用。 例如： - 早上洗個冷水澡對我的工作效率有幫助。 - 早上吃得太少讓我在接下來的幾個小時裡感覺沒力氣。 除了思考這一周過得如何，您還需要查看您做出了哪些決定以及您想要更改哪些決定。可以想想改善的方法，或者想想哪些事情沒做到。 # 14. 番茄鐘 這可能是最知名的生產力方法了。番茄工作法就是： - 工作 20-30 分鐘 - 休息 5-10 分鐘 - 重複以上 這種方法剛好與深度工作法相反。所以如果深度工作方法對你有用，就不要理會這個，反之亦然。 # 15. 非待辦清單 許多提高效率的方法都會鼓勵您列出某種待辦事項清單。但是，不要做的事情，也可以寫成列表，而且也很有用！ 每天開工前，列一個不要做的清單。此列表包含您希望避免做的無用事情，例如使用社群網站、邊上班邊跟朋友聊天、收聽分散您注意力的播客。 如此一來，您就會清楚知道一天中要避免做的無用事情。 # 16. 今天就組織明天 睡覺前組織和計劃明天的任務。如此一來，您就可以在第二天毫不猶豫、也不用計劃就開始這些任務。 # 17. 檢查表清單 對於每件做過多次的事情、或者想完成的複雜任務，創建一個詳細的檢查表清單，列出你需要做什麼才能正確完成它。 例如： ``` 寫部落格文章 * 寫提綱 * 寫下大概的內容 * 審查和編輯 * 讀過一遍 * 最終檢查和編輯 * 發布 ``` # 18. 不要打斷連續工作日數 這方法希望您能在一段時間內，每天固定有一些進度。每天完成之後，就在日曆標記已完成。像是寫部落格文章、學習新東西、或閱讀30分鐘的書。 做出承諾的前幾天通常是最難的，但渴望改變的心將幫助您度過難關。 隨著連續日數變長，希望連續記錄不被打破，本身就會激勵你繼續前進。 # 19. SMART目標法 SMART 是一個目標設定公式，鼓勵你對於目標盡可能詳細和具體。SMART代表特定的(Specific)、可衡量的(Measurable)、可分配的(Assignable)、實際的(Realistic)、與時間相關的(Time-related)。這意味著當你設定一個目標時，它應該被清楚定義。 包括：你想要達到的目標是什麼、如何衡量成功、誰負責、有基礎、可行、需要在什麼時間範圍內實現。 # 20. 充電法 當你覺得自己累了，不能再工作時，不要逼迫自己，承認你需要休息，然後休息一下。當你精神疲憊時，休息一下通常比逼迫自己更好，原因有 3 個： 1. 你會少犯錯誤 2. 你會減輕壓力 3. 你的頭腦會更清晰 # 結論 希望這些方法，對您有幫助！

0個讚   0留言 1,351瀏覽

寫出優雅 JavaScript 程式碼的 8 個簡單技巧

Javascript 是一個很棒的程式語言，但是，要寫出乾淨的 javascript 程式碼可不簡單，即便是資深工程師也一樣。 乾淨的 JavaScript 程式碼該長怎樣？它應該要： - 易於閱讀 - 易於測試 - 高效和高性能 以下是您可以使用的優質工具和技巧，可將您的 Javascript 功力提升到全新水平： - 原文出處：https://dev.to/alexomeyer/8-must-know-tips-for-writing-clean-code-with-javascript-i4 # 1. 對所有 api 請求和 JSON 方法使用 try catch 發出 api 請求來撈資料時，許多事情都可能出錯，因此必須注意這些情況。在處理 JSON 時，不要自動信任拿到的資料格式，請試著處理可能出乎意料的格式，來讓您的程式碼更健壯。 ![](https://imgur.com/KVzrdd0.png) # 2. 使用 linter (ESLint) linter 是一種靜態程式碼分析工具，可根據一組預定義的規則和配置檢查程式和風格錯誤。簡而言之，它將改進您的 Javascript/Typescript 程式碼品質，並讓風格更加一致。 # 3. 在編輯器中​追蹤 Javascript issues 保持 Javascript 程式庫簡潔的一個重要方式，是能夠輕易追蹤和查看程式碼本身的問題。在編輯器中追蹤 issues 允許工程師： - 全面了解技術債等更大的問題 - 查看每問題的上下文 - 減少上下文前後查看的頻率 - 持續地處理技術債 您可以使用各種工具來追蹤您的技術債，但最快速、最簡單的入門方法是使用與 Jira、Linear、Asana 和其他專案管理工具整合的 VSCode 或 JetBrains 的免費 Stepsize 外掛。 # 4.使用模板字符串 模板字符串讓您在保留格式的同時將值注入字符串，並且程式碼比字串運算更容易閱讀。 ![](https://imgur.com/ccagbwx.png) # 5. 需要搜尋字串時，使用正規表示式 正規表示式雖然乍看之下很深奧，但它是非常強大的字串解析工具，允許您建立複雜的模式來解決各種困難的字串配對情境。 # 6. 使用可選串連運算子 停止使用冗長的邏輯運算子，使用可選串連運算子來簡化您的程式碼。 ![](https://imgur.com/4TtpBdm.png) # 7.避免巢狀結構 巢狀結構絕對會增加程式碼的複雜度，也讓它更難閱讀、更難理解。如果深度超過兩層，請考慮重構，改成在根層就有條件回傳、使用更短小的區塊、並將巢狀邏輯抽像化成獨立的函式。 # 8. 替所有特殊程式碼寫註解，但不要讓它取代程式碼可讀性 有時需要針對特殊情境寫專門處理。替這段程式碼寫註解，解釋它的功能與上下文的由來，這對其他工程師幫助會很大。也能幫助未來重讀這段的自己。但讓程式碼本身就很易讀還是最優先，不要習慣用寫註解來偷懶！

0個讚   0留言 1,725瀏覽

資深軟體工程師：10年經驗教會我的20件事情！

在軟體產業工作超過十年之後，我總結出了二十條原則，跟大家分享如下： - 原文出處：https://dev.to/ondrejsevcik/20-principles-i-learned-from-10-years-of-developing-software-5354 1. **謙虛**——世界上沒有無所不知的工程師，你也一樣。 2. **先讓它能跑，再讓它正確**——可能的話，再讓它更快。 3. **修改時再優化**——寧可出現重複，也不要出現錯誤的抽象化設計。 4. **始終寫測試**——如果您不寫測試，那麼您就是在手動測試。 5. **解決 80% 的使用情境就好**——你永遠無法解決所有人的問題。 6. **盡量用函數式編程**——比較容易理解。如果您的程式碼需要博士學位才能看懂，那你的方法有點問題。 7. **刪除越多程式碼越好** 8. **足夠好勝於完美**——不要僅僅因為它不完美，就放棄有意義的改進。 9. **私下批評，公開表揚** 10. **做筆記**——如果你認為你會記住它，那你就是在自欺欺人。 11. **與您的用戶溝通**——最好的軟體是由對用戶有同理心的工程師開發的。 12. **有意識地學習**——練習時要牢記一個明確而具體的目標 - 你想要改進什麼以及如何改進（刻意練習）。 13. **不要過早概括**——等到你有至少 3 段重複的程式碼，再進行抽象化（又名：三規則）。 14. **修復破損的窗戶**——代碼中的一段技術債會導致另一段技術債。您的程式碼很快將變得難以管理。 15. **解決問題**——不管是誰的錯，都是你要負責解決。 16. **做有用的事，而不是時髦的事**——先和一個小團隊一起嘗試。如果可行，請擴大實施。如果不行，則中止。 17. **良好的休息才有最佳成果**——定期休息對於獲得最佳表現至關重要。你也不會認為專業短跑運動員一直在短跑吧。 18. **採取小步驟**——大的重寫是行不通的。您將在過程中失去動力和注意力。試著每天發布更新。它使您可以在必要時，自由地調整重點。 19. **表揚出色的工作**——我們在動物身上觀察到的這件事，同時也適用於人類。當你表揚人們的好表現而不是懲罰他們的壞表現時，你會得到更好的結果。 20. **完美的代碼不存在**——最好接受這事實，而不是浪費時間、追逐不可能的事情。

0個讚   0留言 218瀏覽

給網站工程師的超好用 cheatsheet 備忘單：工作時方便快速查詢

身為網站工程師，很多時候需要查詢語法、關鍵字之類的東西！ 這邊整理了多份超方便的 cheatsheet 給您使用！ - 原文出處：https://dev.to/suprabhasupi/cheatsheet-for-web-developers-1opg # 1️⃣ HTML Cheatsheet 線上互動式 HTML 備忘單，包含範例程式碼以及各種 web 開發人員工具、生成器。 - https://htmlcheatsheet.com/ # 2️⃣ CSS Reference 有條理、好吸收的 Web 教學網站，包含大量 HTML、CSS、JavaScript、SQL、Python、PHP、Bootstrap、Java 等等的範例程式碼。 - https://cssreference.io/ # 3️⃣ Git Sheet 包含最重要和最常用的 Git 指令，參考起來很方便 - https://gitsheet.wtf/ # 4️⃣ OverAPI OverAPI.com 是一個收集所有備忘單的網站，有超多 cheatsheets 可以參考！ - https://overapi.com/ # 5️⃣ Dev Hints 整理很多優質的 ES6、SASS 等等備忘單，方便查詢 - https://devhints.io/ # 6️⃣ Cheatography Cheatography 整理 5047 個備忘單和 25 種程式語言，有超多內容可以逛逛看！ - https://cheatography.com/

0個讚   0留言 237瀏覽

給工程師的12個超好用API、可串接大量有趣資料～！

不管是寫程式的新手、老手，在做專案的時候，常常需要資料，來讓專案內容更豐富吧！ 這時候需要去找有趣、夠酷、免費的 API 來用！ 這篇文章一次整理出 12 個有豐富資料的有趣 API！有空要用用看喔！ - 原文出處：https://dev.to/monicafidalgo/12-apis-that-you-as-a-developer-will-love-it-4ec6 # ✨1. PokéAPI 來串寶可夢精靈 API 吧！可以撈到大量神奇寶貝資訊（動作、類型、能力）！ - https://pokeapi.co/ - 需要 API 密鑰：否 # ✨2. GIPHY GIPHY 是世界上最大的 GIF 資料庫，可以撈到一大堆梗圖，方便你開發有趣的 side project！ - https://developers.giphy.com/ - 需要 API 密鑰：是 # ✨3. Open Weather 串接這個API，馬上得知明天天氣！Open Weather API 收集和處理來自不同來源的天氣數據，例如全球和本地天氣模型、衛星、雷達、各種氣象站資訊！ - https://openweathermap.org/api - 需要 API 密鑰：否 # ✨4. {JSON} Placeholder 快速撈一些 json 假資料，方便開發時有資料可以快速測試！ - https://jsonplaceholder.typicode.com/ - 需要 API 密鑰：否 # ✨5. SWAPI 電影「星際大戰」API，擁有大量行星、宇宙飛船、車輛、電影和物種的數據～！ - https://swapi.dev/ - 需要 API 密鑰：否 # ✨6. NASA NASA 就是美國國家航空暨太空總署，提供大量來自 NASA 的真實數據，包括 NASA 好奇號、機遇號和精神號探測器在火星上收集的圖像數據！ - https://api.nasa.gov/ - 需要 API 密鑰：是 # ✨7. Unsplash 由大量攝影師上傳照片的優質圖片資料庫！開發網站首頁、串接漂亮照片的必備 API 網站！ - https://unsplash.com/developers - 需要 API 密鑰：是 # ✨8. Dev.to dev.to 是國外一個開發者討論區，在上面寫文章的話，可以透過 API 把文章撈出來！ - https://developers.forem.com/api - 需要 API 密鑰：否 # ✨9. Breaking Bad Netflix 神劇，《絕命毒師》的的 API。它可以讓你拿到劇中名言、人物、集數、各式死亡資訊！ - https://breakingbadapi.com/documentation - 需要 API 密鑰：否 # ✨10. Random Data 想發揮創意並在專案中使用各種奇怪資料嗎？也許是一款隨機獲得啤酒或電腦的遊戲？試試看隨機資料 API 吧～！ - https://random-data-api.com/documentation - 需要 API 密鑰：否 # ✨11. Rest Countries Rest Countries 讓您可以通過 RESTful API 拿到有關各個國家/地區的大量豐富資訊～！ - https://restcountries.com/#rest-countries - 需要 API 密鑰：否 # ✨12. Rick and Morty Rick and Morty 系列很受工程師歡迎！這個 API 可以讓你按劇集、角色、地點進行查詢～！ - https://rickandmortyapi.com/documentation - 需要 API 密鑰：否

0個讚   0留言 669瀏覽
熱門文章
🔥 MVC是一個巨大誤會
🔥 工作上遇到CSS權重的問題
🔥 個人頁面小更新：增加貼文瀏覽統計
🔥 增加開發者生產力：19 個簡單好用的 VScode 外掛
🔥 歡迎串 Part.4 👋👋👋
  近期留言
熱門搜尋： C JavaScript JavaScript 系列 系列 c onclick hooks typescript Java jav 嬰兒 搜尋 react console API . 自學網頁の嬰兒教材 ajax Vue 20 ci todo angular 系列五 api OOP local storage local this Hook jquery 測試 birdi vue javascript 英文 REACT jqu React git Git result 練習 fetch html hoisting 2023 birdie model 工程師的缺德行為 面試 HTML Ai 單元測試 textarea restcountries oop mail 謝謝 laravel BASIC Node 寫測試 JavaScript 自學網頁の嬰兒教材 java JavaScript' discord codesandbox Toptal useRef 導覽列 Django 轉職 side project for of AI 取代 globalthis 20個 signal signals for MVC glitch android C# PYTHON history lissy93 todolist clean computed callback svelte 履歷 偽類 Cpu 筆電 給新手 react strict
每日接收程式設計新知，軟體工程師們一起來學習！
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。