成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

七個 JavaScript 實用小技巧

Lin_YT / 2816人閱讀

摘要：接下來先介紹七個馬上就能用起來的小技巧。老實講，文章所說的小技巧大部分都是新增的語法特性，，或者說已經(jīng)發(fā)布好些年頭，這些特性大家可能已經(jīng)非常熟識。，對象合并，不多說，大部分場景可以取代。

作者：@davidwalshblog
原文：7 Useful JavaScript Tricks

和許多其他語言一樣，JavaScript 也需要靠很多小技巧去完成各種不同的事情。有的可能早已經(jīng)廣為人知，有的卻可能會讓你感到有些迷惑。接下來先介紹七個馬上就能用起來的 JavaScript 小技巧。

數(shù)組去重

完成數(shù)組去重可能比你想象中更容易：

var j = [...new Set([1, 2, 3, 3])]
>> [1, 2, 3]

這里使用到了 Set 和擴(kuò)展運(yùn)算符。

數(shù)組和布爾

關(guān)于如何過濾掉數(shù)組中的假值，有這樣一個簡單的技巧：

myArray
    .map(item => {
        // ...
    })
    // Get rid of bad values
    .filter(Boolean);

只需要將 Boolean 傳給 filter 函數(shù)即可過濾掉數(shù)組中的所有假值。

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

你可能會直接使用對象字面量 {} 去創(chuàng)建一個空對象，但是這個空對象仍然包含 __proto__ 和 hasOwnProperty 以及其他的對象方法。這里提供一種方式，可以創(chuàng)建真正的空對象：

let dict = Object.create(null);

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

這個對象不包含任何屬性或者方法。

對象合并

在 JavaScript 中合并對象的需求應(yīng)該有很多，比如當(dāng)創(chuàng)建一個有很多選項的類或組件的時候。

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",
}
*/

擴(kuò)展運(yùn)算符（...) 讓這項工作變得異常簡單。

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

可以給函數(shù)設(shè)置默認(rèn)參數(shù)是一項很厲害的特性，可以通過傳一個函數(shù)去檢查必需參數(shù)是否傳參：

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)賦值別名

解構(gòu)是一項非常強(qiáng)大的特性，但有時我們期望用其他名稱來引用這些屬性，這時可以利用使用別名的技巧：

const obj = { x: 1 };

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

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

需要避免跟已有變量產(chǎn)生命名沖突時非常有用。

獲取 query 參數(shù)

曾經(jīng)我們必需通過正則表達(dá)式的方式去獲取 query 參數(shù)的值，但現(xiàn)在已經(jīng)不需要了，可以使用 URLSearchParams Web API：

// 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"
后 
譯者說

似乎許多人仍然頗為沉迷于這種技巧性質(zhì)的東西，如最前所言，大部分或許早已成為一些常識性的東西，但對于某個特定的個體而言，可能還是初次見面，多多指教的情況。老實講，文章所說的小技巧大部分都是 ES6 新增的語法特性，ES6，或者說 ES2015 已經(jīng)發(fā)布好些年頭，這些特性大家可能已經(jīng)非常熟識。而現(xiàn)在 ES 的發(fā)布方式，每年小版本更新，已經(jīng)漸漸淡化版本的概念，更關(guān)心的或許是宿主環(huán)境實現(xiàn)了什么。

逐條細(xì)說，第一條，是流傳相當(dāng)廣的一行代碼。2，Boolean 本身也是一個構(gòu)造函數(shù)，不使用 new 的時候相當(dāng)于進(jìn)行一個 ToBoolean 轉(zhuǎn)換操作，但這條平常好像也沒有場景用到。3，使用對象字面量 {} 相當(dāng)于是 Object.create(Object.prototype) ，如果不希望有太多對象方法，倒是可以試試 Object.create(null)。4，對象合并，不多說，大部分場景可以取代 Object.assign 。5，對函數(shù)參數(shù)默認(rèn)值挺有意思的一種用法。6，解構(gòu)賦值別名，沒什么好說的。7，URLSearchParams 這是一個新的瀏覽器的 API ，不算 JavaScript 語言的，第一次見，支持度還比較弱。

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104073.html

相關(guān)文章

  • 不會設(shè)計沒關(guān)系！看看這七個實用的網(wǎng)頁UI設(shè)計小技巧！

    摘要：操作的層級在設(shè)計按鈕的時候必須明顯的體現(xiàn)出來首要操作必須明顯高對比度的背景顏色適用于這里。只有當(dāng)銷毀操作是當(dāng)前首要操作的時候采用高對比度的紅色背景樣式，比如彈出對話框的確認(rèn)取消按鈕。 在微博看到別人轉(zhuǎn)發(fā)的這篇文章，里面的每一點都覺得非常實用，就決定翻譯一下，也算是給自己存?zhèn)€檔，加深一下印象。畢竟作為一個前端頁面仔，頁面UI的美化也是我們的工作，而且還會經(jīng)常會被要求在頁面上加個這個或者加...

    NickZhou 評論0 收藏0

  • 7個javascript實用小技巧

    摘要：每種編程語言都有一些黑魔法或者說小技巧，也不例外，大部分是借助或者瀏覽器新特性實現(xiàn)。下面介紹的個實用小技巧，相信其中有些你一定用過。當(dāng)然不管語言如何變化，我們總能在編程中總結(jié)一些小技巧來精簡代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語言都有一些黑魔法或者說小技巧，JS也不例外，大部分是借...

    tinysun1234 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    muddyway 評論0 收藏0

  • 前端文檔收集

    摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個最重要的技術(shù)點常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實現(xiàn)的大排序算法一怪對象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個最重要的技術(shù)點 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

    jsbintask 評論0 收藏0

發(fā)表評論

0條評論

Lin_YT

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<