探讨奇技淫巧

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

探讨奇技淫巧

起源

在工程实践中,我们常常会遇到一些奇技淫巧。所谓奇技淫巧,就是官方在设计或者实践中并未想象出的代码风格或者使用场景。其实也就是类似于 react 的 hoc,本来源自于社区,但是该方案却成为了官方肯定的方案。那么究竟应不应在平时学习呢?究竟应不应该在工程中使用呢,或者使用怎么样的奇技淫巧。

两年前。我还没有毕业,在大学的最后一个学期中选择了进入前端,同时,被吸引到前端阵营中一个不得不说的原因就是 js 的奇技淫巧,同时个人是一个比较猎奇的人,所以就学了很多关于 js 的奇技淫巧。

现在这些奇技淫巧要么变成了这门语言不可或缺的一部分,要么随着时间的推移而消失,还有一些在不知不觉中却忘记了,既然这次的文章是介绍这方面的知识,也就多介绍一下之前学习的一些例子。

~ 运算符 + indexOf

在 es6 includes 尚未推行之前,我们判断判断字符串或者数组包含只能使用 indexOf 这个方法,但是 indexOf 返回的确实元素的索引,如果不存在则返回 -1。 因为在之前写 c 语言的时候,我们往往使用 0 代表成功,1 2 3代表着不同的错误。因为0是独一无二的。在类c的语言中是具有 truthy falsy 这个概念。并不指代bool的 true 与 false。

下表代表了js 的 truthy 以及 falsy。

变量类型falsytruthy
布尔falsetrue
字符串" "非空字符串
数值0 NaN任何不为falsy的数值
null
undefined
对象(数组), {} 以及 []

对于数值而言,我们知道 0 对于数值是唯一的,而 -1不是。那么我们可以通过 ~ 运算符来把-1 变为 0.

~-1
// 0
~1
//-2

解释下
对每一个比特位执行非(NOT)操作。NOT a 结果为 a 的反转(即反码)。

9 (base 10) = 00000000000000000000000000001001 (base 2)   ~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)

因为在计算机中第一位代表着 符号位置。

同时简单理解。对任一数值 x 进行按位非操作的结果为 -(x + 1)。 也就是说通过 ~ 可以把 -1(且仅仅只是 -1) 变为 falsy。

var str = 'study pwa';
var searchFor = 'a';// 这是 if (str.indexOf('a') > -1) 或者 if ( -1 * str.indexOf('a') <= 0) 条件判断的另一种方法
if (~str.indexOf(searchFor)) {// searchFor 包含在字符串 str 中
} else {// searchFor 不包含在字符串 str 中
}

惰性函数

没学习惰性函数时候,如果创建 xhr,每次都需要判断。

