值得收藏 7 個(gè)有用JavaScript技巧

layman 發(fā)布于2019-08-23 18:29 / 1930人閱讀

摘要：值得收藏個(gè)有用技巧像其它語言一樣中也可以通過一些技巧來完成一些復(fù)雜的操作接下來我們學(xué)習(xí)吧數(shù)組去重?cái)?shù)組和布爾有時(shí)我們需要過濾數(shù)組中值為的值例如你可能不知道這樣的技巧是不是很簡(jiǎn)單只需要傳入一個(gè)函數(shù)即可創(chuàng)建一個(gè)空對(duì)象有時(shí)我們需要?jiǎng)?chuàng)建一個(gè)純凈的對(duì)象

值得收藏 7 個(gè)有用JavaScript技巧

像其它語言一樣,JavaScript中也可以通過一些技巧來完成一些復(fù)雜的操作. 接下來我們學(xué)習(xí)吧

數(shù)組去重

    var arr = [1, 2, 3, 3, 4];
    console.log(...new Set(arr))
    >> [1, 2, 3, 4]

數(shù)組和布爾

有時(shí)我們需要過濾數(shù)組中值為 false 的值. 例如(0, undefined, null, false), 你可能不知道這樣的技巧

 var myArray = [1, 0 , undefined, null, false];
 myArray.filter(Boolean);
 >> [1]

是不是很簡(jiǎn)單, 只需要傳入一個(gè) Boolean 函數(shù)即可.

創(chuàng)建一個(gè)空對(duì)象

有時(shí)我們需要?jiǎng)?chuàng)建一個(gè)純凈的對(duì)象, 不包含什么原型鏈等等. 一般創(chuàng)建空對(duì)象最直接方式通過字面量 {}, 但這個(gè)對(duì)象中依然存在 __proto__ 屬性來指向 Object.prototype 等等.

    let dict = Object.create(null);

    dict.__proto__ === "undefined"

合并對(duì)象

在JavaScript中合并多個(gè)對(duì)象的需求一直存在, 比如在傳參時(shí)需要把表單參數(shù)和分頁(yè)參數(shù)進(jìn)行合并后在傳遞給后端

    const page = {
        current: 1,
        pageSize: 10
    }

    const form = {
        name: "",
        sex: ""
    }

    const params = {...form, ...page};

    /*
        {
            name: "",
            sex: "",
            current: 1,
            pageSize: 10

        }
    *

利用ES6提供的擴(kuò)展運(yùn)算符讓對(duì)象合并變得很簡(jiǎn)單.

函數(shù)參數(shù)必須

ES6中可以給參數(shù)指定默認(rèn)值,確實(shí)帶來很多便利. 如果需要檢測(cè)某些參數(shù)是必傳時(shí),可以這么做

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

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

    // 這里將拋出一個(gè)錯(cuò)誤,因?yàn)槊謺r(shí)必須
    hello();
    // 這也將拋出一個(gè)錯(cuò)誤
    hello(undefined);

    // 正常
    hello(null);
    hello("David");

解構(gòu)賦值時(shí)使用別名

解構(gòu)賦值是一個(gè)非常受歡迎的JavaScript功能，但有時(shí)我們更喜歡用其他名稱引用這些屬性，所以我們可以利用別名來完成:

    const obj = { x: 1 };

    // Grabs obj.x as { x }
    const { x } = obj;

    // Grabs obj.x as { otherName }
    const { x: otherName } = obj;

獲取查詢參數(shù)

多年來，我們編寫粗糙的正則表達(dá)式來獲取查詢字符串值，但那些日子已經(jīng)一去不復(fù)返了; 現(xiàn)在我們可以通過 URLSearchParams API 來獲取查詢參數(shù)

在不使用 URLSearchParams 我們通過正則的方式來完成獲取查詢參數(shù)的, 如下:

  function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    return r ? r[2] : null;
  }

使用 URLSearchParams 之后:

    // 假設(shè)地址欄中查詢參數(shù)是這樣 "?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"

相比之前使用起來更加容易了.