開發過程中使用,可以早點下班的coding小技巧

語言: CN / TW / HK

theme: arknights highlight: a11y-light


本文正在參加「金石計劃 . 瓜分6萬現金大獎」

前言

在實際開發過程中,通過時間的沉澱,一些老人常常能寫出一些讓小白大吃一驚“騷操作”,那些“騷操作”通常簡單的離譜,卻能做很多事,屬實是讓很多新人摸不著頭腦。

做一件事時間長了,技巧也就有了。

下面來個情景小劇場:

初入職場小魚仔:這傻逼是不是寫錯了,~~ str??(一看提交記錄老大,捂住小嘴)

......嘗試嘗試嘗試.......(大寫的吃驚浮現在臉上)

初入職場小魚仔:“臥槽,臥槽,臥槽,這都可以?有點離譜!牛逼!牛逼!屬實牛逼!”(竊喜,嘻嘻,我學會了,可以去和小布仔裝逼了!迫不及待的想找小布仔裝逼的心情誰懂?)

這樣的場景至今歷歷在目,一次又一次之後,小魚仔長大了,變成了老油條。下面為大家分享一下“騷操作”合集。

程式設計師的信仰是:最少的程式碼,做最多的事。

應用場景

場景一:將一個字串變成數字

常規操作 js let str = '2' console.log(Number(str)) //2

騷操作一

js let str = '2' console.log(~~str) //2

解析:

js中有~是按位取反運算,~~ 用來作雙非按位取反運算

~~ 的作用是去掉小數部分,對於正數,向下取整;對於負數,向上取整;與Math.floor()不同的是,它只是單純的去掉小數部分,不論正負都不會改變整數部分

非數字取值為0,它具體為 js ~~null; // => 0 ~~undefined; // => 0 --NaN; // => 0 ~~0; // => 0 ~~{}; // => 0 ~~[]; // => 0 ~~(1/0); // => 0 ~~false; // => 0 ~~true; // => 1 ~~1.9; // => 1 ~~-1.9; // => -1

騷操作二

js let str = '2' console.log(+str) //2

解析:

JS中的 '+' 號

當用作單目操作符的時候,+操作符不會對Number型別產生影響。但如果應用在字串型別上,會將其轉換為數字: js let a = 25; a =+ a; console.log(a); //25 let b = '50'; console.log(typeof b);    //String b=+b; console.log(typeof b);    //Number 通常使用+操作符可以快速地將字串轉換為數字。但是如果字串字面量無法轉化為數字的話,結果會出人意料: js let a = 'kangkang'; a =+ a; console.log(a) //NaN console.log(typeof a);    //Number let b = ''; b=+b; console.log(b); //0 console.log(typeof b);    //Number

場景二:陣列扁平化

常規操作

js let arr = [1, [2, [3, 4,5]]]; function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; } console.log(flatten(arr))// [1, 2, 3, 4,5]

騷操作

js let arr = [1, [2, [3, 4]]]; console.log(arr.flat(Infinity)); // [1, 2, 3, 4,5]

解析

ES6中的flat 我們還可以直接呼叫 ES6中的flat方法來實現陣列扁平化。flat方法的語法:arr.flat ( [depth] ) 其中depthflat的引數,depth是可以傳遞陣列的展開深度(預設不填、數值是 1),即展開一層陣列。如果層數不確定,引數可以傳進 Infinity,代表不論多少層都要展開:

場景三:擴充套件運算子的應用

1.陣列去重

js let arr = [3, 5, 2, 2, 5, 5]; let setArr = new Set(arr) // 返回set資料結構Set(3) {3, 5, 2} //方法一 es6的...解構 let unique1 = [...setArr ]; //去重轉陣列後 [3,5,2] //方法二 Array.from()解析類陣列為陣列 let unique2 = Array.from(setArr ) //去重轉陣列後 [3,5,2]

2.字串去重

js let str = "352255"; let unique = [...new Set(str)].join(""); // 352

3.實現並集、交集、和差集

js let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]); // 並集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4} // 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3} // (a 相對於 b 的)差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}

4.將偽陣列轉化為陣列

js //偽陣列轉換為陣列 var nodeList = document.querySelectorAll('div'); console.log([...nodeList]); // [div, div, div ... ]

5.配合rest 運算子應用

js function sumRest (...m) { var total = 0; for(var i of m){ total += i; } return total; } console.log(sumRest(1,2,3));//6

6.陣列排序

js const sortNumbers = (...numbers) => numbers.sort();

場景四:網站置灰

CSS濾鏡 -webkit-filter

一行程式碼足以 css html.gray-mode { filter: grayscale(.95); -webkit-filter: grayscale(.95); } ```css blur 模糊-webkit-filter:blur(2px);

brightness 亮度-webkit-filter:brightness(25%);

contrast 對比度-webkit-filter: contrast(50%);

drop-shadow 陰影-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度-webkit-filter: opacity(50%);

grayscale 灰度-webkit-filter: grayscale(80%);

sepia 褐色-webkit-filter: sepia(100%);

invert 反色-webkit-filter: invert(100%);

hue-rotate 色相旋轉-webkit-filter:hue-rotate(180deg);

saturate 飽和度-webkit-filter: saturate(1000%); ```

場景五:如何寫出好函式

1.預設引數-在你的函式中使用預設引數

避免在你的函式中使用短路或條件來保持更清潔。 更重要的是,請記住,你的函式只會為未定義的引數提供值, 預設值不會替換任何其他虛假值。 js // BAD function createMicrobrewery(name) { const breweryName = name || "KangKang"; // ... } // GOOD function createMicrobrewery(name = "KangKang") { // ... }

2.引數不宜過多-明智地使用函式引數

儘量將函式引數的數量限制在2個或最多 3個。如果它需要這麼多引數,則可能是你的函式做的太多了。 但是,如果仍然需要它,請使用 JavaScript 物件作為引數。 為了使函式期望的屬性變得明顯,可以使用ES6解構語法。

js // BAD function createMenu(title, body, buttonText, cancellable) { // ... } createMenu("Foo", "Bar", "Baz", true); // GOOD function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: "Foo", body: "Bar", buttonText: "Baz", cancellable: true});

3.單一職責原則-函式應該做一件事

不要忘記函式的作用——為你的程式碼新增模組化。 每個只執行一項任務的較小函式將確保你的程式碼易於編寫、測試和理解。 永遠不要為單個功能設定多個目標。

js // BAD function emailClients(clients) { clients.forEach(client => { const clientRecord = database.lookup(client); if (clientRecord.isActive()) { email(client); } }); } // GOOD function emailActiveClients(clients) { clients.filter(isActiveClient).forEach(email); } function isActiveClient(client) { const clientRecord = database.lookup(client); return clientRecord.isActive(); }

未完待續...本文將持續更新,如若對你有幫助,可以大膽喜歡加點贊!

完全不夠看?往期精彩回顧

image.png

學會這些鮮有人知的coding技巧,從此早早下班liao-JavaScript實戰技巧篇

image.png 前端圖片最優化壓縮方案

image.png Vue實戰技巧Element Table二次封裝

寫在最後

我是涼城a,一個前端,熱愛技術也熱愛生活。

與你相逢,我很開心。

如果你想了解更多,請點這裡,期待你的小⭐⭐

  • 文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注😊
  • 本文首發於掘金,未經許可禁止轉載💌