明月看潮生

明月看潮生

关注
发信
关注(28)粉丝(399)

编程笔记 html5&css&js 086 JavaScript 内置对象


JavaScript 内置对象是 JavaScript 语言本身定义的一系列预定义的对象，这些对象在全局作用域中可以直接使用，无需创建实例。它们为开发者提供了基础且强大的功能，涵盖数据结构、数学运算、日期处理、正则表达式匹配以及其他核心功能。

以下是一些主要的内置对象及其用途、属性和方法：

一、Object

  • 用途：所有 JavaScript 对象的基类，可以用来创建自定义对象或直接操作任意对象。
  • 属性：
    • prototype：用于实现原型继承的属性。
  • 方法：
    • Object.create()：基于指定的原型创建新对象。
    • Object.defineProperty() / Object.defineProperties()：定义对象的属性及其特性（如可枚举性、可写性等）。
    • Object.getOwnPropertyDescriptor()：返回某个对象属性的描述符。
    • Object.keys() / Object.values() / Object.entries()：返回对象自身可枚举属性的键名数组、值数组或键值对数组。
    • Object.assign()：合并源对象的所有可枚举属性到目标对象。
    • Object.is()：严格比较两个值是否全等。

二、Array

  • 用途：存储有序的数据集合，支持多种数组操作方法。
  • 属性：
    • length：数组的元素个数。
  • 方法：
    • push() / pop()：向数组尾部添加/移除元素。
    • shift() / unshift()：向数组头部添加/移除元素。
    • join()：将数组元素转换为字符串，以分隔符连接。
    • slice()：提取数组的一部分。
    • splice()：删除或替换数组中的元素。
    • map() / filter() / reduce() 等：数组遍历及操作方法。
    • indexOf() / lastIndexOf()：查找元素索引位置。
    • forEach() / every() / some()：迭代方法。

三、String

  • 用途：表示文本数据，提供字符串操作的功能。
  • 属性：
    • length：字符串的长度。
  • 方法：
    • charAt() / charCodeAt()：获取指定位置字符或其Unicode编码。
    • concat()：拼接字符串。
    • indexOf() / lastIndexOf()：查找子串首次出现的位置。
    • slice() / substring() / substr()：提取部分字符串。
    • trim() / trimStart() / trimEnd()：去除字符串两侧空白字符。
    • toLowerCase() / toUpperCase()：转换为小写/大写。
    • split()：根据分隔符切割字符串为数组。
    • replace()：替换子串。
    • match() / search()：正则匹配与搜索。

四、Number

  • 用途：表示数值类型数据，提供数字相关的方法和常量。
  • 属性：
    • MAX_VALUE / MIN_VALUE: 最大和最小可表示数值。
    • NaN: 表示非数字值。
    • POSITIVE_INFINITY / NEGATIVE_INFINITY: 正负无穷大。
  • 方法：
    • toFixed(): 指定小数位数的四舍五入并转为字符串。
    • toExponential(): 转换为指数计数法的字符串。
    • toString(): 将数字转换为字符串形式。
    • valueOf(): 返回一个数字的基本数值。

五、Math

  • 用途：提供数学计算相关的常量和函数。
  • 方法：
    • Math.abs()：求绝对值。
    • Math.floor() / Math.ceil() / Math.round()：向下取整、向上取整、四舍五入。
    • Math.max() / Math.min()：求最大值和最小值。
    • Math.pow()：计算乘方。
    • Math.sqrt()：开平方根。
    • Math.random()：生成[0, 1)之间的随机浮点数。

六、Date

  • 用途：处理日期和时间。
  • 属性：
    • Date.now()：返回当前时间戳。
    • Date.prototype.getFullYear() / getMonth() / getDate() 等：获取日期的各个组成部分。
  • 方法：
    • new Date()：创建一个新的日期对象。
    • Date.prototype.setFullYear() / setMonth() / setDate() 等：设置日期的各个组成部分。
    • Date.prototype.toDateString() / toLocaleDateString()：格式化日期输出。

七、RegExp

  • 用途：进行正则表达式的匹配和测试。
  • 构造函数：
    • new RegExp(pattern[, flags])：创建正则表达式对象。
  • 方法：
    • test()：检测字符串是否符合正则表达式。
    • exec()：执行正则表达式，并返回匹配结果。

八、Function

  • 用途：表示可执行代码块，即函数对象。
  • 属性：
    • name：函数名称。
  • 方法：
    • 函数体内的各种语句执行逻辑。
    • 可作为构造函数使用，通过 new Function(args, body) 创建新的函数。

