javaScript之全局函数-CSDN博客

在我们的日常开发中，经常会用到一些javaScript的全局函数，这些函数不属于任何的内置数据类型对象，它们只属于window。每个全局函数都有自己的用法，和自己的特点，那么哪些是常用的，哪些是不常用的，该如何用好这些方法呢，下面开始我们的分享：

parseFloat(),parseInt()
eval()
isNaN()
escape(),unescape()
alert(),confirm(),prompt()
getComputedStyle()
setTimeout(),setInterval(),clearTimeout(),clearInterval()
Number(),String()
undefined,NaN,
typeof, instanceof

parseFloat(),parseInt()解析字符串数字

parseFloat()和parseInt()接收一个参数，解析字符串里的数字字符的，从左至右开始解析，把解析到的数字字符返回出来，并转换为Number()数据类型，而两个方法的区别则是，parseInt()只可以解析整数数字字符，啥意思呢，意思就是parseInt()解析的这个字符串只要遇到一个不是数字字符的，则停止解析，然后返回解析到的数字字符；而parseFloat()同样可以解析整数数字字符，还可以解析小数数字字符，注意：小数点只可以解析一次，小数点如果已经在该字符串解析过一次，再次解析到时则同样当作非数字字符，停止解析，返回解析到的数字字符，如果未解析到小数点就解析到其他非数字字符，同样停止解析，返回解析到的数字字符。

var numStr1 = '128壹贰捌'
parseInt(numStr1)    //返回： 128
parseFloat(numStr1)    //返回： 128

var numStr2 = '256.04.89ABC'
parseInt(numStr2)    //返回： 256
parseFloat(numStr2)    //返回： 256.04

// 如果解析的变量是未定义则返回NaN
var numStr3
parseInt(numStr3)    //返回： NaN
parseFloat(numStr3)    //返回： NaN
复制代码

注意：parseInt(),parseFloat()在ES6的语法规范里，这两个方法已经移植给了Number对象，也就是说，以后的使用就是Number.parseInt(),Number.parseFloat()。

eval()解析js字符串

eval()同样是用来解析的，不过它解析的是js代码字符串，把js字符串转解析为有效的js代码，并且把解析到的js代码执行，也就是说，这个方法里它有两步操作，一：解析字符串，二：执行js代码。当然我们查看结果的时候，只有一个结果，那就是它解析完并且执行后的结果：

var count = '2+2'
eval(count) // 输出： 4

var mul = '4*4/2'
eval(mul) // 8
复制代码

`看了上面的代码相信大家就理解了，那么它只能用作这种计算的代码吗？NO，只要解析js字符串是有效的，任何js字符串它都可以解析并执行：

eval('Math.max(4, 8, 10, 5, 3, 9)') // 输出 10

var count = '[1, 3, 5, 7, 9].reduce(function (val, num){return val + num})'
eval(count)  // 25
复制代码

通过上面的代码相信大家可以更加理解eval的用法,eval虽然感觉比较实用，但是实际应用不算多，而且一般也不推荐使用，不推荐使用主要的一个原因就是关于性能的问题。

isNaN()

isNaN()检测字符是否是非数字字符，非数字字符返回true,数字字符返回false `

isNaN(1) // false
isNaN('2')  // false
isNaN('a')  // true
复制代码

escape(),unescape()字符编码解码

escape(),unescape()这两个方法是一对的方法，escape()是对字符进行编码，unescape()是对编码过的字符进行解码，通俗的讲就是加密和解密拉。注意：escape()该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。 `

escape(13579) // 13579
escaps('abcdefg')   // abcdefg
var encryption = escape('一三五七九')  // %u4E00%u4E09%u4E94%u4E03%u4E5D
var decrypt = unescape(encryption)  // 一三五七九
复制代码

看了上面的例子和注意，大家似乎发现，这两个方法似乎没有什么卵用，事实证明，它们确实没有乱用，因为一般情况下，在我们开发的过程中，主要加密对象，或者说加密字符就是账号和密码，而账号和密码一般都是字母和数字组合起来的，但是这方法偏偏不能对字母和数字加密，还有一点，escape()加密的字符破解成本太低了，就像脱裤子放屁一样，意义不大。

alert(),confirm(),prompt()对话框

这三个方法相信大家都是耳熟能详,特别是alert()，在各种调试的时候，经常使用。这三个方法都接收一个参数，alert()就是把参数提示出来，confirm()参数就是用来提示用户做什么确认操作的，点击确定就返回true,点击取消就返回false，prompt()的参数也是提示性，prompt()弹框带个输入框，点击确定就可以获取到输入框的内容，点击取消就返回null。 `

alert(123) // 123
confirm('点击我试试看')   // 点确定返回true,点取消返回false
复制代码

