90% 前端開發者都不知道的 JavaScript 實用小技巧

面試神器之數組去重

const a = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

操做數組擔憂 falsy 值？

const res = myArray.filter(Boolean).map( // todo )

生成一個真正的空對象

const o = Object.create(null)
// o.__proto__ === "undefined"
// 對象 o 再也不含有任何屬性

合併對象

const a = {m: 1, n: 2}
const b = {n: 3, x: 5}

cons res = {
    ...a,
    ...b
}

/*
res = {
  m: 1,
  n: 3,
  x: 5
}
*/

要求函數參數必傳

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

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

// 這會拋出錯誤
hello();
hello(undefined);

// 正確姿式
hello(null);
hello('David');

解構後使用別名

const obj = { x: 1 };

// otherName 的值就是 obj.x
const { x: otherName } = obj;

快速獲取 URL 參數

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

// 假設 "?post=1234&action=edit"

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"

URLSearchParams 幫助咱們快速有效的解析參數，若是它依然存在瀏覽器兼容性的問題，這裏有一個 polyfill：

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    const regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    const results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

...

對了，你可能發現全部栗子我都使用 const 來聲明變量，若是你感受疑惑，能夠看看這篇文章：【JavaScript 的內存模型】

引用

7 Useful JavaScript Tricks
Get Query String Parameters with JavaScript