从零开始学前端 - 23. JS Glabal 对象常用属性和方法

作者: 她不美却常驻我心
博客地址: https://blog.youkuaiyun.com/qq_39506551
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

JS中 Window 和 Glabal的区别

   Window 不只是 BOM 的核心，同时也是客户端 JS ，即浏览器的核心对象 ，它表示浏览器的一个实例对象。而在浏览器中，Window 可以使 JS 访问浏览器窗口，同时也代表着 Global 对象。

  Global 对象是 ECMAScript 规定的一个内部对象。它是一个相当特别的对象，因为这个对象是不存在的，无法直接访问，目的在于将所有的全局方法收集到一个对象中。在 JS 中不属于任何其他对象的属性和方法，都属于它的属性和方法，我们直接使用该对象的属性和方法即可。

  所以说，事实上并不存在全局变量和全局函数，所有在全局作用域定义的变量和函数，都是 Global 对象的属性和方法，而在浏览器环境下，Window 就代表着 Global ，所以我们可以将 Window 看做是全局作用域，在网页中定义的任何一个对象、变量和函数，都以 Window 作为其 Global 对象。

一、Glabal 对象

  在 JS 中，有那么一个对象，它的所有属性可以在程序中的任何地方调用、访问，并且所有在全局创建的变量常量都会绑定在这个对象上，那么这一个对象就是全局对象 Glabal 。

  在浏览器环境中，全局对象就是 Window 对象。Glabal 和 Window 对象结合，相当全局对象寄生于 Window 对象中，可以通过访问 Window 对象访问 Glabal 对象。

  在服务端环境 node.js 中，全局对象就是 Global 对象自身，可以通过 Global 对象访问全局对象。

  所以我们为了使同一段代码能够在各种环境，都能取到顶层对象，现在一般是使用 this 变量，但是仍然具有局限性。

二、Glabal 对象的属性

三、Global 对象的方法

1. encodeURI() URI编码

  语法：encodeURI(String)
  作用：对统一资源标识符(URI)进行编码，并返回编码后的URI字符串。
  实例：

var str = "http://www.test.com/中文"
console.log(encodeURI(str));		// http://www.test.com/%E4%B8%AD%E6%96%87
console.log(encodeURI(encodeURI(str)));		// http://www.test.com/%25E4%25B8%25AD%25E6%2596%2587

• 该函数不会对 : 、/ 、 ; 和 ? 进行编码；

  假设网址中含有中文字符，如果不进行编码直接使用，非英文字符会按照相应的字符集进行编码提交到服务器，服务器会按照配置的字符集进行解码，当服务器配置的字符集与相应的字符集不一致时，就会造成乱码的现象。

  如果只进行一次 encodeURI，得到的是 UTF-8 形式的 URL ，Tomcat 接收之后会自动解码一次，如果 Tomcat 设置的编码格式如果不是 UTF-8 的话，获得的参数是乱码的情况。这个时候服务器端通过 request.getParameter() 解码查询参数(通常是iso-8859-1)就会得到乱码。

  如果进行两次 encodeURI ，第一次编码得到的是 UTF-8 形式的URL，第二次编码得到的依然是 UTF-8 形式的URL ，但是在效果上相当于首先进行了一次UTF-8编码(此时已经全部转换为 ASCII 字符)，再进行了一次 iso-8859-1 编码。在服务器端，首先通过 request.getParameter() 自动进行第一次解码得到 ASCII 字符，然后再使用 UTF-8 进行第二次解码，通常使用 java.net.URLDecoder("","UTF-8") 方法。

  设置 Tomcat 编码
  设置 web.xml 编码

  而直接在浏览器地址栏中输入中文的话，会以浏览器默认的编码集进行编码，如果是前后端分离的项目，可以通过设置 Nginx 等代理服务器让项目可以支持中文路径，详细内容放在后面 Nginx 的教程里在讲解，先提供一下设置 Nginx 编码为 UTF-8 的配置：

server {
	listen       80;
	server_name  localhost;
	charset utf-8;		// 设置编码格式
	
}

2. decodeURI() URI编码

  语法：decodeURI(String)
  作用：对已编码的统一资源标识符(URI)进行解码，并返回其非编码形式。
  实例：

var str = "http://www.test.com/%25E4%25B8%25AD%25E6%2596%2587"
console.log(encodeURI(str));		// http://www.test.com/%E4%B8%AD%E6%96%87
console.log(encodeURI(encodeURI(str)));		// http://www.test.com/中文

• 专门用于对 encodeURI 方法加密的字符进行解码。

3. eval() 用于计算并执行以字符串表示的JavaScript代码。

  语法：eval(code)
  作用：用于计算并执行以字符串表示的代码，使其可以动态执行 JS 源代码。
  实例：

