資訊專欄INFORMATION COLUMN
摘要：接下來先介紹七個(gè)馬上就能用起來的小技巧。老實(shí)講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經(jīng)發(fā)布好些年頭，這些特性大家可能已經(jīng)非常熟識(shí)。，對(duì)象合并，不多說，大部分場(chǎng)景可以取代。
作者：@davidwalshblog原文：7 Useful JavaScript Tricks
和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經(jīng)廣為人知，有的卻可能會(huì)讓你感到有些迷惑。接下來先介紹七個(gè)馬上就能用起來的 JavaScript 小技巧。
數(shù)組去重完成數(shù)組去重可能比你想象中更容易：
var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3]
這里使用到了 Set 和擴(kuò)展運(yùn)算符。
數(shù)組和布爾關(guān)于如何過濾掉數(shù)組中的假值，有這樣一個(gè)簡(jiǎn)單的技巧：
myArray
.map(item => {
// ...
})
// Get rid of bad values
.filter(Boolean);
只需要將 Boolean 傳給 filter 函數(shù)即可過濾掉數(shù)組中的所有假值。
創(chuàng)建一個(gè)空對(duì)象你可能會(huì)直接使用對(duì)象字面量 {} 去創(chuàng)建一個(gè)空對(duì)象，但是這個(gè)空對(duì)象仍然包含 __proto__ 和 hasOwnProperty 以及其他的對(duì)象方法。這里提供一種方式，可以創(chuàng)建真正的空對(duì)象：
let dict = Object.create(null); // dict.__proto__ === "undefined" // No object properties exist until you add them
這個(gè)對(duì)象不包含任何屬性或者方法。
對(duì)象合并在 JavaScript 中合并對(duì)象的需求應(yīng)該有很多，比如當(dāng)創(chuàng)建一個(gè)有很多選項(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",
}
*/
擴(kuò)展運(yùn)算符（...) 讓這項(xiàng)工作變得異常簡(jiǎn)單。
函數(shù)必需參數(shù)可以給函數(shù)設(shè)置默認(rèn)參數(shù)是一項(xiàng)很厲害的特性，可以通過傳一個(gè)函數(shù)去檢查必需參數(shù)是否傳參：
const isRequired = () => { throw new Error("param is required"); };
const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
// This will throw an error because no name is provided
hello();
// This will also throw an error
hello(undefined);
// These are good!
hello(null);
hello("David");
解構(gòu)賦值別名
解構(gòu)是一項(xiàng)非常強(qiáng)大的特性，但有時(shí)我們期望用其他名稱來引用這些屬性，這時(shí)可以利用使用別名的技巧：
const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;
// Grabs obj.x as { otherName }
const { x: otherName } = obj;
需要避免跟已有變量產(chǎn)生命名沖突時(shí)非常有用。
獲取 query 參數(shù)曾經(jīng)我們必需通過正則表達(dá)式的方式去獲取 query 參數(shù)的值，但現(xiàn)在已經(jīng)不需要了，可以使用 URLSearchParams Web API：
// Assuming "?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"
后
譯者說
似乎許多人仍然頗為沉迷于這種技巧性質(zhì)的東西，如最前所言，大部分或許早已成為一些常識(shí)性的東西，但對(duì)于某個(gè)特定的個(gè)體而言，可能還是初次見面，多多指教的情況。老實(shí)講，文章所說的小技巧大部分都是 ES6 新增的語法特性，ES6，或者說 ES2015 已經(jīng)發(fā)布好些年頭，這些特性大家可能已經(jīng)非常熟識(shí)。而現(xiàn)在 ES 的發(fā)布方式，每年小版本更新，已經(jīng)漸漸淡化版本的概念，更關(guān)心的或許是宿主環(huán)境實(shí)現(xiàn)了什么。
逐條細(xì)說，第一條，是流傳相當(dāng)廣的一行代碼。2，Boolean 本身也是一個(gè)構(gòu)造函數(shù)，不使用 new 的時(shí)候相當(dāng)于進(jìn)行一個(gè) ToBoolean 轉(zhuǎn)換操作，但這條平常好像也沒有場(chǎng)景用到。3，使用對(duì)象字面量 {} 相當(dāng)于是 Object.create(Object.prototype) ，如果不希望有太多對(duì)象方法，倒是可以試試 Object.create(null)。4，對(duì)象合并，不多說，大部分場(chǎng)景可以取代 Object.assign 。5，對(duì)函數(shù)參數(shù)默認(rèn)值挺有意思的一種用法。6，解構(gòu)賦值別名，沒什么好說的。7，URLSearchParams 這是一個(gè)新的瀏覽器的 API ，不算 JavaScript 語言的，第一次見，支持度還比較弱。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104073.html
摘要：操作的層級(jí)在設(shè)計(jì)按鈕的時(shí)候必須明顯的體現(xiàn)出來首要操作必須明顯高對(duì)比度的背景顏色適用于這里。只有當(dāng)銷毀操作是當(dāng)前首要操作的時(shí)候采用高對(duì)比度的紅色背景樣式，比如彈出對(duì)話框的確認(rèn)取消按鈕。 在微博看到別人轉(zhuǎn)發(fā)的這篇文章，里面的每一點(diǎn)都覺得非常實(shí)用，就決定翻譯一下，也算是給自己存?zhèn)€檔，加深一下印象。畢竟作為一個(gè)前端頁面仔，頁面UI的美化也是我們的工作，而且還會(huì)經(jīng)常會(huì)被要求在頁面上加個(gè)這個(gè)或者加...
摘要：每種編程語言都有一些黑魔法或者說小技巧，也不例外，大部分是借助或者瀏覽器新特性實(shí)現(xiàn)。下面介紹的個(gè)實(shí)用小技巧，相信其中有些你一定用過。當(dāng)然不管語言如何變化，我們總能在編程中總結(jié)一些小技巧來精簡(jiǎn)代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧，JS也不例外，大部分是借...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡(jiǎn)介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...
閱讀 1574·2023-04-25 16:45
閱讀 1991·2021-11-17 09:33
閱讀 2426·2021-09-27 14:04
閱讀 963·2019-08-30 15:44
閱讀 2691·2019-08-30 14:24
閱讀 3478·2019-08-30 13:59
閱讀 1758·2019-08-29 17:00
閱讀 948·2019-08-29 15:33
