应用场景

场景一：将一个字符串变成数字

常规操作

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%);
复制代码

场景五：如何写出好函数

1.默认参数-在你的函数中使用默认参数

避免在你的函数中使用短路或条件来保持更清洁。更重要的是，请记住，你的函数只会为未定义的参数提供值，默认值不会替换任何其他虚假值。

// BAD
function createMicrobrewery(name) {  const breweryName = name || "KangKang";  // ...
}
// GOOD
function createMicrobrewery(name = "KangKang") { // ...
}
复制代码

2.参数不宜过多-明智地使用函数参数

尽量将函数参数的数量限制在2个或最多 3 个。如果它需要这么多参数，则可能是你的函数做的太多了。但是，如果仍然需要它，请使用 JavaScript 对象作为参数。为了使函数期望的属性变得明显，可以使用ES6解构语法。

// 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.单一职责原则-函数应该做一件事

不要忘记函数的作用——为你的代码添加模块化。每个只执行一项任务的较小函数将确保你的代码易于编写、测试和理解。永远不要为单个功能设置多个目标。

// 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();
}

前端开发中的骚操作~~~~~相关推荐

JavaScript中的骚操作
JavaScript中的骚操作--记录自用 JavaScript中的骚操作数组去重数组转化为对象(Array to Object) 活用三元表达式转换为数字类型(Convert to Numbe ...
逆向趣事：那些封印在代码中的骚操作
在逆向一些正常或恶意软件时,有时会遇到一些作者封印在代码中的骚操作,有趣又另类,甚至可以作为检测规则来应用,今天就来聊聊这些骚操作. 01 - 闲趣型 2012年的时候,Fireye捕获到一个Java ...
前端开发中的Error以及异常捕获
本文首发于公众号:符合预期的CoyPan 写在前面在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...
【repost】一探前端开发中的JS调试技巧
有请提示:文中涉及较多Gif演示动画,移动端请尽量在Wifi环境中阅读前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问 ...
.NET Core开发实战（第23课：静态文件中间件：前后端分离开发合并部署骚操作）--学习笔记（下）...
23 | 静态文件中间件:前后端分离开发合并部署骚操作这里还有一个比较特殊的用法一般情况下,我们前后端分离的架构,前端会编译成一个 index.html 文件和若干个 CSS 文件和 JavaSc ...
初学者Web介绍一些前端开发中的基本概念用到的技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. ...
前端中什么是中台开发环境_Web前端开发中需要学习什么?会使用到哪些开发工具？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水.下面和千锋广州小编一起来看看吧! 前端工程师的主要职责: 前端工程师在不同的公司有不同的 ...
前端开发中的调试技巧
前端开发中的调试技巧骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主,浏览器脚本还只能为页面提供非常简单的辅助功能的时候.那个时候,网页主要运行在以IE6为主的浏览 ...
前端开发中JS调试技巧，你知道几种？用过几种？
调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如 ...

前端开发中的骚操作~~~~~