function createXHR(){var xmlhttp;try{//firfox,opear,safarixmlHttp=new XMLHttpRequest();} catch(e) {try{xmlHttp=new ActiveXobject('Msxm12.XMLHTTP');} catch(e) {try{xmlHttp=new ActiveXobject("Microsoft.XMLHTTP")} catch(e) {alert("您的浏览器不支持AJAX")return false;}}}return xmlHttp;
}

在学习完了惰性函数之后

function createXHR(){// 定义xhr,var xhr = null;if (typeof XMLHttpRequest!='undefined') {xhr=new XMLHttpRequest();createXHR=function(){return new XMLHttpRequest();  //直接返回一个懒函数}} else {try{xhr=new ActiveXObject("Msxml2.XMLHTTP");createXHR=function(){return new ActiveXObject("Msxml2.XMLHTTP");}} catch(e) {try{xhr =new ActiveXObject("Microsoft.XMLHTTP");createXHR=function(){return new ActiveXObject("Microsoft.XMLHTTP");}} catch(e) {createXHR=function(){return null}}        }}// 第一次调用也需要 返回 xhr 对象,所以需要返回 xhrreturn xhr;
}

如果代码被使用于两次调用以上则会有一定的性能优化。第一次调用时候 把 xhr 赋值并返回,且在进入层层 if 判断中把 createXHR 这个函数赋值为其他函数。

 // 如果浏览器中有 XMLHttpRequest 对象在第二次调用时候createXHR=function(){return XMLHttpRequest();  //直接返回一个懒函数}

该方案可以在不需要第二个变量的情况下直接对函数调用进行优化。同时对于调用方也是透明的,不需要修改任何代码。

扩展运算符号的另类用法

在最近的学习中,我看到了一篇关于 ... (扩展运算符)的另类用法,The shortest way to conditional insert properties into an object literal, 这篇文章介绍了如何最简化的写出条件性插入对象属性。

在没有看过这篇文章时会写出如下代码:

// 获得手机号
const phone = this.state.phoneconst person = {name: 'gogo',age: 11
}// 如果手机号不为空,则添加到person中
if (phone) {person.phone = phone
}

但是,看完该文章之后可以写出这样的代码

// 获得手机号
const phone = this.state.phoneconst person = {name: 'gogo',age: 11,...phone && {phone}
}

上面的代码与该代码功能相同,但是代码量却减少很多。

要理解上述代码的运行原理,首先先介绍一下 ... 运算符, 对象的扩展运算符(...)用于取出参数对象的所有可遍历属性,拷贝到当前对象之中。

let z = { a: 3, b: 4 };
let n = { ...z };
n // { a: 3, b: 4 }// 如果是 空对象,没有任何效果
{...{}, a: 1}
// { a: 1 }// 如果扩展运算符后面不是对象,则会自动将其转为对象。但是如果对象没有属性,就会返回空对象
// {...1} 会变为 {...Object(1)} 但是因为没有属性
{...1} 
// {}// 同理得到
{...undefined} {...null} {...true}
// 都会变为 {}

可以参考 阮一峰的 es6入门的对象的扩展运算符

原理是因为代码可以如下理解:

const obj = {...(phone && {phone})
}// 如果 phone 有数据,&& 执行则会变为
const obj = {...{phone}
}
// 而对象扩展运算符 执行就会变为
const obj = {phone
}但是 如果 phone 为空字符串或者其他 falsy 数据,则代码会直接短路
const obj = {...false...null...0...undefined
}
则不会添加任何属性进入对象

讨论与思考

关于 ~ 操作符 + indexOf 其实加深了对位运算与比特位的理解。但是在es6之后我们完全可以使用 includes。完全可以不再使用~indexOf。

对于惰性函数,在typescript中,该代码是不可以使用的。当然,我们可以通过函数变量以及增加代码实现上述功能。

function createXHR(){}
// 修改为
let createXHR = function() {// ...
}

这里也可以看出 ts 不认可函数声明的函数名是一个变量。

对于扩展运算符的特殊用法。关于 typescript 使用,上述代码是可以在ts中使用的,不过不可以使用 &&,要使用 三元运算符

{...phone ? {phone} : {}
}

但是不建议在ts中使用,因为该代码不会被代码ts检测到。

const phone = '123'// 定义接口
interface Person {name: string;
}// 不会爆出 error
const person: Person = {name: 'ccc',...phone ? {phone} : {}
}

该代码是与 ts 严重相悖的,ts首要就是类型定义,而使用该代码逃出了 ts 的类型定义,这个对于语言上以及工程维护上是无法接受的。 同样的代码,我认为 js 是可以接受的(但是未必要在工程中使用),但是 ts 确实无法接受的,这也是不同的语言之间的差异性。

在关于这片文章的评论中,最大的论点在于 为什么要使用最简的代码,最好的代码应该是不言自明的。

而作者也相对而言探讨了自己的一些看法,应该学习一些自己不理解的东西。同时如果一个东西能够解释来龙去脉,完全可以从原理性解释,那么值得学习与使用。同时我个人其实是和作者持着相同意见的。

总结

  • js 是一门灵活的语言(手动滑稽)。
  • 应该多学习一些奇技淫巧,因为很多奇技淫巧往往代表一些混合的知识,往往会有一些新奇的思考与体验(怎么我想不出来?)同时,在别人使用了奇技淫巧时候我可以迅速理解。
  • 在项目中是否使用此类代码要取决团队类型,以及项目体系,并非个人喜恶。

鼓励一下

如果你觉得这篇文章不错,希望可以给与我一些鼓励,在我的 github 博客下帮忙 star 一下。 博客地址

参考资料

The shortest way to conditional insert properties into an object literal

对象的扩展运算符

转载于:https://my.oschina.net/wsafight/blog/3058605

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/536418.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

悼念512汶川大地震遇难同胞——选拔志愿者【博奕】

悼念512汶川大地震遇难同胞——选拔志愿者 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s): 11716 Accepted Submission(s): 7537 Problem Description 对于四川同胞遭受的灾难&#xff0c;全国人民纷纷伸出援…

