分享5個JavaScript的寫法小技巧

2022-02-10 13:00:02

前言

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寫法小技巧內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！