分享5個JavaScript的寫法小技巧
前言
JavaScript 易上手,但是難以全面掌握;它有許多“怪癖”,隻有在長時間的使用它,才能逐漸揭開它神秘的面紗~
本篇帶來 JavaScript 幾個片段代碼,裡面有些小技巧,肯定有你不知道~ 沖!
過濾空值
filter() 方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。
註意: filter() 不會對空數組進行檢測。
註意: filter() 不會改變原始數組。
使用 filter() 過濾 “空” 值,如 null、undefined 或空字符串,可以使用 .filter(Boolean)
的縮寫方法;
它將所有空值轉為 false 並從列表中刪除它們,優雅!
const groceries = ['apple', null, 'milk', undefined, 'bread', '']; const cleanList = groceries.filter(Boolean); console.log(cleanList); // 'apple', 'milk', 'bread';
數組對象解構
我們經常使用 ES6 的解構,對於一個數組,每項都是一個對象,如果想獲得數組第一項的對象的某個值,可以這樣寫;
const people = [ { name: "Lisa", age: 20, }, { name: "Pete", age: 22, }, { name: "Caroline", age: 60, } ]; const [{age}] = people; console.log(age); // 20
也可以采用逗號占位的方式指定一個項進行賦值;
const people = [ { name: "Lisa", age: 20, }, { name: "Pete", age: 22, }, { name: "Caroline", age: 60, } ]; const [, , caroline] = people; console.log(caroline); // { // name: "Caroline", // age: 60, // }
當然,也有常見的對象解構賦值;
const caroline = { firstNm: 'Caroline', ag: 27, }; const {firstNm: firstName, ag: age } = caroline; console.log(firstName, age); // Caroline, 27
分隔數字
對大數字使用分隔符號,將極大的提高可讀性;這是 ES12 的新特性;
const bigNumber = 1_000_000; console.log(bigNumber); // 1000000
箭頭函數直接返回對象
使用箭頭函數返回一個對象,為瞭和函數的 { 區分開來,在外層包一層 ( 即可解決;
const createPerson = (age, name, nationality) => ({ age, name, nationality, }); const caroline = createPerson(27, 'Caroline', 'US'); console.log(caroline); // { // age: 27, // name: 'Caroline' // nationality: 'US', // }
await 鏈條
我們可以用 filter 和 map 方法接在 await 方法後形成鏈條過濾或映射處理獲取的數據;
const chainDirectly = (await fetch('https://www.people.com')) .filter(person => age > 20) .filter(person => nationality === 'NL')
總結
到此這篇關於JavaScript寫法小技巧的文章就介紹到這瞭,更多相關JavaScript寫法小技巧內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Javascript的原型和原型鏈你瞭解嗎
- 淺談JS中小數相加不精確的原因
- typeScript入門基礎介紹
- 一篇文中告訴你JS中的"值傳遞"和"引用傳遞"
- 深入瞭解JavaScript中的垃圾回收機制