JavaScript核心秘籍：解锁内置对象的超能力一、JavaScript 内置对象概述内置对象是 JavaScrip

站长

2024年08月30日 16:34 · 阅读数 18

JavaScript 是一种功能强大的编程语言，它提供了一系列内置对象，这些对象是 JavaScript 语言核心的一部分，帮助开发者处理各种常见的编程任务。深入理解这些内置对象及其方法，对于编写高效、可靠的代码至关重要。本文将详细介绍 JavaScript 中一些常用的内置对象，包括 Object、Array、String、Number、Boolean、Math、Date、RegExp 等，并探讨它们的使用场景和最佳实践。

一、JavaScript 内置对象概述

内置对象是 JavaScript 语言中预定义的对象，它们提供了许多实用的功能，用于处理字符串、数字、日期、正则表达式等常见的数据类型。每个内置对象都包含一组属性和方法，帮助开发者完成特定的任务。

JavaScript 的内置对象可以分为以下几类：

全局对象：例如Object、Function、Array、String、Number、Boolean 等。
错误对象：例如 Error、TypeError、RangeError 等。
宿主对象：由 JavaScript 运行环境（如浏览器或 Node.js）提供，例如 window、document、console 等

以下我们将深入探讨一些最常用的内置对象。

二、Object 对象

Object 是所有 JavaScript 对象的原型，是其他所有内置对象的基类。通过 Object 对象，开发者可以创建新的对象、访问和操作对象的属性等。

1. 创建对象

在 JavaScript 中，可以通过多种方式创建对象：

// 使用对象字面量
const obj1 = { key: "value" };

// 使用 Object 构造函数
const obj2 = new Object();
obj2.key = "value";

2. Object 的常用方法

Object 提供了一系列有用的方法来操作和查询对象属性：

Object.keys(obj)：返回对象自身可枚举属性的数组。
Object.values(obj)：返回对象自身可枚举属性值的数组。
Object.entries(obj)：返回对象自身可枚举属性的键值对数组。
Object.assign(target, ...sources)：将一个或多个源对象的所有可枚举属性复制到目标对象。
Object.freeze(obj)：冻结对象，防止修改对象的属性和值。
Object.seal(obj)：密封对象，防止添加新属性。

示例：

const person = {
  name: "Alice",
  age: 25,
};

console.log(Object.keys(person)); // ["name", "age"]
console.log(Object.values(person)); // ["Alice", 25]
console.log(Object.entries(person)); // [["name", "Alice"], ["age", 25]]

const newPerson = Object.assign({}, person, { city: "New York" });
console.log(newPerson); // { name: "Alice", age: 25, city: "New York" }

三、Array 对象

Array 对象用于表示一个列表（数组）并提供操作数组元素的多种方法。JavaScript 的数组是动态的，可以容纳不同类型的元素。

1. 创建数组

可以通过以下方式创建数组：

// 使用数组字面量
const arr1 = [1, 2, 3];

// 使用 Array 构造函数
const arr2 = new Array(4); // 创建一个长度为 4 的空数组
const arr3 = new Array(1, 2, 3); // 创建一个包含元素的数组

2. Array 的常用方法

Array 提供了丰富的操作方法：

push(...elements)和 pop()：向数组末尾添加或移除元素
shift() 和 unshift(...elements)：向数组开头添加或移除元素
slice(start, end)：提取数组的一部分，返回一个新数组
splice(start, deleteCount, ...items)：从数组中添加或删除元素
forEach(callback)：对数组的每个元素执行一次给定的函数
map(callback)：返回一个新数组，每个元素为原数组元素调用函数后的结果
filter(callback)：返回一个新数组，包含通过函数测试的所有元素
reduce(callback, initialValue)：对数组中的每个元素执行函数，最终计算为单一值

示例：

const numbers = [1, 2, 3, 4, 5];

// 使用 map 创建一个新数组
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 使用 filter 过滤数组元素
const evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 使用 reduce 计算数组元素的总和
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

四、String 对象

String 对象用于表示和操作字符串。JavaScript 中的字符串是不可变的，即字符串一旦创建，其值不能改变。

1. 创建字符串

可以通过以下方式创建字符串：

// 使用字符串字面量
const str1 = "Hello, world!";

// 使用 String 构造函数
const str2 = new String("Hello, world!");

2. String 的常用方法

String 对象提供了多种方法来操作和查询字符串：

charAt(index)：返回指定位置的字符。
indexOf(substring) 和 lastIndexOf(substring)：返回指定子字符串在字符串中的第一次或最后一次出现的位置
substring(start, end)：提取字符串中介于两个指定下标之间的字符
toUpperCase() 和 toLowerCase()：返回字符串的小写或大写形式
split(separator)：将字符串分割为子字符串数组
trim()：去除字符串两端的空白字符
replace(searchValue, newValue)：替换字符串中与模式匹配的子字符串

示例：

const greeting = "Hello, world!";

// 获取字符串的长度
console.log(greeting.length); // 13

// 字符串截取
console.log(greeting.substring(0, 5)); // "Hello"

// 字符串分割
const words = greeting.split(" ");
console.log(words); // ["Hello,", "world!"]

// 替换子字符串
const newGreeting = greeting.replace("world", "JavaScript");
console.log(newGreeting); // "Hello, JavaScript!"

五、Number 对象

Number 对象用于表示数值，并提供了处理数值的工具。JavaScript 的 Number 类型包括整数和浮点数。

1. 创建数值

可以通过以下方式创建数值：

// 使用数字字面量
const num1 = 42;

// 使用 Number 构造函数
const num2 = new Number(42);

2. Number 的常用方法

Number 提供了一些方法和属性，用于处理和转换数值：

