开发过程中使用,可以早点下班的coding小技巧


theme: arknights
highlight: a11y-light

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

在实际开发过程中,通过时间的沉淀,一些老人常常能写出一些让小白大吃一惊“骚操作”,那些“骚操作”通常简单的离谱,却能做很多事,属实是让很多新人摸不着头脑。

做一件事时间长了,技巧也就有了。

下面来个情景小剧场:

初入职场小鱼仔:这傻逼是不是写错了,~~ 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] )
其中depthflat的参数,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%);

未完待续…本文将持续更新,如若对你有帮助,可以大胆喜欢加点赞!

完全不够看?往期精彩回顾

image.png

学会这些鲜有人知的coding技巧,从此早早下班liao-JavaScript实战技巧篇

image.png 前端图片最优化压缩方案

image.png Vue实战技巧Element Table二次封装

写在最后

我是凉城a,一个前端,热爱技术也热爱生活。

与你相逢,我很开心。

喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容