本文為譯文,第一次嘗試翻譯英文博客,很多地方翻譯得不好。本文內(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 技巧是什么呢?