前言

10年的札達(dá)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷(xiāo)網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整札達(dá)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“札達(dá)網(wǎng)站設(shè)計(jì)”,“札達(dá)網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

ES6出來(lái)已經(jīng)有好幾年了，同時(shí)很多新特性可以被巧妙地運(yùn)用在項(xiàng)目中。我想要列下其中一些，希望它們對(duì)你有用。

如果你還知道其他一些小技巧，歡迎留言~ 很高興把它們補(bǔ)充進(jìn)來(lái)。

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

數(shù)組去重

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

數(shù)組和布爾

有時(shí)我們需要過(guò)濾數(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ì)象最直接方式通過(guò)字面量 {}, 但這個(gè)對(duì)象中依然存在 proto 屬性來(lái)指向 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í)帶來(lái)很多便利. 如果需要檢測(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í)我們更喜歡用其他名稱(chēng)引用這些屬性，所以我們可以利用別名來(lái)完成:

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

獲取查詢(xún)參數(shù)

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

在不使用 URLSearchParams 我們通過(guò)正則的方式來(lái)完成獲取查詢(xún)參數(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è)地址欄中查詢(xún)參數(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"

相比之前使用起來(lái)更加容易了

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。