请查看这份学习笔记！从Vue源码中学到的5个JavaScript技巧能有效提升编程水平。最近笔者开始了vue2.x的阅读之旅，从中学到了很多JS相关的技巧。与其一起快乐，不如一个人快乐。这篇文章将我的学习成果分享给大家。1.确定任何对象的具体类型JavaScript中有六种基本数据类型——boolean、number、string、null、undefined、symbol和object数据类型。但是，您知道对象数据类型可以细分为许多子类型吗？对象可以是数组、函数、映射等，如果我们想得到一个特定类型的对象怎么办呢？在继续深入之前，让我们先看看另一个问题：Object.prototype.toString.call(arg)和String(arg)之间有什么区别？这两个表达式都尝试将参数转换为字符串，但有一个区别：String(arg)将尝试调用arg.toString()或arg.valueOf()，因此如果arg或arg原型覆盖了这两个函数，则Object.prototype.toString。call(arg)和String(arg)会给出不同的结果。const_toString=Object.prototype.toStringvarobj={}obj.toString()//[objectObject]_toString.call(obj)//[objectObject]这种情况下String(arg)和Object.prototype.toString.call是一样的(arg)具有相同的效果。const_toString=Object.prototype.toStringvarobj={}obj.toString=()=>'111'obj.toString()//111_toString.call(obj)//[objectObject]/hello/.toString()///hello/_toString.call(/hello/)//[objectRegExp]在这种情况下，String(arg)和Object.prototype.toString.call(arg)给出不同的结果。ECMAScript有以下规则：来源：EcmaScript在不同的对象上调用Object.prototype.toString()，并返回不同的结果。此外，Object.prototype.toString()的返回值格式始终为“[object”+“tag”+“]”。如果只想要中间的标签，可以通过正则表达式或者String.prototype.slice()删除两边的字符。functiontoRawType(value){const_toString=Object.prototype.toStringreturn_toString.call(value).slice(8,-1)}toRawType(null)//"Null"toRawType(/sdfsd/)//"RegExp"使用上面的函数,你可以获得JavaScript变量的类型。Vue源码：https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js（第62行）2.判断函数是native还是customJavaScriptFunctions有两种，一种一个是服务器环境提供的，一个是用户自定义的。这两个函数在转换为字符串时有不同的结果。Array.isArray.toString()//"functionisArray(){[nativecode]}"functionfn(){}fn.toString()//"functionfn(){}"原生函数toString总是以functionfnName()开头{[nativecode]}渲染结果。这个区分是可以的。Vue源码：https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js（第58行）3.缓存函数计算结果如果有这样一个函数：functioncomputed(str){//Supposedthecalculationinthefunctionisverytimeconsole.log('2000shavepassed')return'aresult'}其目标是缓存函数运行的结果。后面调用该函数时，如果参数相同，则不执行该函数，直接返回缓存中的结果。我们如何做到这一点？编写一个包装目标函数的缓存函数。这个缓存函数将目标函数作为参数并返回一个新的包装函数。在缓存函数中，可以使用Object或Map来缓存上一次函数调用的结果。示例如下：Vue源码：https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js（第153行）4.将hello-world样式转换为helloWorld样式协作时项目，我们必须使用通用的编码风格。有些人可能习惯于helloWorld，而另一些人则习惯于hello-world。为了解决这个问题，可以写一个函数将hello-world统一转换成helloWorld。constcamelizeRE=/-(\w)/gconstcamelize=cached((str)=>{returnstr.replace(camelizeRE,(_,c)=>c?c.toUpperCase():'')})camelize('你好-world')//"helloWorld"Vue源码：https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js（第164行）5.确定JS运行环境与前台-end随着快速发展，JavaScript代码可能会运行在不同的运行时环境中。为了更好的适应各种运行环境，需要判断当前代码是在什么运行环境下执行的。我们来看看Vue是如何判断运行环境的。Vue源码：https://github.com/vuejs/vue/blob/6fe07ebf5ab3fea1860c59fe7cdd2ec1b760f9b0/src/shared/util.js（第6行）相信我，多读源码，你会有意想不到的收获。