mall整合SpringBoot+MyBatis搭建基本骨架

本文主要讲解mall整合SpringBootMyBatis搭建基本骨架&#xff0c;以商品品牌为例实现基本的CRUD操作及通过PageHelper实现分页查询。 mysql数据库环境搭建 下载并安装mysql5.7版本&#xff0c;下载地址&#xff1a;dev.mysql.com/downloads/i…设置数据库帐号密码&#xff1a;r…

Web框架之Django_01初识(三大主流web框架、Django安装、Django项目创建方式及其相关配置、Django基础三件套:HttpResponse、render、redirect)...

摘要&#xff1a; Web框架概述 Django简介 Django项目创建 Django基础必备三件套(HttpResponse、render、redirect) 一、Web框架概述&#xff1a; Python三大主流Web框架&#xff1a; Django&#xff1a;大而全&#xff0c;自带了很多功能模块&#xff0c;类似于航空母舰&am…

Bone Collector【01背包】

F - Bone Collector HDU - 2602 Many years ago , in Teddy’s hometown there was a man who was called “Bone Collector”. This man like to collect varies of bones , such as dog’s , cow’s , also he went to the grave … The bone collector had a big bag wit…

Gamma阶段第八次scrum meeting

每日任务内容 队员昨日完成任务明日要完成的任务张圆宁#91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91&#xff08;持续完成&#xff09;#91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91牛宇航#86 重置密码的后端逻辑https:/…

【动态规划】多重背包

问题 Q: 【动态规划】多重背包 时间限制: 1 Sec 内存限制: 64 MB 提交: 112 解决: 49 [提交] [状态] [讨论版] [命题人:admin] 题目描述 张琪曼&#xff1a;“魔法石矿里每种魔法石的数量看起来是足够多&#xff0c;但其实每种魔法石的数量是有限的。” 李旭琳&#xff1a;…

【动态规划】完全背包问题

问题 O: 【动态规划】完全背包问题 时间限制: 1 Sec 内存限制: 64 MB 提交: 151 解决: 71 [提交] [状态] [讨论版] [命题人:admin] 题目描述 话说张琪曼和李旭琳又发现了一处魔法石矿&#xff08;运气怎么这么好&#xff1f;各种嫉妒羡慕恨啊&#xff09;&#xff0c;她们有…

springboot超级详细的日志配置(基于logback)

前言 java web 下有好几种日志框架&#xff0c;比如&#xff1a;logback&#xff0c;log4j&#xff0c;log4j2&#xff08;slj4f 并不是一种日志框架&#xff0c;它相当于定义了规范&#xff0c;实现了这个规范的日志框架就能够用 slj4f 调用&#xff09;。其中性能最高的应该使…

【动态规划】简单背包问题II

问题 J: 【动态规划】简单背包问题II 时间限制: 1 Sec 内存限制: 64 MB 提交: 127 解决: 76 [提交] [状态] [讨论版] [命题人:admin] 题目描述 张琪曼&#xff1a;“为什么背包一定要完全装满呢&#xff1f;尽可能多装不就行了吗&#xff1f;” 李旭琳&#xff1a;“你说得…

