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

資訊專(zhuān)欄INFORMATION COLUMN

7個(gè)javascript實(shí)用小技巧

tinysun1234 / 3129人閱讀

摘要：每種編程語(yǔ)言都有一些黑魔法或者說(shuō)小技巧，也不例外，大部分是借助或者瀏覽器新特性實(shí)現(xiàn)。下面介紹的個(gè)實(shí)用小技巧，相信其中有些你一定用過(guò)。當(dāng)然不管語(yǔ)言如何變化，我們總能在編程中總結(jié)一些小技巧來(lái)精簡(jiǎn)代碼。

每種編程語(yǔ)言都有一些“黑魔法”或者說(shuō)小技巧，JS也不例外，大部分是借助ES6或者瀏覽器新特性實(shí)現(xiàn)。下面介紹的7個(gè)實(shí)用小技巧，相信其中有些你一定用過(guò)。

數(shù)組去重 
const j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]
數(shù)組清洗

洗掉數(shù)組中一些無(wú)用的值，如 0, undefined, null, false 等

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);
創(chuàng)建空對(duì)象

我們可以使用對(duì)象字面量{}來(lái)創(chuàng)建空對(duì)象，但這樣創(chuàng)建的對(duì)象有隱式原型__proto__和一些對(duì)象方法比如常見(jiàn)的hasOwnProperty，下面這個(gè)方法可以創(chuàng)建一個(gè)純對(duì)象。

let dict = Object.create(null);

// dict.__proto__ === "undefined"
// No object properties exist until you add them

該方法創(chuàng)建的對(duì)象沒(méi)有任何的屬性及方法

合并對(duì)象

JS中我們經(jīng)常會(huì)有合并對(duì)象的需求，比如常見(jiàn)的給用傳入配置覆蓋默認(rèn)配置，通過(guò)ES6擴(kuò)展運(yùn)算符就能快速實(shí)現(xiàn)。

const person = { name: "David Walsh", gender: "Male" };
const tools = { computer: "Mac", editor: "Atom" };
const attributes = { handsomeness: "Extreme", hair: "Brown", eyes: "Blue" };

const summary = {...person, ...tools, ...attributes};
/*
Object {
  "computer": "Mac",
  "editor": "Atom",
  "eyes": "Blue",
  "gender": "Male",
  "hair": "Brown",
  "handsomeness": "Extreme",
  "name": "David Walsh",
}
*/
設(shè)置函數(shù)必傳參數(shù)

借助ES6支持的默認(rèn)參數(shù)特性，我們可以將默認(rèn)參數(shù)設(shè)置為一個(gè)執(zhí)行拋出異常代碼函數(shù)返回的值，這樣當(dāng)我們沒(méi)有傳參時(shí)就會(huì)拋出異常終止后面的代碼運(yùn)行。

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

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

// This will throw an error because no name is provided
hello();

// This will also throw an error
hello(undefined);

// These are good!
hello(null);
hello("David");
解構(gòu)別名

ES6中我們經(jīng)常會(huì)使用對(duì)象結(jié)構(gòu)獲取其中的屬性，但有時(shí)候會(huì)想重命名屬性名，以避免和作用域中存在的變量名沖突，這時(shí)候可以為解構(gòu)屬性名添加別名。

const obj = { x: 1 };

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

// Grabs obj.x as as { otherName }
const { x: otherName } = obj;
獲取查詢(xún)字符串參數(shù)

以前獲取URL中的字符串參數(shù)我們需要通過(guò)函數(shù)寫(xiě)正則匹配，現(xiàn)在通過(guò)URLSearchParamsAPI即可實(shí)現(xiàn)。

// Assuming "?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"

隨著Javascript的不斷發(fā)展，很多語(yǔ)言層面上的不良特性都在逐漸移除或者改進(jìn)，如今的一行ES6代碼可能等于當(dāng)年的幾行代碼。

