Codes►前端

00 js对象

js对象

菜鸟 JavaScript 对象

JavaScript 的全局属性和函数

js的全局属性：

  • Infinity
  • NAN
  • undefined
    js的全局函数：
  • decodeURI()
  • decodeURIcomponent()
  • encodeURI
  • encodeURIcomponent()
  • escape()
  • eval()
  • isFinite()
  • isNAN()
  • Number()
  • parseFloat()
  • parseInt()
  • String()
  • unescape()
  • Bigint()

JavaScript 中对象的分类

在 JavaScript 中，对象可以按照多种方式进行分类，以下是一些常见的分类方式：

按照对象的来源分类

  • 内置对象
    • 全局对象：Object 是 JavaScript 中所有对象的原型对象，它定义了所有对象的基本属性和方法。例如，Object.prototype.toString() 方法可以用于获取对象的类型信息。Function 对象用于创建函数，它是所有函数的构造函数。Array 对象用于创建数组，它提供了许多数组操作的方法，如 push()、pop()、map() 等。String 对象用于创建字符串，它有许多字符串处理的方法，如 charAt()、indexOf()、split() 等。Number 对象用于创建数字，它有一些数学运算的方法和常量，如 Number.MAX_VALUE、Number.isNaN() 等。Boolean 对象用于创建布尔值，它有一些布尔运算的方法，如 Boolean.toString() 等。
    • 其他内置对象：Math 对象提供了数学运算的方法和常量，如 Math.PI、Math.sin()、Math.random() 等。Date 对象用于创建日期和时间，它有许多日期和时间处理的方法，如 getDate()、setFullYear()、toLocaleString() 等。RegExp 对象用于创建正则表达式，它用于字符串的匹配、查找和替换等操作，如 test()、exec() 等方法。
  • 宿主对象
    • 在浏览器环境中，宿主对象是由浏览器提供的，用于操作浏览器窗口、文档等的 API。例如，window 对象是浏览器窗口的顶层对象，它包含了许多属性和方法，如 alert()、confirm()、setTimeout() 等。document 对象用于操作 HTML 文档，它有许多属性和方法，如 getElementById()、getElementsByTagName()、createElement() 等。navigator 对象提供了浏览器的信息，如浏览器的名称、版本等。history 对象用于操作浏览器的历史记录，如 back()、forward()、pushState() 等方法。
    • 在 Node.js 环境中，宿主对象是由 Node.js 提供的，用于操作文件系统、网络等的 API。例如，fs 模块提供了文件系统操作的 API，如 fs.readFile()、fs.writeFile()、fs.readdir() 等。http 模块用于创建 HTTP 服务器和客户端，如 http.createServer()、http.request() 等方法。path 模块用于处理和转换文件路径，如 path.join()、path.resolve()、path.basename() 等方法。
  • 自定义对象
    • 通过对象字面量创建：可以直接使用花括号 {} 创建一个对象，并在其中定义属性和方法。例如，let person = {name: '张三', age: 20, sayHello: function() {console.log('你好，我是' + this.name);}}，这种方式创建的对象结构简单，适合创建单个对象。
    • 通过构造函数创建：可以定义一个构造函数，然后使用 new 关键字创建对象实例。例如，function Person(name, age) {this.name = name; this.age = age; this.sayHello = function() {console.log('你好，我是' + this.name);};}，然后通过 let p1 = new Person('张三', 20) 创建对象。这种方式可以创建多个具有相同结构的对象实例，便于实现对象的复用。
    • 通过工厂函数创建：工厂函数是一种创建对象的函数，它内部使用对象字面量或其他方式创建对象，并返回创建的对象。例如，function createPerson(name, age) {let person = {name: name, age: age}; person.sayHello = function() {console.log('你好，我是' + this.name);}; return person;}，然后通过 let p1 = createPerson('张三', 20) 创建对象。这种方式可以隐藏对象的创建细节，提供统一的创建接口。