此外还有其他内置对象，比如 Map、Set、WeakMap、WeakSet（ES6 新增）用于键值对的存储，Promise 用于异步编程，Symbol 提供了独一无二的标识符，Error 类型用于抛出和捕获异常等。随着 ECMAScript 标准的演进，有更多的内置对象被引入来增强 JavaScript 的功能。

九、示例

在实际的编程场景中，一个脚本通常不会一次性用到所有内置对象。不过，我可以构造一个示例来展示如何在一个相对复杂的场景下使用多种JavaScript内置对象：

// 使用 Date 对象获取当前日期和时间
const currentDate = new Date();
console.log(`当前日期：${currentDate.toDateString()}，当前时间：${currentDate.toLocaleTimeString()}`);

// 使用 Array 和 Math 内置对象进行一些数学操作
const numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log('数组元素之和：', sum);

const randomIndex = Math.floor(Math.random() * numbers.length);
const randomElement = numbers[randomIndex];
console.log(`随机选取的数组元素：${randomElement}`);

// 使用 String 对象处理字符串
const greeting = 'Hello, World!';
const reversedGreeting = greeting.split('').reverse().join('');
console.log('反转的问候语：', reversedGreeting);

// 使用 RegExp 进行正则匹配
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const isValidEmail = emailPattern.test('example@example.com');
console.log('邮箱是否有效：', isValidEmail);

// 使用 Function 创建可执行函数
const multiply = new Function('x', 'y', 'return x * y;');
console.log('结果：', multiply(5, 3));

// 使用 Object 来创建自定义对象并操作其属性
const person = {
  name: 'John Doe',
  age: 30,
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.name} (${this.age})`;
  },
});

console.log('完整姓名：', person.fullName);

// 使用 Map 和 Set 进行数据存储
const mapExample = new Map();
mapExample.set('firstName', 'John');
mapExample.set('lastName', 'Doe');

const setExample = new Set();
setExample.add('apple');
setExample.add('banana');

console.log('Map 中的数据：', [...mapExample]);
console.log('Set 中的唯一元素：', [...setExample]);

// 使用 Promise 处理异步逻辑（这里仅做模拟）
function fetchUserData(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        id: userId,
        username: 'john_doe',
      });
    }, 1000);
  });
}

fetchUserData(1)
  .then((userData) => console.log('用户数据：', userData))
  .catch((error) => console.error('错误：', error));

这个示例并没有涵盖 JavaScript 的所有内置对象，但展示了如何在实际应用中结合使用多个内置对象。每个内置对象在不同的上下文中都有其特定用途。

小结

JavaScript 内置对象的重要性：

  1. 基础功能提供：内置对象提供了编程语言的基础构建块，比如数据结构（Array、String、Number、Boolean等）、日期和时间处理（Date）、正则表达式匹配（RegExp）、错误处理（Error）、函数定义与执行（Function）等。这些基本功能使得开发者无需从零开始实现这些底层逻辑，大大提高了开发效率。

  2. 简化代码编写：通过内置对象提供的属性和方法，开发者可以方便地进行各种操作，如数组元素的添加、删除、排序、遍历；字符串的各种格式化、查找、替换操作；数字的数学计算、进制转换等。这使得代码更加简洁易读，同时也减少了潜在的错误来源。

  3. 提升性能：JavaScript 引擎通常会对内置对象的某些方法进行优化，以提高运行时的性能。例如，使用 Array.prototype.forEach、map、reduce 等方法遍历数组，相比于传统的 for 循环，在很多情况下会有更好的性能表现。

  4. 面向对象编程支持：Object 对象是所有 JavaScript 对象的原型，通过它提供的构造器和其他方法（如 Object.create、Object.defineProperty 等），可以创建并扩展自定义对象，为实现面向对象编程提供了便利。

  5. 异步编程支持：Promise 是用于处理异步操作的标准内置对象，它带来了更优雅的异步编程体验，有助于解决回调地狱问题，提高代码的可读性和维护性。

  6. 现代特性支持：随着 ECMAScript 标准的演进，新增了许多内置对象，如 Map、Set、WeakMap、WeakSet、Symbol、Proxy、Reflect 等，它们为开发者提供了更多高级功能，支持更复杂的程序设计需求。

总之，JavaScript 的内置对象极大地丰富了其语言特性和功能，使开发者能够高效地构建各种类型的应用程序，并且随着 JavaScript 语言的不断发展和完善，内置对象将持续发挥关键作用，支撑起前端乃至全栈开发的基石。

02-23 10:57
Powered by LMLPHP ©2024 明月看潮生 0.003232