国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

es6 7個(gè)比較有用的技巧

Apollo / 3203人閱讀

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

數(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ù)和分頁參數(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"
相比之前使用起來更加容易了

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/54186.html

相關(guān)文章

  • es6 7個(gè)比較有用的技巧

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

    junbaor 評(píng)論0 收藏0

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

    摘要：值得收藏個(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ù)...

    layman 評(píng)論0 收藏0

  • 8個(gè)有用的JS技巧

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

    printempw 評(píng)論0 收藏0

  • 讓你的代碼更簡(jiǎn)短，更整潔，更易讀的ES6小技巧

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

    wpw 評(píng)論0 收藏0

  • 七個(gè) JavaScript 實(shí)用小技巧

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

    Lin_YT 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<