開發過程中使用，可以早點下班的coding小技巧
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] )
其中depth是flat的參數，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();
}
未完待續...本文將持續更新，如若對你有幫助，可以大膽喜歡加點贊！
完全不夠看？往期精彩回顧
學會這些鮮有人知的coding技巧，從此早早下班liao-JavaScript實戰技巧篇
寫在最後
我是涼城a，一個前端，熱愛技術也熱愛生活。
與你相逢，我很開心。
- 文中如有錯誤，歡迎在評論區指正，如果這篇文章幫到了你，歡迎點贊和關注😊
- 本文首發於掘金，未經許可禁止轉載💌