按照对象的属性和方法分类

  • 普通对象
    • 这种对象主要包含一些普通的属性和方法，用于存储数据和实现一些简单的功能。例如，let book = {title: 'JavaScript高级程序设计', author: '尼古拉斯·泽卡斯', pages: 300, getInfo: function() {return this.title + ' - ' + this.author + ' - ' + this.pages + '页';}}，这个对象主要包含书籍的标题、作者、页数等属性，以及一个获取书籍信息的方法。
  • 函数对象
    • 在 JavaScript 中，函数也是对象，可以像普通对象一样拥有属性和方法。例如，function add(a, b) {return a + b;}，这个函数对象本身可以添加属性和方法，如 add.count = 0; add.incrementCount = function() {this.count++;};。同时，函数对象还可以作为构造函数创建其他对象，如上面提到的通过构造函数创建对象实例的方式。
  • 数组对象
    • 数组是一种特殊类型的对象，用于存储有序的数据集合。数组对象具有许多特有的属性和方法，如 length 属性表示数组的长度，push() 方法用于向数组末尾添加元素，pop() 方法用于移除数组末尾的元素，shift() 方法用于移除数组开头的元素，unshift() 方法用于向数组开头添加元素，sort() 方法用于对数组元素进行排序等。例如，let arr = [1, 2, 3]; arr.push(4); console.log(arr); // 输出 [1, 2, 3, 4]。

按照对象的用途分类

  • 数据对象
    • 主要用于存储和管理数据，这些数据可以是简单的值，也可以是复杂的数据结构。例如，let user = {id: 1, username: 'zhangsan', password: '123456', roles: ['admin', 'user']}，这个对象用于存储用户的信息，包括用户 ID、用户名、密码和角色等数据。
  • 工具对象
    • 提供一些工具方法，用于实现特定的功能，如数据处理、格式转换、验证等。例如，let utils = {formatDate(date) {return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();}, validateEmail(email) {return /\S+@\S+\.\S+/.test(email);}}，这个对象提供了格式化日期和验证电子邮件地址的工具方法。
  • 控制对象
    • 用于控制程序的流程、状态等。例如，在一个游戏程序中，可以有一个控制对象用于控制游戏的开始、暂停、结束等状态，如 let gameController = {start() {console.log('游戏开始');}, pause() {console.log('游戏暂停');}, end() {console.log('游戏结束');}}。

JavaScript 的内置对象

JavaScript 的内置对象是预定义的对象，提供了各种实用的方法和属性，用于执行常见的任务和操作。这些内置对象可以分为几类，包括全局对象、函数对象、数组对象、日期对象、正则表达式对象、错误对象、数学对象、JSON 对象等。以下是一些常见的内置对象及其用法：

1. 全局对象（Global Objects）

全局对象是 globalThis，在浏览器中是 window，在 Node.js 中是 global。全局对象提供了全局变量和函数的访问。

1
2
console.log(globalThis); // Window 或 global
console.log(window === globalThis); // true (在浏览器中)

2. Object 对象

Object 是 JavaScript 中所有对象的基类，提供了许多用于操作对象的方法和属性。

1
2
3
4
5
6
7
const obj = {
  name: 'Alice',
  age: 30
};
console.log(Object.keys(obj)); // ['name', 'age']
console.log(Object.values(obj)); // ['Alice', 30]
console.log(Object.entries(obj)); // [['name', 'Alice'], ['age', 30]]

3. Function 对象

Function 是所有函数的构造函数，提供了创建和操作函数的方法。

1
2
const greet = new Function('name', 'console.log(`Hello, ${name}!`);');
greet('Alice'); // Hello, Alice!

4. Array 对象

Array 用于表示有序的集合，提供了许多用于操作数组的方法。

1
2
3
4
const arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 5
console.log(arr.map(x => x * 2)); // [2, 4, 6, 8, 10]
console.log(arr.filter(x => x % 2 === 0)); // [2, 4]

