JavaScript的寫法技巧有哪些

本文小編為大家詳細(xì)介紹“JavaScript的寫法技巧有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript的寫法技巧有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

過(guò)濾空值

filter() 方法創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過(guò)檢查指定數(shù)組中符合條件的所有元素。

注意： filter() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： filter() 不會(huì)改變?cè)紨?shù)組。

使用 filter() 過(guò)濾 “空” 值，如 null、undefined 或空字符串，可以使用 .filter(Boolean) 的縮寫方法；

它將所有空值轉(zhuǎn)為 false 并從列表中刪除它們，優(yōu)雅！

const groceries = ['apple', null, 'milk', undefined, 'bread', ''];
const cleanList = groceries.filter(Boolean);
console.log(cleanList);
// 'apple', 'milk', 'bread';

數(shù)組對(duì)象解構(gòu)

我們經(jīng)常使用 ES6 的解構(gòu)，對(duì)于一個(gè)數(shù)組，每項(xiàng)都是一個(gè)對(duì)象，如果想獲得數(shù)組第一項(xiàng)的對(duì)象的某個(gè)值，可以這樣寫；

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [{age}] = people;
console.log(age);
// 20

也可以采用逗號(hào)占位的方式指定一個(gè)項(xiàng)進(jìn)行賦值；

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [, , caroline] = people;
console.log(caroline);
//  {
//     name: "Caroline",
//     age: 60,
//   }

當(dāng)然，也有常見(jiàn)的對(duì)象解構(gòu)賦值；

const caroline = {
  firstNm: 'Caroline',
  ag: 27,
};

const {firstNm: firstName, ag: age } = caroline;
console.log(firstName, age);
// Caroline, 27

分隔數(shù)字

對(duì)大數(shù)字使用分隔符號(hào)，將極大的提高可讀性；這是 ES12 的新特性；

const bigNumber = 1_000_000;
console.log(bigNumber);
// 1000000

箭頭函數(shù)直接返回對(duì)象

使用箭頭函數(shù)返回一個(gè)對(duì)象，為了和函數(shù)的 { 區(qū)分開(kāi)來(lái)，在外層包一層 ( 即可解決；

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 方法后形成鏈條過(guò)濾或映射處理獲取的數(shù)據(jù)；

const chainDirectly = (await fetch('https://www.people.com'))
  .filter(person => age > 20)
  .filter(person => nationality === 'NL')

讀到這里，這篇“JavaScript的寫法技巧有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。