分享5個JavaScript的寫法小技巧
前言
JavaScript 易上手，但是難以全面掌握；它有許多“怪癖”，只有在長時間的使用它，才能逐漸揭開它神秘的面紗~
本篇帶來 JavaScript 幾個片段代碼，里面有些小技巧，肯定有你不知道~ 沖！
過濾空值
filter() 方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。
注意： filter() 不會對空數(shù)組進(jìn)行檢測。
注意： filter() 不會改變原始數(shù)組。
使用 filter() 過濾 “空” 值，如 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ù)組對象解構(gòu)
我們經(jīng)常使用 ES6 的解構(gòu)，對于一個數(shù)組，每項(xiàng)都是一個對象，如果想獲得數(shù)組第一項(xiàng)的對象的某個值，可以這樣寫；
const people = [
{
name: "Lisa",
age: 20,
},
{
name: "Pete",
age: 22,
},
{
name: "Caroline",
age: 60,
}
];
const [{age}] = people;
console.log(age);
// 20也可以采用逗號占位的方式指定一個項(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)然，也有常見的對象解構(gòu)賦值；
const caroline = {
firstNm: 'Caroline',
ag: 27,
};
const {firstNm: firstName, ag: age } = caroline;
console.log(firstName, age);
// Caroline, 27分隔數(shù)字
對大數(shù)字使用分隔符號，將極大的提高可讀性；這是 ES12 的新特性；
const bigNumber = 1_000_000; console.log(bigNumber); // 1000000
箭頭函數(shù)直接返回對象
使用箭頭函數(shù)返回一個對象，為了和函數(shù)的 { 區(qū)分開來，在外層包一層 ( 即可解決；
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 方法后形成鏈條過濾或映射處理獲取的數(shù)據(jù)；
const chainDirectly = (await fetch('https://www.people.com'))
.filter(person => age > 20)
.filter(person => nationality === 'NL')總結(jié)
到此這篇關(guān)于JavaScript寫法小技巧的文章就介紹到這了,更多相關(guān)JavaScript寫法小技巧內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)密碼強(qiáng)度檢測【附示例】
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)密碼強(qiáng)度檢測【附示例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
下面小編就為大家?guī)硪黄獪\談js中test()函數(shù)在正則中的使用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時器功能，可以開始、暫停、清除，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
Javascript中將變量轉(zhuǎn)換為字符串的三種方法
這篇文章主要給大家介紹了關(guān)于Javascript中將變量轉(zhuǎn)換為字符串的三種方法，這三種方法分別是：value.toString()、"" + value和String(value)，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了js如何清空input?file的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
第一次接觸神奇的Bootstrap，Bootstrap提供了用戶友好、擴(kuò)瀏覽器的解決方案,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
easyui tree帶checkbox實(shí)現(xiàn)單選的簡單實(shí)例
下面小編就為大家?guī)硪黄猠asyui tree帶checkbox實(shí)現(xiàn)單選的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了JS原生瀑布流效果實(shí)現(xiàn) ，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流布局，無限加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說話，對語音感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04