5. Date 对象

Date 用于表示日期和时间，提供了多种方法来操作日期和时间。

1
2
3
4
5
const now = new Date();
console.log(now.toISOString()); // 2024-10-01T12:00:00.000Z
console.log(now.getFullYear()); // 2024
console.log(now.getMonth()); // 9 (0-11 表示 1-12 月)
console.log(now.getDate()); // 1

6. RegExp 对象

RegExp 用于表示正则表达式，提供了用于字符串匹配、替换等操作的方法。

1
2
3
const regex = /hello/i;
console.log(regex.test('Hello World')); // true
console.log('Hello World'.match(regex)); // ['Hello']

7. Error 对象

Error 用于表示错误信息，提供了多种错误类型，如 SyntaxError、ReferenceError、TypeError 等。

1
2
3
4
5
6
try {
  throw new Error('Something went wrong');
} catch (e) {
  console.log(e.message); // Something went wrong
  console.log(e instanceof Error); // true
}

8. Math 对象

Math 提供了基本的数学常量和函数，用于执行数学运算。

1
2
3
console.log(Math.PI); // 3.141592653589793
console.log(Math.sqrt(16)); // 4
console.log(Math.random()); // 0 到 1 之间的随机数

9. JSON 对象

JSON 提供了用于解析和序列化 JSON 数据的方法。

1
2
3
4
5
const obj = { name: 'Alice', age: 30 };
const json = JSON.stringify(obj);
console.log(json); // '{"name":"Alice","age":30}'
const parsedObj = JSON.parse(json);
console.log(parsedObj); // { name: 'Alice', age: 30 }

10. Map 和 Set 对象

Map 和 Set 提供了集合和映射的功能，用于存储键值对和唯一值。

1
2
3
4
5
6
7
const myMap = new Map();
myMap.set('key1', 'value1');
console.log(myMap.get('key1')); // value1
const mySet = new Set();
mySet.add(1);
mySet.add(2);
console.log(mySet.has(1)); // true

11. Symbol 对象

Symbol 用于创建唯一的、不可变的值，常用于对象属性的键，以确保属性名的唯一性。

1
2
const mySymbol = Symbol('mySymbol');
console.log(mySymbol.toString()); // Symbol(mySymbol)

12. Promise 对象

Promise 用于表示异步操作的最终完成或失败，提供了处理异步操作的方法。

1
2
3
4
5
6
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done!'), 1000);
});
promise.then(result => {
  console.log(result); // Done!
});

总结

JavaScript 的内置对象提供了丰富的功能，用于执行各种常见的任务和操作。理解这些内置对象及其方法和属性，可以帮助你更高效地编写和管理 JavaScript 代码。通过合理使用这些内置对象，可以提高代码的可读性和可维护性。

JavaScript 的宿主对象

在 JavaScript 中，宿主对象（Host Objects）是由 JavaScript 运行环境（如浏览器或 Node.js）提供的对象，它们扩展了 JavaScript 语言的核心功能。宿主对象的具体实现和行为取决于运行环境，因此不同环境中的宿主对象可能会有所不同。以下是一些常见的宿主对象及其用法：

1. 浏览器环境中的宿主对象

在浏览器环境中，宿主对象主要由浏览器提供，用于操作 DOM、处理浏览器事件、管理浏览器窗口等。

1.1 window 对象

window 对象是浏览器的全局对象，代表浏览器窗口，提供了访问和操作浏览器窗口的方法和属性。

1
2
3
4
5
console.log(window.innerWidth); // 浏览器窗口的宽度
console.log(window.innerHeight); // 浏览器窗口的高度
window.alert('Hello, World!'); // 弹出警告框
window.confirm('Are you sure?'); // 弹出确认框
window.prompt('Enter your name:'); // 弹出输入框

1.2 document 对象

document 对象代表当前加载的 HTML 文档，提供了访问和操作文档的方法和属性。

