《三分鐘閱讀》7個有用的JavaScript技巧

三分鐘閱讀：給本身3分鐘的時間，拾起本身遺漏的知識點，第2期
文章引用：davidwalsh.name/javascript-…
做者：David Walsh
解讀：skinner

數組去重

var j = [...new Set([1, 2, 3, 3])];
>> [1,2,3]
複製代碼

這個去重方法簡單的使人陶醉

過濾空值

空值指的是沒有具體意義的一些值，好比0，undefined，null，false，空字符串等

let res = [1,2,0,undefined,null,false,''].filter(Boolean);
>> 1,2
複製代碼

建立空對象

建立一個空對象，咱們可能大多數時候會使用對象字面量爲{}的方式，然而這種方式建立的對象並非純粹的，它仍然有__proto__屬性以及繼承自Object原型的一些方法，這種方式建立的對象容易被修改，好比：

let o = {};
let p = Object.create(null);
Object.prototype.say = function(){
    console.log('hello')
}
console.log(o.say)
console.log(p.say)

>> f(){}
>> undefined
複製代碼

能夠看到經過{}建立的對象，很容易就被修改了，而經過Object.create(null)這種方式建立的對象就很純粹，沒有任何屬性和對象，很是乾淨。

合併對象

經過...延展操做符能夠很容易的合併對象

const person = { a:1 };
const tools = { b:2 };
const attributes = { c:3 };

const summary = {...person, ...tools, ...attributes};

>> {a:1,b:2,c:3}
複製代碼

不得不說...延展操做符真是好東西啊！

參數非空檢測

這個方法特別適用於封裝函數時使用，也許咱們知道能夠在函數參數中直接指定一個默認值，像下面這樣：

function test(parma = 'default'){}
複製代碼

然而，咱們也能夠直接賦值一個函數，若是沒有傳參，咱們就直接拋出錯誤提醒，若是一個組件裏面有不少方法，咱們就能夠直接複用，而不用每一個方法裏面都去作非空判斷處理。

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

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };
// 拋出一個錯誤，由於參數沒有傳
hello()；
// 沒有問題
hello('hello')
複製代碼

解構添加別名

在導入多個模塊的時候，爲防止引用的組件重名，咱們能夠在引入時直接賦值一個別名

const obj = { x: 1 };

const { x: otherName } = require('module');

複製代碼

使用的時候就能夠直接使用otherName

獲取查詢字符串參數

獲取url裏面的參數值或者追加查詢字符串，在這以前，咱們通常經過正則匹配處理，然而如今有一個新的api，具體詳情能夠查看這裏，可讓咱們以很簡單的方式去處理url。

假如咱們有這樣一個url，"?post=1234&action=edit"，咱們能夠這樣處理這個url

var urlParams = new URLSearchParams('?post=1234&action=edit');

console.log(urlParams.has('post')); 
console.log(urlParams.get('action')); // "edit"
console.log(urlParams.getAll('action')); // ["edit"]
console.log(urlParams.toString()); // "?post=1234&action=edit"

urlParams.append('active', '1')
console.log(urlParams); // "?post=1234&action=edit&active=1"
複製代碼

是否是很方便？那瀏覽器支持程度如何呢？經過這個地址查看，能夠發現大部分瀏覽器都支持哦！，若是碰到不支持的狀況，這裏還有個polyfill。