toFixed(digits)：将数字格式化为指定的小数位数
toExponential(digits)：将数字格式化为指数表示法
toPrecision(precision)：将数字格式化为指定的有效位数
isNaN(value)：检查值是否为 NaN
isFinite(value)：检查值是否为有限数
parseInt(string, radix) 和 parseFloat(string)：将字符串转换为整数或浮点数

示例：

const pi = 3.14159;

// 固定小数位数
console.log(pi.toFixed(2)); // "3.14"

// 指数表示法
console.log(pi.toExponential(2)); // "3.14e+0"

// 有效位数
console.log(pi.toPrecision(3)); // "3.14"

六、Boolean 对象

Boolean 对象用于表示布尔值，true 或 false。布尔值通常用于控制程序的流程，例如条件判断和循环。

1. 创建布尔值

可以通过以下方式创建布尔值：

// 使用布尔字面量
const isTrue = true;

// 使用 Boolean 构造函数
const isFalse = new Boolean(false);

2. Boolean 的应用场景

布尔值在条件判断中非常重要，可以帮助控制代码的执行流程：

const isLoggedIn = true;

if (isLoggedIn) {
  console.log("User is logged in");
} else {
  console.log("User is not logged in");
}

七、Math 对象

Math 对象提供了一些数学常量和函数，可以用于执行数学运算，如求平方根、计算三角函数、生成随机数等。

1. 常用的 Math 方法

Math 对象是静态的，不能创建其实例，所有方法都作为 Math 对象的属性调用：

Math.abs(x)：返回数的绝对值
Math.round(x)、Math.floor(x)、Math.ceil(x)：进行四舍五入、向下取整和向上取整
Math.max(...values) 和 Math.min(...values)：返回最大值和最小值
Math.sqrt(x) 和 Math.pow(x, y)：求平方根和幂
Math.random()：生成一个范围在 [0, 1) 之间的随机数

示例：

const value = -42;

console.log(Math.abs(value)); // 42
console.log(Math.round(4.7)); // 5
console.log(Math.floor(4.7)); // 4
console.log(Math.ceil(4.2)); // 5
console.log(Math.sqrt(16)); // 4
console.log(Math.pow(2, 3)); // 8
console.log(Math.random()); // 例如: 0.7463826896048463

八、Date 对象

Date 对象用于表示日期和时间，并提供了一些方法来操作和格式化日期。

1. 创建日期对象

可以通过以下方式创建日期对象：

// 当前日期和时间
const now = new Date();

// 指定日期和时间
const specificDate = new Date("2024-08-19T10:00:00");

2. Date 的常用方法

Date 对象提供了多种方法来操作日期和时间：

getFullYear() 和 setFullYear(year)：获取和设置年份
getMonth() 和 setMonth(month)：获取和设置月份（0-11）
getDate() 和 setDate(day)：获取和设置日期（1-31）
getHours()、getMinutes()、getSeconds()：获取时间的小时、分钟和秒
toDateString() 和 toTimeString()：返回日期和时间的字符串表示形式

示例：

const date = new Date();

console.log(date.getFullYear()); // 2024
console.log(date.getMonth() + 1); // 8 (注意月份从 0 开始)
console.log(date.getDate()); // 19

console.log(date.toDateString()); // "Mon Aug 19 2024"
console.log(date.toTimeString()); // "10:00:00 GMT+0000 (Coordinated Universal Time)"

九、RegExp 对象

RegExp 对象用于表示正则表达式，用于在字符串中执行模式匹配。

1. 创建正则表达式

可以通过以下方式创建正则表达式：

// 字面量形式
const regex1 = /hello/i;

// 构造函数形式
const regex2 = new RegExp("hello", "i");

2. RegExp 的常用方法

test(string)：测试字符串中是否匹配正则表达式，返回布尔值
exec(string)：在字符串中执行搜索匹配，返回匹配结果的数组或 null
String.prototype.match(regex)：返回匹配正则表达式的结果数组
String.prototype.replace(regex, newSubstr)：替换字符串中匹配正则表达式的部分

示例：

const pattern = /hello/i;

console.log(pattern.test("Hello, world!")); // true

const result = pattern.exec("Hello, world!");
console.log(result); // ["Hello", index: 0, input: "Hello, world!", groups: undefined]

const newStr = "Hello, world!".replace(pattern, "Hi");
console.log(newStr); // "Hi, world!"

十、总结

JavaScript 内置对象提供了强大的功能，使开发者能够方便地处理各种编程任务。通过掌握这些内置对象及其方法，我们可以编写出更高效、更简洁、更可靠的代码。理解并善用这些内置对象，是提升 JavaScript 编程能力的关键。

P.S.

本文首发于我的个人网站www.aifeir.com，若你觉得有所帮助，可以点个爱心鼓励一下，如果大家喜欢这篇文章，希望多多转发分享，感谢大家的阅读。

转载自:https://juejin.cn/post/7408463818952966198

JavaScript核心秘籍：解锁内置对象的超能力一、JavaScript 内置对象概述 内置对象是 JavaScrip

一、JavaScript 内置对象概述

二、Object 对象

1. 创建对象

2. Object 的常用方法

三、Array 对象

1. 创建数组

2. Array 的常用方法

四、String 对象

1. 创建字符串

2. String 的常用方法

五、Number 对象

1. 创建数值

2. Number 的常用方法

六、Boolean 对象

1. 创建布尔值

2. Boolean 的应用场景

七、Math 对象

1. 常用的 Math 方法

八、Date 对象

1. 创建日期对象

2. Date 的常用方法

九、RegExp 对象

1. 创建正则表达式

2. RegExp 的常用方法

十、总结

P.S.

JavaScript核心秘籍：解锁内置对象的超能力一、JavaScript 内置对象概述内置对象是 JavaScrip