1
2
3
4
5
6
7
8
const title = document.title; // 获取文档标题
document.title = 'New Title'; // 设置文档标题
const body = document.body; // 获取文档的 body 元素
const head = document.head; // 获取文档的 head 元素
const element = document.getElementById('myElement'); // 通过 ID 获取元素
const elements = document.getElementsByClassName('myClass'); // 通过类名获取元素
const elements = document.getElementsByTagName('div'); // 通过标签名获取元素
const elements = document.querySelectorAll('.myClass'); // 通过 CSS 选择器获取元素

1.3 location 对象

location 对象提供了访问和操作当前 URL 的方法和属性。

1
2
3
4
5
6
console.log(window.location.href); // 获取当前 URL
console.log(window.location.pathname); // 获取当前路径
console.log(window.location.search); // 获取查询字符串
console.log(window.location.hash); // 获取锚点
window.location.href = 'https://example.com'; // 跳转到新 URL
window.location.reload(); // 重新加载当前页面

1.4 navigator 对象

navigator 对象提供了访问浏览器信息的方法和属性。

1
2
3
console.log(navigator.userAgent); // 获取用户代理字符串
console.log(navigator.platform); // 获取操作系统平台
console.log(navigator.language); // 获取浏览器语言

1.5 history 对象

history 对象提供了访问和操作浏览器历史记录的方法和属性。

1
2
3
4
5
6
console.log(history.length); // 获取历史记录的长度
history.back(); // 返回上一页
history.forward(); // 前进到下一页
history.go(-1); // 返回上一页
history.pushState({ state: 'new' }, 'New Title', 'new-url.html'); // 添加新历史记录
history.replaceState({ state: 'new' }, 'New Title', 'new-url.html'); // 替换当前历史记录

2. Node.js 环境中的宿主对象

在 Node.js 环境中，宿主对象主要由 Node.js 提供，用于文件系统操作、网络通信、模块管理等。

2.1 global 对象

global 对象是 Node.js 的全局对象，类似于浏览器中的 window 对象，提供了全局变量和函数的访问。

1
2
console.log(global.process); // 获取 process 对象
console.log(global.Buffer); // 获取 Buffer 对象

2.2 process 对象

process 对象提供了访问和操作当前 Node.js 进程的方法和属性。

1
2
3
4
5
console.log(process.version); // 获取 Node.js 版本
console.log(process.platform); // 获取操作系统平台
console.log(process.cwd()); // 获取当前工作目录
console.log(process.env); // 获取环境变量
process.exit(0); // 退出当前进程

2.3 require 函数

require 函数用于加载模块，是 Node.js 模块系统的核心。

1
2
3
const fs = require('fs'); // 加载文件系统模块
const http = require('http'); // 加载 HTTP 模块
const myModule = require('./myModule'); // 加载自定义模块

2.4 module 和 exports 对象

module 和 exports 对象用于定义和导出模块。

1
2
3
4
5
6
7
8
// myModule.js
const myFunction = () => {
  console.log('Hello, World!');
};
exports.myFunction = myFunction;
// main.js
const myModule = require('./myModule');
myModule.myFunction(); // Hello, World!

2.5 Buffer 对象

Buffer 对象用于处理二进制数据，是 Node.js 中处理文件和网络数据的核心。

1
2
const buffer = Buffer.from('Hello, World!', 'utf-8');
console.log(buffer.toString('utf-8')); // Hello, World!

3. 其他环境中的宿主对象

除了浏览器和 Node.js，其他 JavaScript 运行环境（如 Web Workers、Service Workers、Deno 等）也会提供特定的宿主对象。

3.1 Web Workers

Web Workers 允许在后台线程中运行 JavaScript 代码，提供了 Worker 和 SharedWorker 对象。

