資訊專欄INFORMATION COLUMN
摘要：接下來先介紹七個馬上就能用起來的小技巧。老實講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經發布好些年頭，這些特性大家可能已經非常熟識。，對象合并，不多說，大部分場景可以取代。
作者：@davidwalshblog原文：7 Useful JavaScript Tricks
和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經廣為人知，有的卻可能會讓你感到有些迷惑。接下來先介紹七個馬上就能用起來的 JavaScript 小技巧。
數組去重完成數組去重可能比你想象中更容易：
var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3]
這里使用到了 Set 和擴展運算符。
數組和布爾關于如何過濾掉數組中的假值，有這樣一個簡單的技巧：
myArray
.map(item => {
// ...
})
// Get rid of bad values
.filter(Boolean);
只需要將 Boolean 傳給 filter 函數即可過濾掉數組中的所有假值。
創建一個空對象你可能會直接使用對象字面量 {} 去創建一個空對象，但是這個空對象仍然包含 __proto__ 和 hasOwnProperty 以及其他的對象方法。這里提供一種方式，可以創建真正的空對象：
let dict = Object.create(null); // dict.__proto__ === "undefined" // No object properties exist until you add them
這個對象不包含任何屬性或者方法。
對象合并在 JavaScript 中合并對象的需求應該有很多，比如當創建一個有很多選項的類或組件的時候。
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",
}
*/
擴展運算符（...) 讓這項工作變得異常簡單。
函數必需參數可以給函數設置默認參數是一項很厲害的特性，可以通過傳一個函數去檢查必需參數是否傳參：
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");
解構賦值別名
解構是一項非常強大的特性，但有時我們期望用其他名稱來引用這些屬性，這時可以利用使用別名的技巧：
const obj = { x: 1 };
// Grabs obj.x as { x }
const { x } = obj;
// Grabs obj.x as { otherName }
const { x: otherName } = obj;
需要避免跟已有變量產生命名沖突時非常有用。
獲取 query 參數曾經我們必需通過正則表達式的方式去獲取 query 參數的值，但現在已經不需要了，可以使用 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"
后
譯者說
似乎許多人仍然頗為沉迷于這種技巧性質的東西，如最前所言，大部分或許早已成為一些常識性的東西，但對于某個特定的個體而言，可能還是初次見面，多多指教的情況。老實講，文章所說的小技巧大部分都是 ES6 新增的語法特性，ES6，或者說 ES2015 已經發布好些年頭，這些特性大家可能已經非常熟識。而現在 ES 的發布方式，每年小版本更新，已經漸漸淡化版本的概念，更關心的或許是宿主環境實現了什么。
逐條細說，第一條，是流傳相當廣的一行代碼。2，Boolean 本身也是一個構造函數，不使用 new 的時候相當于進行一個 ToBoolean 轉換操作，但這條平常好像也沒有場景用到。3，使用對象字面量 {} 相當于是 Object.create(Object.prototype) ，如果不希望有太多對象方法，倒是可以試試 Object.create(null)。4，對象合并，不多說，大部分場景可以取代 Object.assign 。5，對函數參數默認值挺有意思的一種用法。6，解構賦值別名，沒什么好說的。7，URLSearchParams 這是一個新的瀏覽器的 API ，不算 JavaScript 語言的，第一次見，支持度還比較弱。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104073.html
摘要：操作的層級在設計按鈕的時候必須明顯的體現出來首要操作必須明顯高對比度的背景顏色適用于這里。只有當銷毀操作是當前首要操作的時候采用高對比度的紅色背景樣式，比如彈出對話框的確認取消按鈕。 在微博看到別人轉發的這篇文章，里面的每一點都覺得非常實用，就決定翻譯一下，也算是給自己存個檔，加深一下印象。畢竟作為一個前端頁面仔，頁面UI的美化也是我們的工作，而且還會經常會被要求在頁面上加個這個或者加...
摘要：每種編程語言都有一些黑魔法或者說小技巧，也不例外，大部分是借助或者瀏覽器新特性實現。下面介紹的個實用小技巧，相信其中有些你一定用過。當然不管語言如何變化，我們總能在編程中總結一些小技巧來精簡代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧，JS也不例外，大部分是借...
閱讀 1371·2023-04-25 16:45
閱讀 1917·2021-11-17 09:33
閱讀 2306·2021-09-27 14:04
閱讀 914·2019-08-30 15:44
閱讀 2633·2019-08-30 14:24
閱讀 3411·2019-08-30 13:59
閱讀 1690·2019-08-29 17:00
閱讀 887·2019-08-29 15:33
