7個(gè)實(shí)用的 JavaScript 小技巧(譯文)

本文為譯文,第一次嘗試翻譯英文博客,很多地方翻譯得不好。本文內(nèi)容十分簡(jiǎn)單,可直接查看英文原文,或直接看代碼部分。文章每一部分都有拓展(暫未翻譯),可點(diǎn)擊查看。
原文:7 Useful JavaScript Tricks
以下為譯文:
和其他編程語(yǔ)言一樣,JavaScript 有著許多技巧來解決一些簡(jiǎn)單的、亦或是困難的任務(wù)。其中有大家所熟知的部分,但也有一些技巧可能超乎你的想象?,F(xiàn)在讓我們來看一下這七個(gè)你隨即可用的 JavaScript 小技巧!

數(shù)組去重

獲取數(shù)組的唯一值可能比你想象中要簡(jiǎn)單:

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

我超愛(...)和 Set!

數(shù)組配合布爾

要從一個(gè)數(shù)組中過濾falsy值?你或許不知道有這種技巧:

myArray
    .map(item => {
        // ... 
        // 記得 return
    })
    // 擺脫這些空值
    .filter(Boolean);

只需傳遞 Boolean 就能去除這些 falsy 值!

創(chuàng)建一個(gè)空的對(duì)象

當(dāng)然,似乎你可以通過像 {} 這樣來創(chuàng)建一個(gè)空對(duì)象,但實(shí)際上這樣創(chuàng)建的對(duì)象還是有__proto__、hasOwnProperty 以及其他對(duì)象的方法。下面是一種創(chuàng)造一個(gè)純對(duì)象的方法:

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// 在你添加動(dòng)態(tài)屬性之前為空

這個(gè)對(duì)象上絕對(duì)沒有你沒有放入的鍵或方法!

合并對(duì)象

JavaScript 合并多個(gè)對(duì)象的需求由來已久,尤其是當(dāng)我們創(chuàng)建帶有選項(xiàng)的類和小部件時(shí):

const person = { name: 'David Walsh', gender: 'Male' };
const tools = { computer: 'Mac', editor: 'Atom' };
const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/

這三個(gè)點(diǎn)讓任務(wù)變得簡(jiǎn)單多了!

強(qiáng)制函數(shù)傳參

能夠?yàn)楹瘮?shù)參數(shù)設(shè)置默認(rèn)值是 JavaScript 的一個(gè)很棒的補(bǔ)充。請(qǐng)查看這個(gè)技巧,要求為給定的參數(shù)傳遞值:

const isRequired = () => { throw new Error('param is required'); };

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

// 由于沒給 hello() 傳 name,該代碼會(huì)報(bào)錯(cuò)

// 下面代碼也會(huì)報(bào)錯(cuò)
hello(undefined);

// 來看看符合要求的寫法
hello(null);
hello('David');

這是某種下級(jí)驗(yàn)證和 JavaScript 慣用方法!

解構(gòu)別名

解構(gòu)賦值是一個(gè)非常受歡迎的 JavaScript 升級(jí),但有時(shí)我們更喜歡用其他名稱引用這些屬性,所以我們可以利用別名:

const obj = { x: 1 };

// Grabs obj.x as { x }
const { x } = obj;

// Grabs obj.x as { otherName }
const { x: otherName } = obj;

有效避免了與現(xiàn)有變量的命名沖突!

獲取查詢字符串參數(shù)

多年來,我們編寫了大量正則表達(dá)式來獲取查詢字符串值,但那些日子已經(jīng)一去不復(fù)返了——我們擁有了令人驚嘆的 URLSearchParams API

// 假設(shè) "?post=1234&action=edit"

var urlParams = new URLSearchParams(window.location.search);

console.log(urlParams.has('post')); // true
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"
console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1"

是不是比之前簡(jiǎn)單多了。

這些年 JavaScript 已經(jīng)發(fā)生了很大的變化,但我最喜歡的部分是我們現(xiàn)在看到 JavaScript 語(yǔ)言改進(jìn)的速度。盡管 JavaScript 在不斷動(dòng)態(tài)變化,我們?nèi)匀恍枰褂靡恍┎诲e(cuò)的技巧;把這些技巧放在你的工具箱里,以備不時(shí)之需!

你最喜歡的 JavaScript 技巧是什么呢?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容