eval("var a = 1");		// 声明变量
eval("1 + 2");			// 让字符串进行计算
eval("fn()");			// 执行方法
eval("({ a: 1, b: 2 })");	// 声明对象时需要在外部增加括号

• 如果传入 eval 方法内的参数不合法，将会引发程序错误，所以应注意搭配 try_catch 来使用；
• 通过该方法执行代码时，作用域不会发生改变；
• 使用该方法执行第三方提供的代码时，应确保其来源是安全可信的，存在一定的安全隐患。

4. isFinite() 用于判断指定数字是否是有限值

  语法：isFinite(Number)
  作用：如果指定的数字为 NaN、正负 infinity，则返回 false，其他数字均返回 true。
  实例：

isFinite(1);			// true
isFinite(-1);			// true
isFinite(NaN);			// false
isFinite(Number.NEGATIVE_INFINITY);		// false
isFinite(Number.POSITIVE_INFINITY );	// false
isFinite(undefined);	// false
isFinite("String");		// false

• 只能检测数字类型，当不是数字类型时，均返回 false；

4. isNaN() 判断数字是否是非数字值

  语法：isNaN(Number)
  作用：用于判断指定数字是否是非数字值 NaN
  实例：

isNaN(1);			// false
isNaN(-1);			// false
isNaN(NaN);			// true
isNaN(Number.NEGATIVE_INFINITY);		// false
isNaN(Number.POSITIVE_INFINITY );	// false
isNaN(undefined);	// true
isNaN("String");		// true

5. parseFloat() 解析字符串并返回浮点数

  语法：parseFloat(Number)
  作用：解析一个字符串并返回一个浮点数
  实例：

parseFloat("0.1");		// 0.1
parseFloat("0.1abc");	// 0.1
parseFloat("1");		// 1
parseFloat("a123");		// NaN 

• 字符串中只返回第一个数字。
• 开头和结尾的空格是允许的。
• 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。

6. parseInt() 解析字符串并返回整数

  语法：parseInt(Number，radix)
  作用：将字符串按照指定的进制转换为整数
  实例：

parseInt("0.1");		// 0
parseInt("1.1");		// 1
parseInt("1.a");		// 1
parseInt("a123");		// NaN 
parseInt("10",2);		// 2  二进制转十进制	
parseInt("10",4);		// 4  四进制转十进制	
parseInt("10",8);		// 8  八进制转十进制

• radix 用于表示 Number 的进制，取值应该介于 [2, 36] 之间；
• radix 若不存在，Number的前缀为 0x 则视为十六进制；前缀是 0 视为八进制；其余情况为十进制；
• parseInt 会向下取整，并不会四舍五入；

7. Number() 转换为数字类型

  语法：Number(Object)
  作用：将参数转换为数字类型并返回
  实例：

Number(true);		// 1
Number(false);		// 0 
Number(new Date());		// 1596180814659 转换为时间戳
Number("123");		// 123
Number(null);		// 0
Number(undefined);	// NaN

• 如果对象的值无法转换为数字，返回 NaN；
• 如果参数是 Date 对象，返回从 1970 年 1 月 1 日至今的毫秒数；

8. String() 转换为字符串类型

  语法：Number(Object)
  作用：将参数转换为字符串类型并返回
  实例：

String(true);		// "true"
String(false);		// "false"
String(new Date());		// Fri Jul 31 2020 15:36:55 GMT+0800 (中国标准时间)
String("123");		// "123"
String(null);		// "null"
String(undefined);	// "undefined"

9. encodeURIComponent()() 转换为字符串类型

  语法：encodeURIComponent(String)
  作用：对统一资源标识符(URI)的有效组件进行编码，并返回编码后的字符串。

• encodeURI() 不会对本身属于URI的特殊字符进行编码，例如冒号、正斜杠、问号和井字号；
• encodeURIComponent() 则会对它发现的任何非标准字符进行编码。

10. decodeURIComponent() URI编码

  语法：decodeURIComponent(String)
  作用：对统一资源标识符(URI)的一个已编码的组件进行解码，并返回其非编码形式。

• 专门用于对 encodeURIComponent 方法加密的字符进行解码。

---

  感谢大家的观看，点赞和收藏，我们下篇博客再见，麻烦动动您的小手帮忙点个赞和收藏，这对博主而言十分重要，谢谢！

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。
转载请附带作者信息及出处。您的评论和关注是我更新的动力!

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号，我会定期更新前端的相关技术文章，欢迎大家前来讨论学习。

都看到这里了，三连一下呗~~~。点个收藏，少个 Bug 。