`注意：这三个方法都有一个共同缺点，那就是浏览器运行到这三个方法时，你不进行操作，浏览器都不会运行后面的代码。只有当你点击确定或者取消时，才会继续进行后续代码运行。

getComputedStyle()

getComputedStyle()方法，用来返回浏览器计算后得到的最终样式规则。它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。

<style type="text/css">
		#div1{
			width: 100px;
			height: 100px;
			border: 1px solid #6495ED;
			background-color: cornflowerblue;
			text-align: center;
			line-height: 100px;
		}
</style>
<body>
    <div id="div1"></div>
</body>
<script type="text/javascript">
    var div = document.getElementById('div1')
	console.log(getComputedStyle(div))
	// 输出 CSSStyleDeclaration实例对象
	//CSSStyleDeclaration {0: "animation-delay", 1: "animation-direction", 2: "animation-duration", 3: "animation-fill-mode", 4: "animation-iteration-count", 5: "animation-name", 6: "animation-play-state", 7: "animation-timing-function",...}
<script>
复制代码

getComputedStyle()方法其实还可以接收第二个参数，是用来获取元素的伪类信息的，但是我个人觉得没有什么卵用，所以这里不做演示了，而且参数二也是个可选参数，可传可不传。那么问题来了，如何获取具体的样式值呢，其实上面我们已经说了，getComputedStyle()会返回一个CSSStyleDeclaration实例对象，既然是对象，那你就用.或者[]的方式取里面的值就可以了： `

console.log(getComputedStyle(div).width)    // 100px
console.log(getComputedStyle(div)['height']) // 100px
复制代码

注意：getComputedStyle()方法并不兼容IE9以下的浏览器，那也就是说这个方法在IE9以下不能够用，那么在IE9以下用什么方法呢，在IE下面有个currentStyle的方法，不同的是，IE的这个currentStyle是属于dom元素上的方法,用法如下： `

console.log(div.currentStyle)    // 返回一个 MSCurrentStyleCSSPropertiesPrototype实例对象
console.log(div.currentStyle['width']) // 100px
复制代码

当然，如果要想兼容，那么封装一个方法就行了：

function getCss (el, attr) {
if (el.currentStyle) {
	return el.currentStyle[attr];
} else {
	return getComputedStyle(el, null)[attr];
}
复制代码

} `

setTimeout(),setInterval(),clearTimeout(),clearInterval()定时器

setTimeout(),setInterval()是javaScript里计时器方法，setTimeout()是延时方法，setInterval()是间隔多长时间重复执行方法。clearTimeout(),clearInterval()顾名思义，就是清除计时器的方法了。在ES6之前，setTimeout(),setInterval()是js唯一的异步执行方法。setTimeout(),setInterval()方法接收两个必选参数，参数一是匿名函数，参数二是执行时间： `

<button id="btn1">停止</button>

<script type="text/javascript">
var t = setInterval(function(){
    console.log(1)
},3000) // 每隔3秒钟输出一次1

var y = setTimeout(function(){
    console.log(1)
},3000) // 隔3秒钟之后输出一次1

// 点击按钮则会停止计时器
document.getElementById('btn1').onclick = function () {
    clearInterval(t)
}
</script>
复制代码

setTimeout(),setInterval()`其实还有第三个可选参数，第三个可选参数是给参数一匿名函数的参数。

setInterval(function(str){
    console.log(str)    // 每隔三秒钟输出：'一一二二三三'
}, 3000, '一一二二三三')
复制代码

Number(),String()

Number(),toString()也是简单易懂，Number()把数字字符转换为Number数据类型，如果传入的参数不算数字字符，那么就返回NaN。String()则是把对象转换为字符串类型： `

Number('10')    // 10
Number('A')     // NaN

String([1, 2, 3])   // '[1, 2, 3]'
复制代码

有一点需要明白的是，这两个方法虽然可以作为全局方法来使用，但是它们本身也各自代表一个javaScript的基础数据类型，是可以使用new关键字实例化的。

undefined,NaN,

undefined无法使用 for/in 循环来枚举 undefined 属性，也不能用 delete 运算符来删除它。 undefined 不是常量，可以把它设置为其他值。当尝试读取不存在的对象属性时也会返回 undefined。 `

let n 
console.log(n) // undefined
复制代码

NaN无法使用 for/in 循环来枚举 NaN 属性，也不能用 delete 运算符来删除它。 NaN 不是常量，可以把它设置为其他值. `

Number('A')     // NaN
复制代码

typeof, instanceof运算符 这两个单词，它们不是属性，也不是方法，而是运算符，两个运算符都是用来检测数据类型的。typeof运算符只能用来检测基础数据类型的数据，如果检测引用类型的数据，只会输出'object' `

var arr = [1,2,3], obj ={id: 1};

function aFn () {
	console.log(123)
}
console.log(typeof 1)   // number
console.log(typeof '1')   // string
console.log(typeof true)   // boolean
console.log(typeof aFn) // function
console.log(typeof arr) // object
console.log(typeof obj) // object
复制代码

`因此 ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题，用于识别正在处理的对象的数据类型，与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型，通常来讲，使用 instanceof 就是判断一个实例是否属于某种类型：

var arr = [1,2,3], obj ={id: 1};

function aFn () {
	console.log(123)
}
console.log(aFn instanceof Function) // true
console.log(arr instanceof Array) // true
console.log(arr instanceof Object) // true
复制代码

`instanceof 不只是可以用来检测数据类型，还能用来检测原型的继承关系：

function Afn () {
			this.a1 = function() {
				console.log('a1')
			}
		}
		function Bfn () {}
		Bfn.prototype = new Afn();  // 原型继承
		var a = new Afn()
		var b = new Bfn();
		a.a1()  // a1
		b.a1()  // a1
		
	console.log(b instanceof Afn)   // 检测继承关系  true
	console.log(b instanceof Bfn)   // 检测所属实例  true
复制代码

` instanceof的应用其实涉及到很多知识点，更多的应用就交给大家一起探讨学习吧，我这里不做过多赘述，因为本篇章本来也是讲解全局函数的。之所以会讲解到这俩运算符，也是因为有小白同学问到了，所以追加上来作为分享。