编程笔记 html5&css&js 086 JavaScript 内置对象
- 一、Object
- 二、Array
- 三、String
- 四、Number
- 五、Math
- 六、Date
- 七、RegExp
- 八、Function
- 九、示例
- 小结
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 内置对象的重要性:
-
基础功能提供:内置对象提供了编程语言的基础构建块,比如数据结构(Array、String、Number、Boolean等)、日期和时间处理(Date)、正则表达式匹配(RegExp)、错误处理(Error)、函数定义与执行(Function)等。这些基本功能使得开发者无需从零开始实现这些底层逻辑,大大提高了开发效率。
-
简化代码编写:通过内置对象提供的属性和方法,开发者可以方便地进行各种操作,如数组元素的添加、删除、排序、遍历;字符串的各种格式化、查找、替换操作;数字的数学计算、进制转换等。这使得代码更加简洁易读,同时也减少了潜在的错误来源。
-
提升性能:JavaScript 引擎通常会对内置对象的某些方法进行优化,以提高运行时的性能。例如,使用
Array.prototype.forEach
、map
、reduce
等方法遍历数组,相比于传统的for
循环,在很多情况下会有更好的性能表现。 -
面向对象编程支持:Object 对象是所有 JavaScript 对象的原型,通过它提供的构造器和其他方法(如
Object.create
、Object.defineProperty
等),可以创建并扩展自定义对象,为实现面向对象编程提供了便利。 -
异步编程支持:Promise 是用于处理异步操作的标准内置对象,它带来了更优雅的异步编程体验,有助于解决回调地狱问题,提高代码的可读性和维护性。
-
现代特性支持:随着 ECMAScript 标准的演进,新增了许多内置对象,如 Map、Set、WeakMap、WeakSet、Symbol、Proxy、Reflect 等,它们为开发者提供了更多高级功能,支持更复杂的程序设计需求。
总之,JavaScript 的内置对象极大地丰富了其语言特性和功能,使开发者能够高效地构建各种类型的应用程序,并且随着 JavaScript 语言的不断发展和完善,内置对象将持续发挥关键作用,支撑起前端乃至全栈开发的基石。