从Vue源代码中学到的5个JavaScript技巧

1.确定任何对象的特定类型

众所周知，JavaScript中有六种原始数据类型（布尔，数字，字符串，空值，未定义，符号）和对象数据类型。但是您知道对象数据类型可以细分为许多种子类型吗？对象可以是数组，函数，映射等。如果要获取对象的特定类型，该怎么办？

在讨论之前，让我们看另一个问题：

Object.prototype.toString.call(arg)和之间有什么区别String(arg)？

这两个表达式都试图将参数转换为字符串，但是它们之间存在差异。

String(arg)将尝试调用arg.toString()或arg.valueOf()，因此，如果arg或arg原型重写两个方法，则Object.prototype.toString.call(arg)和String(arg) 将获得不同的结果。

在这种情况下，String(arg)并Object.prototype.toString.call(arg)有同样的效果。

const _toString=Object.prototype.toString
var obj = {}obj.toString=（）=>'111'obj.toString（）// 111
_toString.call（obj）// [object Object]/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（）删除两侧的字符。

函数toRawType（值）{
const _toString=Object.prototype.toString
return _toString.call（value）.slice（8，-1）
}toRawType（null）//“空”
toRawType（/sdfsd/）//“RegExp”

使用上面的函数，我们可以获得JavaScript变量的类型。

您可以在以下位置找到此功能是Vue源代码：

（第62行）

2.缓存功能计算结果

如果有这样的功能：

function computed(str) {    
    // Suppose the calculation in the funtion is very time consuming        
    console.log('2000s have passed')
    return 'a result'
}

我们要缓存函数操作的结果。以后调用时，如果参数相同，则将不再执行该函数，但是将直接返回缓存中的结果。我们能做什么？

我们可以编写一个cached函数来包装目标函数。该缓存函数将目标函数作为参数，并返回一个新的包装函数。内部cached功能，我们可以缓存与先前的函数调用的结果Object或Map。

这是一个例子：

function cached(fn){

// Create an object to store the results returned after each function execution.

const cache =Object.create(null);



// Returns the wrapped function

return functioncachedFn(str) {



// If the cache is not hit, the function will be executed

if( !cache[str] ) {

let result =fn(str);



// Store the result of the function execution in the cache

cache[str] = result;

}



return cache[str]

}

}

您可以在以下位置找到此功能是Vue源代码：

（第153行）

3.将hello-world样式转换为helloWorld样式

当我们需要在大型项目上进行协作时，必须使用通用的代码样式。有些人可能习惯于写作helloWorld，有些人可能习惯于写作hello-world。为了解决这个问题，我们可以编写一个统一转换hello-world为的函数helloWorld。

const camelizeRE = /-(\w)/g
const camelize = cached((str) => {
  return str.replace(camelizeRE, (_, c) => c ? c.toUpperCase() : '')
})
camelize('hello-world')
// "helloWorld"

（第164行）

4.确定JS运行环境

如今，随着前端的快速发展，我们的JavaScript代码可能会在不同的运行时环境中执行。为了更好地适应各种运行时环境，我们需要确定当前代码在哪个运行时环境中执行。让我们看一下Vue如何确定运行环境：

constinBrowser=typeofwindow !== 'undefined'

constinWeex=typeofWXEnvironment!== 'undefined' && !!WXEnvironment.platform

constweexPlatform=inWeex&&WXEnvironment.platform.toLowerCase()

const UA =inBrowser&&window.navigator.userAgent.toLowerCase()

constisIE= UA && /msie|trident/.test(UA)

const isIE9 = UA &&UA.indexOf('msie9.0') > 0

constisEdge= UA &&UA.indexOf('edge/') > 0

constisAndroid= (UA &&UA.indexOf('android') > 0) || (weexPlatform=== 'android')

constisIOS= (UA && /iphone|ipad|ipod|ios/.test(UA)) || (weexPlatform=== 'ios')

constisChrome= UA && /chrome\/\d+/.test(UA) && !isEdge

constisPhantomJS= UA && /phantomjs/.test(UA)

constisFF= UA &&UA.match(/firefox\/(\d+)/)

您可以在以下位置找到此功能是Vue源代码：

（第6行）

5.确定函数是本机函数还是用户定义的函数

众所周知，JavaScript中有两种功能，一种由主机环境提供，另一种由用户定制。当两个函数转换为字符串时，它们具有不同的结果。

Array.isArray.toString() // "function isArray() { [native code] }"
function fn(){} 
fn.toString() // "function fn(){}"

本地函数toString的结果始终为functionfnName() { [native code] }格式。我们可以用它来区分它们。

您可以在以下位置找到此功能是Vue源代码：

（第58行）