1
2
3
4
5
6
7
8
9
10
11
// 主线程
const worker = new Worker('worker.js');
worker.onmessage = (event) => {
  console.log('Message from worker:', event.data);
};
worker.postMessage('Hello, Worker!');
// worker.js
self.onmessage = (event) => {
  console.log('Message from main thread:', event.data);
  self.postMessage('Hello, Main Thread!');
};

3.2 Service Workers

Service Workers 是一种在浏览器后台运行的脚本，可以拦截和处理网络请求，提供离线支持和推送通知等功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(() => {
      console.log('Service Worker registered');
    })
    .catch(() => {
      console.error('Service Worker registration failed');
    });
}
// service-worker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

总结

宿主对象是由 JavaScript 运行环境提供的对象，用于扩展 JavaScript 语言的核心功能。不同环境中的宿主对象会有所不同，但它们都提供了丰富的功能，用于操作 DOM、处理浏览器事件、管理文件系统、进行网络通信等。理解这些宿主对象及其方法和属性，可以帮助你更有效地编写和管理 JavaScript 代码，适应不同的运行环境。

function对象和object对象的区别

  1. 从原型链角度
    • 在JavaScript中，Function 对象是所有函数的构造函数。而 Object 对象是所有对象的根构造函数。从原型链角度来看，Function 的原型（Function.prototype）是一个空函数（即 function(){}），这个空函数的原型（Function.prototype.prototype）指向 Object.prototype。也就是说，Function 对象的原型链上有一个指向 Object.prototype 的链接。这使得函数（由 Function 构造）也继承了 Object 对象的一些基本属性和方法，比如 toString()、valueOf() 等。
    • 例如，当你创建一个函数function myFunc(){};时，myFunc是一个Function实例，同时由于原型链的关系，它也是Object的“后代”。你可以调用myFunc.toString()，它会返回该函数的字符串形式，这是因为toString()方法是从Object.prototype上继承来的。
  2. 从实例化角度
    • Object对象可以用来创建普通的对象。例如，let obj = new Object();会创建一个空对象。这个对象的原型是Object.prototype。
    • 而Function对象是用来创建函数的。当你使用function myFunc(){};或者let myFunc = new Function('console.log("Hello");');创建函数时，myFunc是一个函数对象。函数对象也是对象的一种，所以它也可以用Object对象的方法来操作。比如你可以使用Object.keys(myFunc)来获取函数对象的可枚举属性名（虽然函数对象通常没有可枚举的自身属性）。
  3. 从类型角度
    • 在JavaScript中，函数也是对象。从类型判断的角度，使用typeof运算符对函数进行判断会返回"function"，而对普通对象（由Object构造）进行判断会返回"object"。但是，由于函数是特殊的对象，使用instanceof运算符时，函数实例（即函数对象）既是Function的实例，也是Object的实例。例如： 
      1
      2
      3
      function myFunc(){}
      console.log(myFunc instanceof Function); // true
      console.log(myFunc instanceof Object); // true
      这说明函数对象在类型上同时具有Function和Object的特征。
  4. 从方法和属性共享角度
    • Object对象定义了一些通用的方法和属性，这些方法和属性可以被所有对象（包括函数对象）使用。例如Object.defineProperty()方法可以用来定义对象的属性，无论是普通对象还是函数对象都可以用它来精确地控制属性的特性（如可写性、可枚举性等）。
    • 而Function对象自身也有一些特定的方法和属性，如Function.prototype.apply()、Function.prototype.call()等，这些方法主要用于函数的调用控制，可以让函数在不同的上下文中执行。虽然这些方法是Function特有的，但由于函数也是对象，它们在某种程度上也参与了对象行为的扩展，使得函数对象在调用方式上更加灵活。

JavaScript 内置对象和宿主对象的区别

JavaScript 内置对象和宿主对象有以下主要区别：