擁抱JS的這些新變化意味著前端開(kāi)發(fā)效率的不斷提升，以及良好的編碼體驗(yàn)。當(dāng)然不管語(yǔ)言如何變化，我們總能在編程中總結(jié)一些小技巧來(lái)精簡(jiǎn)代碼。

本文首發(fā)于公眾號(hào)「前端新視界」，如果你也有一些Javascript的小技巧，歡迎在下方留言，和大家一起分享哦！

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

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

相關(guān)文章

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

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

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

  • 實(shí)用Javascript調(diào)試技巧分享

    摘要：見(jiàn)過(guò)太多同學(xué)調(diào)試只會(huì)用簡(jiǎn)單的甚至，看著真為他們捉雞。。下面我就分享一些實(shí)用且聰明的調(diào)試技巧，希望能讓大家調(diào)試自己代碼的時(shí)候更加從容自信。其實(shí)提供了文件的搜索功能，只不過(guò)大部分時(shí)候我們給忽略了。。 見(jiàn)過(guò)太多同學(xué)調(diào)試Javascript只會(huì)用簡(jiǎn)單的console.log甚至alert，看著真為他們捉雞。。因?yàn)榇蠖鄶?shù)同學(xué)追求優(yōu)雅而高效地寫(xiě)代碼，卻忽略了如何優(yōu)雅而高效地調(diào)試代碼，不得不說(shuō)是有點(diǎn)...

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

  • 12個(gè)非常實(shí)用的JavaScript小技巧

    摘要：如果第一個(gè)參數(shù)返回的值為，那么第二個(gè)值將會(huì)認(rèn)為是一個(gè)默認(rèn)值。獲取數(shù)組中最后一個(gè)元素用來(lái)獲取和之間的數(shù)組元素。但這個(gè)對(duì)象不具有數(shù)組的函數(shù)功能，比如等。 使用!!操作符轉(zhuǎn)換布爾值 有時(shí)候我們需要對(duì)一個(gè)變量查檢其是否存在或者檢查值是否有一個(gè)有效值，如果存在就返回true值。為了做這樣的驗(yàn)證，我們可以使用!!操作符來(lái)實(shí)現(xiàn)是非常的方便與簡(jiǎn)單。對(duì)于變量可以使用!!variable做檢測(cè)，只要變量的...

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

  • 45個(gè)實(shí)用的JavaScript小貼士、小技巧和最佳實(shí)踐

    摘要：翻譯正文第一次聲明變量時(shí)，請(qǐng)不要忘記使用關(guān)鍵字聲明使用代替空字符串轉(zhuǎn)成布爾值都為每行代碼的末尾最好都加上個(gè)分號(hào)最好給對(duì)象都添加上構(gòu)造函數(shù)在使用和盡量小心。 翻譯介紹 翻譯標(biāo)題：45 Useful JavaScript Tips, Tricks and Best Practices 翻譯來(lái)源：http://modernweb.com/2013/12/23/45-useful-java...

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

  • ES6 javascript 實(shí)用開(kāi)發(fā)技巧

    摘要：實(shí)用開(kāi)發(fā)技巧本文只羅列出在開(kāi)發(fā)過(guò)程中相對(duì)實(shí)用的內(nèi)容，并非一個(gè)高大全的文檔，如果希望查閱詳細(xì)的內(nèi)容，可購(gòu)買(mǎi)阮一峰老師所出版的相關(guān)圖書(shū)。 Javascript - ES6 javascript 實(shí)用開(kāi)發(fā)技巧 本文只羅列出在 ES6 開(kāi)發(fā)過(guò)程中相對(duì)實(shí)用的內(nèi)容，并非一個(gè)高大全的文檔，如果希望查閱詳細(xì)的內(nèi)容，可購(gòu)買(mǎi)阮一峰老師所出版的 ES6 相關(guān)圖書(shū)。另外阮一峰老師《ECMAScript 6 入...

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

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

0條評(píng)論

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