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

skinner發表於2019-04-29
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。

相關文章