定义来源不同

  • 内置对象：是由 JavaScript 语言本身定义和提供的，是 ECMAScript 规范中规定的对象。它们在 JavaScript 引擎初始化时就已经存在，是 JavaScript 语言的核心组成部分，无论在何种 JavaScript 运行环境中（如浏览器、Node.js 等）都会提供这些内置对象。例如，Object、Array、String、Number、Boolean、Function、Math、Date、RegExp 等都是内置对象。
  • 宿主对象：是由 JavaScript 运行环境提供的，不同的运行环境会有不同的宿主对象。在浏览器环境中，宿主对象是由浏览器厂商实现的，用于操作浏览器窗口、文档、历史记录等的 API，如 window、document、navigator、history 等。在 Node.js 环境中，宿主对象是由 Node.js 团队提供的，用于操作文件系统、网络、模块等的 API，如 fs、http、path、module 等。

提供的功能侧重点不同

  • 内置对象：主要提供 JavaScript 语言层面的基本功能和数据结构操作。例如，Object 对象提供了对象的基本操作方法，如 Object.create()、Object.defineProperty() 等，用于创建对象、定义属性等；Array 对象提供了数组的各种操作方法，如 push()、pop()、map()、filter() 等，用于添加、删除、遍历、转换数组元素；String 对象提供了字符串的处理方法，如 charAt()、indexOf()、split()、replace() 等，用于获取字符、查找子串、分割字符串、替换字符等；Math 对象提供了数学运算的方法和常量，如 Math.sin()、Math.cos()、Math.PI 等，用于进行数学计算；Date 对象提供了日期和时间的操作方法，如 getDate()、setFullYear()、toLocaleString() 等，用于获取和设置日期时间、格式化日期时间等。
  • 宿主对象：主要提供与运行环境相关的特定功能。在浏览器环境中，宿主对象的功能侧重于操作网页内容和浏览器行为，如 window 对象提供了弹出对话框、操作窗口大小和位置、管理定时器等方法；document 对象提供了操作 HTML 元素、获取元素信息、创建和修改元素等方法；navigator 对象提供了获取浏览器信息、检测设备特性等方法；history 对象提供了操作浏览器历史记录的方法。在 Node.js 环境中，宿主对象的功能侧重于服务器端的文件操作、网络通信、模块管理等，如 fs 模块提供了读写文件、操作文件系统目录等方法；http 模块提供了创建 HTTP 服务器和客户端、处理 HTTP 请求和响应等方法；path 模块提供了处理文件路径的方法；module 模块提供了模块加载和管理的方法。

兼容性和规范性不同

  • 内置对象：由于是 ECMAScript 规范中定义的，所以在不同的 JavaScript 运行环境中，内置对象的行为和提供的方法相对一致，具有较好的兼容性。开发者在编写代码时，可以放心地使用内置对象提供的标准方法，不用担心在不同的环境中会出现较大的差异。例如，Array.prototype.map() 方法在所有现代浏览器和 Node.js 环境中都可以正常使用，用于对数组元素进行遍历和转换。
  • 宿主对象：不同运行环境提供的宿主对象可能会存在差异。在浏览器环境中，不同浏览器厂商实现的宿主对象可能会有一些细微的差别，虽然现代浏览器大多遵循 W3C 等相关规范，但在一些边缘功能或新特性支持上可能会有所不同。例如，某些较新的 CSS 属性或 HTML5 API 在不同浏览器中的支持程度可能会有差异。在 Node.js 环境中，不同版本的 Node.js 也可能对宿主对象的某些方法或模块的支持有所变化，而且 Node.js 的宿主对象与浏览器环境中的宿主对象完全不同，这是由于它们运行环境的侧重点不同所导致的。

生命周期和作用域不同

  • 内置对象：内置对象在 JavaScript 程序的整个生命周期中都可用，它们是全局可用的，可以在任何地方通过相应的名称访问和使用。例如，可以在函数内部、模块内部或全局作用域中直接使用 Array、String 等内置对象创建实例或调用方法。
  • 宿主对象：宿主对象的生命周期和作用域通常与运行环境的具体上下文有关。在浏览器环境中，宿主对象如 window、document 等与浏览器窗口和文档页面的生命周期紧密相关，当页面加载时可用，当页面关闭或刷新时可能会被销毁或重新初始化。在 Node.js 环境中，宿主对象如 fs、http 等模块在模块被加载时可用，在整个 Node.js 应用程序的生命周期中都可以使用，但它们的作用域通常限制在模块内部或通过模块导出的方式在其他模块中使用。

