日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

JS是一門發(fā)展迅速的語言，正因如此，有些新的特性和功能，咱們沒有辦法在第時間內(nèi)知道。在這篇文章中，咱們主要探討一些少有人知道的特性還有一些常用技巧。

獲取查詢字符串參數(shù)

URLSearchParams 接口定義了一些實(shí)用的方法來處理 URL 的查詢字符串，它已經(jīng)存在了好幾年了，但它在開發(fā)人員中并不流行，有點(diǎn)讓人驚訝，咱們來看看如何使用它

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);
//Iterate the search parameters.
for (let p of searchParams) {
 console.log(p);
}
searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.Append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

使用 Set 對象創(chuàng)建一個惟一的元素列表

用JS創(chuàng)建唯一列表是一項常見的任務(wù)，通常通過filters或for循環(huán)來實(shí)現(xiàn)，但是還有另一種方法可以利用Set對象來實(shí)現(xiàn)這一點(diǎn)。

const list = [1, 2, 3, 5, 2, 5, 7];
const uniqueList = [...new Set(list)];

將原始值數(shù)組傳遞給Set對象，它創(chuàng)建一組惟一值，然后使用展開操作符語法和數(shù)組字面量將這些值轉(zhuǎn)回數(shù)組。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費(fèi)獲取。

將原始值列表轉(zhuǎn)換為另一種類型

有時候，后臺或 DOM 中處理過的數(shù)據(jù)不是咱們需要的類型，我在處理數(shù)據(jù)集的屬性時看到過這種情況。假設(shè)有以下列表：

const naiveList = ['1500', '1350', '4580'];

想要計算數(shù)組中所有元素的和，在JS中，字符串的相加把兩個字符串拼接起來，像'1' + '2'它們會連接起來為 ‘12’，通常，要解決這個問題，咱們會使用parseInt函數(shù)，但還有另一種方法;咱們可以將數(shù)組中的元素轉(zhuǎn)換為所需的基本類型

const castedList = naiveList.map(Number);
console.log(castedList) // [1500, 1350, 4580]

castedList現(xiàn)在包含具有正確Number類型的值。

扁平嵌套的數(shù)組

隨著單頁應(yīng)用程序體系結(jié)構(gòu)(如Redux)和前端數(shù)據(jù)規(guī)范化等概念的興起，這種“數(shù)據(jù)規(guī)范化”趨勢有時意味著所有元素的 id 都需要放在同一級別。

假設(shè)有下面的列表，咱們想扁平它：

const nestedList = [133, 235, 515, [513, 15]];
const flattenList = nestedList.flat();
console.log(flattenList) // [133, 235, 515, 513, 15]

就像這樣，咱們的id數(shù)組被扁平了。

使用 object .freeze 避免對象被改變

隨著函數(shù)式x編程的興起，數(shù)據(jù)不可變也越來越重要，咱們可以使用 Object.freeze 來防止對象被更改。

const immutableObject = {
 name: '前端小智',
 url: 'https://小智66.com'
};
Object.freeze(immutableObject);
immutableObject.wechat = 'qq449245884'
immutableObject.name = '王大治' 
console.log(immutableObject) // {name: "前端小智", url: "https://小智66.com"}

使用 Object.seal 創(chuàng)建受控對象

Object.seal() 方法封閉一個對象，阻止添加新屬性并將所有現(xiàn)有屬性標(biāo)記為不可配置。當(dāng)前屬性的值只要可寫就可以改變，Object.freeze 是啥都不能做，Object.seal() 可以改變屬性的值。

const controlledObject = {
 name: '前端小智'
};
Object.seal(controlledObject);
controlledObject.name = '王大冶';
controlledObject.hero = '英雄'; 
console.log(controlledObject) // {name: "王大冶"}

確保數(shù)組值

使用 grid ，需要重新創(chuàng)建原始數(shù)據(jù)，并且每行的列長度可能不匹配， 為了確保不匹配行之間的長度相等，可以使用Array.fill方法。

let array = Array(5).fill('');
console.log(array); // outputs (5) ["", "", "", "", ""]

數(shù)組 map 的方法 (不使用Array.Map)

另一種數(shù)組 map 的實(shí)現(xiàn)的方式，不用 Array.map。

Array.from 還可以接受第二個參數(shù)，作用類似于數(shù)組的map方法，用來對每個元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。如下：

const cities = [
 { name: 'Paris', visited: 'no' },
 { name: 'Lyon', visited: 'no' },
 { name: 'Marseille', visited: 'yes' },
 { name: 'Rome', visited: 'yes' },
 { name: 'Milan', visited: 'no' },
 { name: 'Palermo', visited: 'yes' },
 { name: 'Genoa', visited: 'yes' },
 { name: 'Berlin', visited: 'no' },
 { name: 'Hamburg', visited: 'yes' },
 { name: 'New York', visited: 'yes' }
];
const cityNames = Array.from(cities, ({ name}) => name);
console.log(cityNames);
// outputs ["Paris", "Lyon", "Marseille", 
// "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]

有條件的對象屬性

不再需要根據(jù)一個條件創(chuàng)建兩個不同的對象，可以使用展開運(yùn)算符號來處理。

nst getUser = (emailIncluded) => {
 return {
 name: 'John',
 surname: 'Doe',
 ...emailIncluded && { email : '[email protected]' }
 }
}
const user = getUser(true);
console.log(user); // outputs { name: "John", surname: "Doe", email: "[email protected]" }
const userWithoutEmail = getUser(false);
console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }

動態(tài)屬性名

早期，如果屬性名需要是動態(tài)的，我們首先必須聲明一個對象，然后分配一個屬性。這些日子已經(jīng)過去了，有了ES6特性，我們可以做到這一點(diǎn)。

const dynamic = 'email';
let user = {
 name: 'John',
 [dynamic]: '[email protected]'
}
console.log(user); // outputs { name: "John", email: "[email protected]" }

代碼部署后可能存在的BUG沒法實(shí)時知道，事后為了解決這些BUG，花了大量的時間進(jìn)行l(wèi)og 調(diào)試。

作者：Euel Duran

來源： Dev

譯者：前端小智