JS 10個 經常使用的技巧和不爲人知的特性

做者：Euel Duran
來源： Dev
譯者：前端小智

---

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

JS是一門發展迅速的語言，正因如此，有些新的特性和功能，我們沒有辦法在第時間內知道。在這篇文章中，我們主要探討一些少有人知道的特性還有一些經常使用技巧。

獲取查詢字符串參數

URLSearchParams 是接口定義了一些實用的方法來處理 URL 的查詢字符串，它已經存在了好幾年了，但它在開發人員中並不流行，有點讓人驚訝，我們來看看如何使用它

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

使用 Set 對象建立一個唯一的元素列表

用JS建立唯一列表是一項常見的任務，一般經過filters或for循環來實現，可是還有另外一種方法能夠利用Set對象來實現這一點。

const list = [1, 2, 3, 5, 2, 5, 7];
const uniqueList = [...new Set(list)];

將原始值數組傳遞給Set對象，它建立一組唯一值，而後使用展開操做符語法和數組字面量將這些值轉回數組。

將原始值列表轉換爲另外一種類型

有時候，後臺或 DOM 中處理過的數據不是我們須要的類型，我在處理數據集的屬性時看到過這種狀況。假設有如下列表：

const naiveList = ['1500', '1350', '4580'];

想要計算數組中全部元素的和，在JS中，字符串的相加把兩個字符串拼接起來，像'1' + '2'它們會鏈接起來爲 ‘12’，一般，要解決這個問題，我們會使用parseInt函數，但還有另外一種方法;我們能夠將數組中的元素轉換爲所需的基本類型

const castedList = naiveList.map(Number);
console.log(castedList) // [1500, 1350, 4580]

castedList如今包含具備正確Number類型的值。

扁平嵌套的數組

隨着單頁應用程序體系結構(如Redux)和前端數據規範化等概念的興起，這種「數據規範化」趨勢有時意味着全部元素的 id 都須要放在同一級別。

假設有下面的列表，我們想扁平它：

const nestedList = [133, 235, 515, [513, 15]];
const flattenList = nestedList.flat();
console.log(flattenList) //  [133, 235, 515, 513, 15]

就像這樣，我們的id數組被扁平了。

使用 object .freeze 避免對象被改變

隨着函數式x編程的興起，數據不可變也愈來愈重要，我們可使用 Object.freeze 來防止對象被更改。

const immutableObject = {
    name: '前端小智',
    url: 'https://小智66.com'
};
Object.freeze(immutableObject);

immutableObject.wechat = 'qq449245884'
immutableObject.name = '王大治' 
console.log(immutableObject) // {name: "前端小智", url: "https://小智66.com"}

使用 Object.seal 建立受控對象

Object.seal() 方法封閉一個對象，阻止添加新屬性並將全部現有屬性標記爲不可配置。當前屬性的值只要可寫就能夠改變，Object.freeze 是啥都不能作，Object.seal() 能夠改變屬性的值。

const controlledObject = {
    name: '前端小智'
};
Object.seal(controlledObject);
controlledObject.name = '王大冶';
controlledObject.hero = '英雄';  

console.log(controlledObject) // {name: "王大冶"}

確保數組值

使用 grid ，須要從新建立原始數據，而且每行的列長度可能不匹配， 爲了確保不匹配行之間的長度相等，可使用Array.fill方法。

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]

數組 map 的方法 (不使用Array.Map)

另外一種數組 map 的實現的方式，不用 Array.map。

Array.from 還能夠接受第二個參數，做用相似於數組的map方法，用來對每一個元素進行處理，將處理後的值放入返回的數組。以下：

const cities = [
    { name: 'Paris', visited: 'no' },
    { name: 'Lyon', visited: 'no' },
    { name: 'Marseille', visited: 'yes' },
    { name: 'Rome', visited: 'yes' },
    { name: 'Milan', visited: 'no' },
    { name: 'Palermo', visited: 'yes' },
    { name: 'Genoa', visited: 'yes' },
    { name: 'Berlin', visited: 'no' },
    { name: 'Hamburg', visited: 'yes' },
    { name: 'New York', visited: 'yes' }
];

const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
// outputs ["Paris", "Lyon", "Marseille", 
// "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

有條件的對象屬性

再也不須要根據一個條件建立兩個不一樣的對象，可使用展開運算符號來處理。

nst getUser = (emailIncluded) => {
  return {
    name: 'John',
    surname: 'Doe',
    ...emailIncluded && { email : 'john@doe.com' }
  }
}

const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" }

const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

動態屬性名

早期，若是屬性名須要是動態的，咱們首先必須聲明一個對象，而後分配一個屬性。這些日子已通過去了，有了ES6特性，咱們能夠作到這一點。

const dynamic = 'email';
let user = {
    name: 'John',
    [dynamic]: 'john@doe.com'
}
console.log(user); // outputs { name: "John", email: "john@doe.com" }

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文： https://dev.to/duranenmanuel/...

每次整理文章，通常都到2點才睡覺，一週4次左右，挺苦的，還望支持，給點鼓勵

交流（歡迎加入羣，羣工做日都會發紅包，互動討論技術）

阿里雲最近在作活動，低至2折，有興趣能夠看看：https://promotion.aliyun.com/...

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

由於篇幅的限制，今天的分享只到這裏。若是你們想了解更多的內容的話，能夠去掃一掃每篇文章最下面的二維碼，而後關注我們的微信公衆號，瞭解更多的資訊和有價值的內容。