内置的全局函数

JavaScript 提供了一些内置的全局函数，这些函数在全局作用域中可以直接使用，它们为开发者提供了很多便捷的功能。以下是一些常见的 JavaScript 内置全局函数：

一、解析和格式化数字的函数

（一）parseInt(string, radix)

  • 功能：将一个字符串解析成一个整数。
  • 参数：
    • string：要解析的字符串。
    • radix（可选）：表示字符串的基数（进制），取值范围是 2 到 36。如果不指定该参数，解析时会根据字符串的格式来判断其基数。
  • 返回值：解析后的整数。如果字符串开头不是有效的数字格式，则返回 NaN（Not - a - Number）。
  • 示例： 
    1
    2
    3
    4
    5
    console.log(parseInt("123")); // 输出 123
    console.log(parseInt("0x10")); // 输出 16，因为以 0x 开头，默认是十六进制
    console.log(parseInt("12.34")); // 输出 12，小数点后的部分会被忽略
    console.log(parseInt("abc")); // 输出 NaN
    console.log(parseInt("1010", 2)); // 输出 10，因为是二进制

（二）parseFloat(string)

  • 功能：将一个字符串解析成一个浮点数。
  • 参数：string - 要解析的字符串。
  • 返回值：解析后的浮点数。如果字符串开头不是有效的浮点数格式，则返回 NaN。
  • 示例： 
    1
    2
    3
    4
    console.log(parseFloat("123.45")); // 输出 123.45
    console.log(parseFloat("123")); // 输出 123
    console.log(parseFloat("abc")); // 输出 NaN
    console.log(parseFloat("123.45.67")); // 输出 123.45，第二个小数点后的部分会被忽略

二、编码和解码 URI 的函数

（一）encodeURI(uri)

  • 功能：对 URI（统一资源标识符）进行编码。它会将 URI 中的一些特殊字符（如空格、中文字符等）转换为 % 加上两位十六进制数的形式，以确保 URI 在传输过程中的正确性。
  • 参数：uri - 要编码的 URI 字符串。
  • 返回值：编码后的 URI 字符串。
  • 示例： 
    1
    2
    console.log(encodeURI("http://example.com/search?q=JavaScript教程")); 
    // 输出 http://example.com/search?q=JavaScript%E6%95%99%E7%A8%8B

（二）decodeURI(encodedURI)

  • 功能：对编码后的 URI 进行解码，将 % 加上两位十六进制数的形式还原为原来的字符。
  • 参数：encodedURI - 要解码的编码后的 URI 字符串。
  • 返回值：解码后的 URI 字符串。
  • 示例： 
    1
    2
    console.log(decodeURI("http://example.com/search?q=JavaScript%E6%95%99%E7%A8%8B")); 
    // 输出 http://example.com/search?q=JavaScript教程

（三）encodeURIComponent(uriComponent)

  • 功能：对 URI 组件进行编码。它比 encodeURI 编码更严格，会将更多的字符（如 /、? 等）进行编码。这在编码 URI 的查询字符串参数等组件时非常有用。
  • 参数：uriComponent - 要编码的 URI 组件字符串。
  • 返回值：编码后的 URI 组件字符串。
  • 示例： 
    1
    2
    console.log(encodeURIComponent("http://example.com/path?query=abc")); 
    // 输出 http%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dabc

