值得收藏 7 個有用JavaScript技巧

layman 發布于2019-08-23 18:29 / 1898人閱讀

摘要：值得收藏個有用技巧像其它語言一樣中也可以通過一些技巧來完成一些復雜的操作接下來我們學習吧數組去重數組和布爾有時我們需要過濾數組中值為的值例如你可能不知道這樣的技巧是不是很簡單只需要傳入一個函數即可創建一個空對象有時我們需要創建一個純凈的對象

值得收藏 7 個有用JavaScript技巧

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

數組去重

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

數組和布爾

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

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

是不是很簡單, 只需要傳入一個 Boolean 函數即可.

創建一個空對象

有時我們需要創建一個純凈的對象, 不包含什么原型鏈等等. 一般創建空對象最直接方式通過字面量 {}, 但這個對象中依然存在 __proto__ 屬性來指向 Object.prototype 等等.

    let dict = Object.create(null);

    dict.__proto__ === "undefined"

合并對象

在JavaScript中合并多個對象的需求一直存在, 比如在傳參時需要把表單參數和分頁參數進行合并后在傳遞給后端

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

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

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

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

        }
    *

利用ES6提供的擴展運算符讓對象合并變得很簡單.

函數參數必須

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

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

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

    // 這里將拋出一個錯誤,因為名字時必須
    hello();
    // 這也將拋出一個錯誤
    hello(undefined);

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

解構賦值時使用別名

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

    const obj = { x: 1 };

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

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

獲取查詢參數

多年來，我們編寫粗糙的正則表達式來獲取查詢字符串值，但那些日子已經一去不復返了; 現在我們可以通過 URLSearchParams API 來獲取查詢參數

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

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

使用 URLSearchParams 之后:

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

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

GPU云服務器云服務器值得收藏 cn域名值得收藏嗎買個云服務器有用嗎 JAVASCRIPT技巧

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105301.html

個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

Jonathan Shieber 2019-08-29 12:33 評論0 收藏0
CSS技巧 - 收藏集 - 掘金

摘要：筆者作為一位，將工作以來用到的各種優秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數組的極值技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續更新… 一、...

SHERlocked93 2019-08-22 11:04 評論0 收藏0
JavaScript精編干貨

摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。淺析用 js 解析 xml 的方法由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。裝 X - 建立自己的斗圖網站庫之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ，迫于本屌絲開不起...

Fourierr 2019-08-21 18:46 評論0 收藏0