分享5個(gè)JavaScript的寫(xiě)法小技巧
前言
JavaScript 易上手，但是難以全面掌握；它有許多“怪癖”，只有在長(zhǎng)時(shí)間的使用它，才能逐漸揭開(kāi)它神秘的面紗~
本篇帶來(lái) JavaScript 幾個(gè)片段代碼，里面有些小技巧，肯定有你不知道~ 沖！
過(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) 的縮寫(xiě)方法；
它將所有空值轉(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è)值，可以這樣寫(xiě)；
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')總結(jié)
到此這篇關(guān)于JavaScript寫(xiě)法小技巧的文章就介紹到這了,更多相關(guān)JavaScript寫(xiě)法小技巧內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實(shí)現(xiàn)密碼強(qiáng)度檢測(cè)【附示例】
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)密碼強(qiáng)度檢測(cè)【附示例】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-03-03
下面小編就為大家?guī)?lái)一篇淺談js中test()函數(shù)在正則中的使用。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能，可以開(kāi)始、暫停、清除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Javascript中將變量轉(zhuǎn)換為字符串的三種方法
這篇文章主要給大家介紹了關(guān)于Javascript中將變量轉(zhuǎn)換為字符串的三種方法，這三種方法分別是：value.toString()、"" + value和String(value)，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要介紹了js如何清空input?file的值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
第一次接觸神奇的Bootstrap，Bootstrap提供了用戶友好、擴(kuò)瀏覽器的解決方案,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
easyui tree帶checkbox實(shí)現(xiàn)單選的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇easyui tree帶checkbox實(shí)現(xiàn)單選的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
這篇文章主要介紹了JS原生瀑布流效果實(shí)現(xiàn) ，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js實(shí)現(xiàn)瀑布流布局(無(wú)限加載)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)瀑布流布局，無(wú)限加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了如何用JavaScript讓你的瀏覽器說(shuō)話，對(duì)語(yǔ)音感興趣的同學(xué)，可以實(shí)驗(yàn)一下2021-04-04