（四）decodeURIComponent(encodedURIComponent)

  • 功能：对编码后的 URI 组件进行解码。
  • 参数：encodedURIComponent - 要解码的编码后的 URI 组件字符串。
  • 返回值：解码后的 URI 组件字符串。
  • 示例： 
    1
    2
    console.log(decodeURIComponent("http%3A%2F%2Fexample.com%2Fpath%3Fquery%3Dabc")); 
    // 输出 http://example.com/path?query=abc

三、类型转换函数

（一）Number(value)

  • 功能：将一个值转换为数字类型。
  • 参数：value - 要转换的值。
  • 返回值：转换后的数字。如果转换失败，则返回 NaN。
  • 示例： 
    1
    2
    3
    4
    5
    console.log(Number("123")); // 输出 123
    console.log(Number("12.34")); // 输出 12.34
    console.log(Number("abc")); // 输出 NaN
    console.log(Number(true)); // 输出 1
    console.log(Number(false)); // 输出 0

（二）String(value)

  • 功能：将一个值转换为字符串类型。
  • 参数：value - 要转换的值。
  • 返回值：转换后的字符串。
  • 示例： 
    1
    2
    3
    4
    5
    6
    console.log(String(123)); // 输出 "123"
    console.log(String(12.34)); // 输出 "12.34"
    console.log(String(true)); // 输出 "true"
    console.log(String(false)); // 输出 "false"
    console.log(String(null)); // 输出 "null"
    console.log(String(undefined)); // 输出 "undefined"

（三）Boolean(value)

  • 功能：将一个值转换为布尔类型。
  • 参数：value - 要转换的值。
  • 返回值：转换后的布尔值。在 JavaScript 中，false、0、-0、0n（BigInt 类型的 0）、""（空字符串）、null、undefined 和 NaN 被认为是“假值”，其他值被认为是“真值”。
  • 示例： 
    1
    2
    3
    4
    5
    6
    console.log(Boolean(123)); // 输出 true
    console.log(Boolean("")); // 输出 false
    console.log(Boolean("abc")); // 输出 true
    console.log(Boolean(null)); // 输出 false
    console.log(Boolean(undefined)); // 输出 false
    console.log(Boolean(NaN)); // 输出 false

四、其他常用全局函数

（一）eval(x)

  • 功能：计算字符串 x 中的 JavaScript 代码，并执行它。
  • 参数：x - 一个字符串，包含要执行的 JavaScript 代码。
  • 返回值：执行代码后的返回值。如果没有返回值，则返回 undefined。
  • 示例： 
    1
    2
    3
    4
    let result = eval("1 + 2");
    console.log(result); // 输出 3
    eval("console.log('Hello from eval');");
    // 控制台输出 Hello from eval
  • 注意：eval 函数非常危险，因为它会执行任意的代码。如果执行的代码来自不可信的源，可能会导致安全漏洞，如跨站脚本攻击（XSS）等。在现代 JavaScript 开发中，通常不推荐使用 eval。

（二）isFinite(number)

  • 功能：判断一个值是否是有限的数字。
  • 参数：number - 要判断的值。
  • 返回值：如果是有限的数字，返回 true；否则返回 false。对于 NaN、Infinity 和 -Infinity，返回 false。
  • 示例： 
    1
    2
    3
    4
    console.log(isFinite(123)); // 输出 true
    console.log(isFinite(Infinity)); // 输出 false
    console.log(isFinite(NaN)); // 输出 false
    console.log(isFinite("123")); // 输出 false，因为参数不是数字类型

（三）isNaN(number)

  • 功能：判断一个值是否是 NaN。
  • 参数：number - 要判断的值。
  • 返回值：如果是 NaN，返回 true；否则返回 false。需要注意的是，由于 NaN 有一些特殊的性质（如 NaN !== NaN），这个函数在判断是否为 NaN 时很有用。
  • 示例： 
    1
    2
    3
    console.log(isNaN(NaN)); // 输出 true
    console.log(isNaN(123)); // 输出 false
    console.log(isNaN("abc")); // 输出 true，因为 "abc" 转换为