Vue组件通信

前言 Vue组件之间的通信 其实是一种非常常见的场景 不管是业务逻辑还是前段面试中都是非常频繁出现的 这篇文章将会逐一讲解各个传值的方式 不过在此之前 先来总结一下各个传值方式吧 1.父组件向子组件传值 > props2.子组件向父组件传值 > $emit3.平级组件传值 > 总线…

【动态规划】0/1背包问题

问题 H: 【动态规划】0/1背包问题 时间限制: 1 Sec 内存限制: 64 MB 提交: 152 解决: 95 [提交] [状态] [讨论版] [命题人:admin] 题目描述 张琪曼和李旭琳有一个最多能用m公斤的背包&#xff0c;有n块魔法石&#xff0c;它们的重量分别是W1&#xff0c;W2&#xff0c;…&a…

猫哥教你写爬虫 005--数据类型转换-小作业

小作业 程序员的一人饮酒醉 请运用所给变量&#xff0c;使用**str()**函数打印两句话。 第一句话&#xff1a;1人我编程累, 碎掉的节操满地堆 第二句话&#xff1a;2眼是bug相随, 我只求今日能早归 number1 1 number2 2 unit1 人 unit2 眼 line1 我编程累 line2 是bug相…

索引失效

转载于:https://blog.51cto.com/11009785/2406488

棋盘问题【深搜】

棋盘问题 POJ - 1321 在一个给定形状的棋盘&#xff08;形状可能是不规则的&#xff09;上面摆放棋子&#xff0c;棋子没有区别。要求摆放时任意的两个棋子不能放在棋盘中的同一行或者同一列&#xff0c;请编程求解对于给定形状和大小的棋盘&#xff0c;摆放k个棋子的所有可行…

python isinstance()

isinstanceisinstance(object, classinfo) 判断实例是否是这个类或者object是变量 classinfo 是类型(tuple,dict,int,float) 判断变量是否是这个类型 举例&#xff1a; class objA: pass A objA() B a,v C a string print isinstance(A, objA) #注意该用法 print isinst…

P1303 A*B Problem 高精度乘法

复习了一下高精乘 #include<bits/stdc.h> using namespace std; const int maxn1e67; char a1[maxn],b1[maxn]; int a[maxn],b[maxn],c[maxn*10],lena,lenb,lenc,x; int main() {scanf("%s",a1);scanf("%s",b1);lenastrlen(a1);lenbstrlen(b1);for(i…

Catch That Cow【广搜】

Catch That Cow POJ - 3278 Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. He starts at a point N (0 ≤ N ≤ 100,000) on a number line and the cow is at a point K (0 ≤ K ≤ 100,000) on the same number l…

Go2Shell 已无法使用

在更新 Mac 系统时提醒了这个, 像我一样对 Go2Shell 中毒的人来说, 这是无法忍受的。貌似 Go2Shell 没有升级&#xff0c;没有办法&#xff0c;就直接找来了一个替代品。cd to, 下载入口如下&#xff1a;目前感觉良好。 转载于:https://juejin.im/post/5cfe82e15188252b1b0366e…

Fliptile【搜索】

Fliptile POJ - 3279 Farmer John knows that an intellectually satisfied cow is a happy cow who will give more milk. He has arranged a brainy activity for cows in which they manipulate an M N grid (1 ≤ M ≤ 15; 1 ≤ N ≤ 15) of square tiles, each of which…

JS异步开发总结

1 前言 众所周知&#xff0c;JS语言是单线程的。在实际开发过程中都会面临一个问题&#xff0c;就是同步操作会阻塞整个页面乃至整个浏览器的运行&#xff0c;只有在同步操作完成之后才能继续进行其他处理&#xff0c;这种同步等待的用户体验极差。所以JS中引入了异步编程&…