【搬砖小技巧】 开发过程中使用，可以早点下班
转载
前言
在实际开发过程中，通过时间的沉淀，一些老人常常能写出一些让小白大吃一惊“骚操作”，那些“骚操作”通常简单的离谱，却能做很多事，属实是让很多新人摸不着头脑。
做一件事时间长了，技巧也就有了。
下面来个情景小剧场：
初入职场小鱼仔：这傻逼是不是写错了，~~ str？？（一看提交记录老大，捂住小嘴）
......尝试尝试尝试.......（大写的吃惊浮现在脸上）
初入职场小鱼仔：“卧槽，卧槽，卧槽，这都可以？有点离谱！牛逼！牛逼！属实牛逼！”（窃喜，嘻嘻，我学会了，可以去和小布仔装逼了！迫不及待的想找小布仔装逼的心情谁懂？）
这样的场景至今历历在目，一次又一次之后，小鱼仔长大了，变成了老油条。下面为大家分享一下“骚操作”合集。
程序员的信仰是：最少的代码，做最多的事。
应用场景
场景一：将一个字符串变成数字
常规操作
let str = '2'
console.log(Number(str)) //2
复制代码
骚操作一
let str = '2'
console.log(~~str) //2
复制代码
解析：
js中有~是按位取反运算,~~ 用来作双非按位取反运算
~~ 的作用是去掉小数部分,对于正数，向下取整；对于负数，向上取整；与Math.floor()不同的是，它只是单纯的去掉小数部分，不论正负都不会改变整数部分
非数字取值为0，它具体为
~~null; // => 0
~~undefined; // => 0
--NaN; // => 0
~~0; // => 0
~~{}; // => 0
~~[]; // => 0
~~(1/0); // => 0
~~false; // => 0
~~true; // => 1
~~1.9; // => 1
~~-1.9; // => -1
复制代码
骚操作二
let str = '2'
console.log(+str) //2
复制代码
解析：
JS中的 '+' 号
当用作单目操作符的时候，+操作符不会对Number类型产生影响。但如果应用在字符串类型上，会将其转换为数字：
let a = 25;
a =+ a;
console.log(a); //25
let b = '50';
console.log(typeof b); //String
b=+b;
console.log(typeof b); //Number
复制代码
通常使用+操作符可以快速地将字符串转换为数字。但是如果字符串字面量无法转化为数字的话，结果会出人意料：
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
复制代码
场景二：数组扁平化
常规操作
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]
复制代码
骚操作
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.数组去重
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.字符串去重
let str = "352255";
let unique = [...new Set(str)].join(""); // 352
复制代码
3.实现并集、交集、和差集
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.将伪数组转化为数组
//伪数组转换为数组
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]); // [div, div, div ... ]
复制代码
5.配合rest 运算符应用
function sumRest (...m) {
var total = 0;
for(var i of m){
total += i;
}
return total;
}
console.log(sumRest(1,2,3));//6
复制代码6.数组排序
const sortNumbers = (...numbers) => numbers.sort();
复制代码
场景四：网站置灰
CSS滤镜 -webkit-filter
一行代码足以
html.gray-mode { filter: grayscale(.95); -webkit-filter: grayscale(.95); }
复制代码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%);
复制代码
未完待续...
