es6 7個比較有用的技巧

junbaor 發(fā)布于2019-08-23 18:37 / 2548人閱讀

摘要：數(shù)組去重數(shù)組和布爾有時我們需要過濾數(shù)組中值為的值例如你可能不知道這樣的技巧是不是很簡單只需要傳入一個函數(shù)即可創(chuàng)建一個空對象有時我們需要創(chuàng)建一個純凈的對象不包含什么原型鏈等等一般創(chuàng)建空對象最直接方式通過字面量但這個對象中依然存在屬性來指向等等

數(shù)組去重

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

數(shù)組和布爾

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

var myArray = [1, 0 , undefined, null, false];
myArray.filter(Boolean);
> > [1]
//是不是很簡單, 只需要傳入一個 Boolean 函數(shù)即可.

創(chuàng)建一個空對象

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

let dict = Object.create(null);
 
dict.__proto__ === "undefined"

合并對象

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

const page = {
    current: 1,
    pageSize: 10
}
 
const form = {
    name: "",
    sex: ""
}
 
const params = {...form, ...page};
 
/*
    {
        name: "",
        sex: "",
        current: 1,
        pageSize: 10
    }
*

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

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

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

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;

獲取查詢參數(shù)

多年來，我們編寫粗糙的正則表達式來獲取查詢字符串值，但那些日子已經(jīng)一去不復返了; 現(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ù)是這樣 "?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云服務器深度學習的7個有效買個云服務器有用嗎數(shù)據(jù)可視化7個數(shù)據(jù)類型最有用的算法

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

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

es6 7個比較有用的技巧

摘要：數(shù)組去重數(shù)組和布爾有時我們需要過濾數(shù)組中值為的值例如你可能不知道這樣的技巧是不是很簡單只需要傳入一個函數(shù)即可創(chuàng)建一個空對象有時我們需要創(chuàng)建一個純凈的對象不包含什么原型鏈等等一般創(chuàng)建空對象最直接方式通過字面量但這個對象中依然存在屬性來指向等等數(shù)組去重 var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3,...

Apollo 2019-08-02 15:31 評論0 收藏0
值得收藏 7 個有用JavaScript技巧

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

layman 2019-08-23 18:29 評論0 收藏0
8個有用的JS技巧

摘要：不幸的是，它們不能很好地處理非基本類型的數(shù)組。還可以接受第二個參數(shù)，作用類似于數(shù)組的方法，用來對每個元素進行處理，將處理后的值放入返回的數(shù)組。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優(yōu)質(zhì)文章請猛戳GitHub博客,一年百來篇優(yōu)質(zhì)文章等著你！這些技巧可能大家大部分都用過了，如果用過就當作加深點映像，如果沒有遇到過，就當作學會了幾個技巧。 1. 確保數(shù)組值使用 grid ...

printempw 2019-08-23 18:26 評論0 收藏0
讓你的代碼更簡短，更整潔，更易讀的ES6小技巧

摘要：讓你的代碼更簡短，更整潔，更易讀的小技巧寫在文章前面這篇文章翻譯自文章就代碼整潔方面對進行了總結。如果你正在使用的代碼使用的語法，這個是你需要注意的事情。更多還提供了我們很多很多其他的方式來使我們的代碼更簡潔，更易讀，以及更穩(wěn)定。讓你的代碼更簡短，更整潔，更易讀的ES6小技巧寫在文章前面這篇文章翻譯自ES6 tips and tricks to make your code cl...

wpw 2019-08-26 11:42 評論0 收藏0
七個 JavaScript 實用小技巧

摘要：接下來先介紹七個馬上就能用起來的小技巧。老實講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經(jīng)發(fā)布好些年頭，這些特性大家可能已經(jīng)非常熟識。，對象合并，不多說，大部分場景可以取代。作者：@davidwalshblog原文：7 Useful JavaScript Tricks 和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經(jīng)廣為人...

Lin_YT 2019-08-23 17:16 評論0 收藏0