JavaScript中的内置对象与方法

JavaScript内置对象概述

JavaScript 作为一种广泛应用于前端和后端开发的脚本语言，拥有丰富的内置对象。这些内置对象为开发者提供了各种强大的功能，极大地提高了开发效率。内置对象可以分为三类：数据封装对象（如 Object、Array、Boolean、Number、String）、控制抽象对象（如 Math、Date）以及功能服务对象（如 JSON、console）。

数据封装对象

Object

Object 是 JavaScript 中最基础的内置对象，几乎所有其他对象都继承自它。它可以用来创建自定义对象，通过键值对的方式存储数据。

// 创建一个简单的对象
let person = {
    name: 'John',
    age: 30,
    sayHello: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

console.log(person.name); // 输出: John
person.sayHello(); // 输出: Hello, my name is John

Object 提供了许多有用的方法，例如：

Object.keys()：返回一个包含对象自身可枚举属性名称的数组。

let obj = {a: 1, b: 2, c: 3};
let keys = Object.keys(obj);
console.log(keys); // 输出: ['a', 'b', 'c']

Object.values()：返回一个包含对象自身可枚举属性值的数组。

let obj = {a: 1, b: 2, c: 3};
let values = Object.values(obj);
console.log(values); // 输出: [1, 2, 3]

Object.assign()：用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。

let target = {a: 1};
let source1 = {b: 2};
let source2 = {c: 3};
Object.assign(target, source1, source2);
console.log(target); // 输出: {a: 1, b: 2, c: 3}

Array

Array 是用于存储多个值的有序列表。它有自己独特的方法和属性。

// 创建一个数组
let numbers = [1, 2, 3, 4, 5];

// 访问数组元素
console.log(numbers[0]); // 输出: 1

// 修改数组元素
numbers[2] = 10;
console.log(numbers); // 输出: [1, 2, 10, 4, 5]

常见的数组方法包括：

push()：在数组末尾添加一个或多个元素，并返回新的数组长度。

let fruits = ['apple', 'banana'];
let newLength = fruits.push('cherry');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
console.log(newLength); // 输出: 3

pop()：删除并返回数组的最后一个元素。

let fruits = ['apple', 'banana', 'cherry'];
let removed = fruits.pop();
console.log(fruits); // 输出: ['apple', 'banana']
console.log(removed); // 输出: cherry

shift()：删除并返回数组的第一个元素。

let fruits = ['apple', 'banana', 'cherry'];
let removed = fruits.shift();
console.log(fruits); // 输出: ['banana', 'cherry']
console.log(removed); // 输出: apple

unshift()：在数组开头添加一个或多个元素，并返回新的数组长度。

let fruits = ['banana', 'cherry'];
let newLength = fruits.unshift('apple');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
console.log(newLength); // 输出: 3

splice()：用于添加或删除数组中的元素。

let fruits = ['apple', 'banana', 'cherry'];
// 删除第二个元素
fruits.splice(1, 1);
console.log(fruits); // 输出: ['apple', 'cherry']

// 在索引1处插入 'orange'
fruits.splice(1, 0, 'orange');
console.log(fruits); // 输出: ['apple', 'orange', 'cherry']

concat()：用于合并两个或多个数组。它不会改变现有数组，而是返回一个新数组。

let arr1 = [1, 2];
let arr2 = [3, 4];
let combined = arr1.concat(arr2);
console.log(combined); // 输出: [1, 2, 3, 4]

join()：将数组的所有元素连接成一个字符串。

let fruits = ['apple', 'banana', 'cherry'];
let str = fruits.join(', ');
console.log(str); // 输出: apple, banana, cherry

reverse()：反转数组中元素的顺序。

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // 输出: [5, 4, 3, 2, 1]

sort()：对数组的元素进行排序。默认情况下，它将元素转换为字符串，然后根据字符编码进行排序。

let numbers = [3, 1, 4, 1, 5];
numbers.sort();
console.log(numbers); // 输出: [1, 1, 3, 4, 5]

// 自定义排序函数
let numbers2 = [3, 1, 4, 1, 5];
numbers2.sort((a, b) => a - b);
console.log(numbers2); // 输出: [1, 1, 3, 4, 5]

filter()：创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(num => num * num);
console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

reduce()：对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出: 15

Boolean

Boolean 对象是一个包装布尔值的对象。通常，直接使用布尔字面量（true 和 false）更为常见，但在某些情况下，Boolean 对象会很有用。

let isDone = new Boolean(true);
console.log(isDone.valueOf()); // 输出: true

注意，在大多数情况下，使用布尔字面量会更好，因为 Boolean 对象在某些比较操作中可能会产生意外结果。

Number

Number 对象用于处理数值。它提供了许多有用的方法和属性。

let num = new Number(10);
console.log(num.toFixed(2)); // 输出: 10.00，将数字格式化为指定小数位数的字符串
console.log(num.toExponential(2)); // 输出: 1.00e+1，将数字转换为指数表示法的字符串

Number 还有一些静态属性，例如 Number.MAX_VALUE 和 Number.MIN_VALUE，分别表示 JavaScript 中可以表示的最大和最小正数。

String

String 对象用于处理文本。字符串可以通过字面量形式创建，也可以使用 String 构造函数创建。

let str1 = 'Hello';
let str2 = new String('World');

console.log(str1.length); // 输出: 5
console.log(str2.length); // 输出: 5

常见的字符串方法包括：

charAt()：返回指定位置的字符。

let str = 'Hello';
console.log(str.charAt(1)); // 输出: e

indexOf()：返回指定字符在字符串中第一次出现的位置，如果不存在则返回 -1。

let str = 'Hello';
console.log(str.indexOf('l')); // 输出: 2

lastIndexOf()：返回指定字符在字符串中最后一次出现的位置，如果不存在则返回 -1。

let str = 'Hello';
console.log(str.lastIndexOf('l')); // 输出: 3

substring()：提取字符串中介于两个指定下标之间的字符。

let str = 'Hello';
console.log(str.substring(1, 3)); // 输出: el

slice()：提取字符串的一部分，并返回一个新字符串。

let str = 'Hello';
console.log(str.slice(1, 3)); // 输出: el

toUpperCase()：将字符串转换为大写。

let str = 'hello';
console.log(str.toUpperCase()); // 输出: HELLO

toLowerCase()：将字符串转换为小写。

let str = 'HELLO';
console.log(str.toLowerCase()); // 输出: hello

split()：将字符串分割成数组。

let str = 'apple,banana,cherry';
let fruits = str.split(',');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']

replace()：在字符串中用一些字符替换另一些字符。

let str = 'Hello, world';
let newStr = str.replace('world', 'JavaScript');
console.log(newStr); // 输出: Hello, JavaScript

控制抽象对象

Math

Math 对象提供了一些数学常数和函数。它不是一个构造函数，因此不需要使用 new 关键字来创建实例。常见的数学常数包括 Math.PI（圆周率）和 Math.E（自然常数）。

console.log(Math.PI); // 输出: 3.141592653589793
console.log(Math.E); // 输出: 2.718281828459045

常见的数学函数包括：

Math.abs()：返回一个数的绝对值。

console.log(Math.abs(-5)); // 输出: 5

Math.ceil()：向上取整。

console.log(Math.ceil(4.1)); // 输出: 5

Math.floor()：向下取整。

console.log(Math.floor(4.9)); // 输出: 4

Math.round()：四舍五入。

console.log(Math.round(4.5)); // 输出: 5
console.log(Math.round(4.4)); // 输出: 4

Math.max()：返回一组数中的最大值。

console.log(Math.max(1, 5, 3)); // 输出: 5

Math.min()：返回一组数中的最小值。

console.log(Math.min(1, 5, 3)); // 输出: 1

Math.pow()：返回基数的指定次幂。

console.log(Math.pow(2, 3)); // 输出: 8

Math.sqrt()：返回一个数的平方根。

console.log(Math.sqrt(16)); // 输出: 4

Math.random()：返回一个介于 0（包括）与 1（不包括）之间的随机小数。

let randomNum = Math.random();
console.log(randomNum); // 输出一个随机小数，例如 0.3456789

要生成一个指定范围内的随机整数，可以使用以下公式：

function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min) + min);
}

let randomInt = getRandomInt(1, 10);
console.log(randomInt); // 输出一个介于1（包括）和10（不包括）之间的随机整数

Date

Date 对象用于处理日期和时间。可以通过多种方式创建 Date 对象。

// 创建当前日期和时间的 Date 对象
let now = new Date();
console.log(now); // 输出: 当前日期和时间，例如: Tue Jun 06 2023 15:30:00 GMT+0800 (中国标准时间)

// 创建指定日期和时间的 Date 对象
let specificDate = new Date('2023-06-06T12:00:00');
console.log(specificDate); // 输出: Tue Jun 06 2023 12:00:00 GMT+0800 (中国标准时间)

Date 对象提供了许多方法来获取和设置日期和时间的各个部分。

getFullYear()：获取年份。

let now = new Date();
console.log(now.getFullYear()); // 输出当前年份

getMonth()：获取月份（0 表示一月，11 表示十二月）。

let now = new Date();
console.log(now.getMonth()); // 输出当前月份（0 - 11）

getDate()：获取日期（1 - 31）。

let now = new Date();
console.log(now.getDate()); // 输出当前日期

getDay()：获取星期几（0 表示星期日，6 表示星期六）。

let now = new Date();
console.log(now.getDay()); // 输出当前星期几（0 - 6）

getHours()：获取小时（0 - 23）。

let now = new Date();
console.log(now.getHours()); // 输出当前小时

getMinutes()：获取分钟（0 - 59）。

let now = new Date();
console.log(now.getMinutes()); // 输出当前分钟

getSeconds()：获取秒（0 - 59）。

let now = new Date();
console.log(now.getSeconds()); // 输出当前秒

getTime()：获取从 1970 年 1 月 1 日 00:00:00 UTC 到该日期对象表示的时间的毫秒数。

let now = new Date();
console.log(now.getTime()); // 输出当前时间的毫秒数

也可以使用 set 系列方法来设置日期和时间的各个部分。

let date = new Date();
date.setFullYear(2024);
date.setMonth(5); // 6月
date.setDate(15);
date.setHours(10);
date.setMinutes(30);
date.setSeconds(0);
console.log(date); // 输出: Sat Jun 15 2024 10:30:00 GMT+0800 (中国标准时间)

功能服务对象

JSON

JSON 对象用于处理 JSON（JavaScript Object Notation）数据格式。JSON 是一种轻量级的数据交换格式，常用于前后端数据传输。

JSON.stringify()：将 JavaScript 对象转换为 JSON 字符串。

let obj = {name: 'John', age: 30};
let jsonStr = JSON.stringify(obj);
console.log(jsonStr); // 输出: {"name":"John","age":30}

JSON.parse()：将 JSON 字符串转换为 JavaScript 对象。

let jsonStr = '{"name":"John","age":30}';
let obj = JSON.parse(jsonStr);
console.log(obj.name); // 输出: John
console.log(obj.age); // 输出: 30

console

console 对象用于在控制台输出信息，主要用于调试目的。常见的方法有：

console.log()：在控制台输出一条消息。

console.log('This is a log message');

console.error()：在控制台输出一条错误消息，通常以红色显示。

console.error('This is an error message');

console.warn()：在控制台输出一条警告消息，通常以黄色显示。

console.warn('This is a warning message');

console.table()：以表格形式输出数据，适用于输出数组或对象。

let data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 25}
];
console.table(data);

内置对象与原型链

JavaScript 的内置对象是基于原型链工作的。每个内置对象都有一个原型对象，原型对象上定义了一些方法和属性，这些方法和属性可以被该对象的实例所共享。例如，Array 对象的原型上定义了 push、pop 等方法，所有 Array 实例都可以使用这些方法。

let arr = [1, 2, 3];
// arr.__proto__ 指向 Array.prototype
console.log(arr.__proto__ === Array.prototype); // 输出: true

理解原型链对于深入掌握 JavaScript 的内置对象和面向对象编程非常重要。当访问一个对象的属性或方法时，JavaScript 首先在对象自身查找，如果找不到，则会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（Object.prototype）。

内置对象的兼容性

在使用 JavaScript 内置对象时，需要考虑兼容性问题。不同的浏览器和 JavaScript 运行环境可能对某些内置对象的方法和属性支持程度不同。例如，一些较新的数组方法（如 find、findIndex）在旧版本的浏览器中可能不支持。为了解决兼容性问题，可以使用 Babel 等工具将现代 JavaScript 代码转换为旧版本浏览器支持的代码。另外，也可以手动编写 polyfill 来模拟不支持的方法。例如，对于 Array.prototype.find 方法，可以编写如下 polyfill：

if (!Array.prototype.find) {
    Array.prototype.find = function(callback) {
        for (let i = 0; i < this.length; i++) {
            if (callback(this[i], i, this)) {
                return this[i];
            }
        }
        return undefined;
    };
}

这样，即使在不支持 find 方法的环境中，也可以使用该方法。

总结内置对象的应用场景

数据处理与存储：Object 和 Array 用于存储和管理数据。例如，在开发一个博客系统时，可以使用 Object 来表示一篇文章的信息（标题、作者、内容等），使用 Array 来存储多篇文章。
数值计算：Math 对象在科学计算、游戏开发等领域经常用到。比如在一个游戏中计算物体的运动轨迹、碰撞检测等都可能用到 Math 的方法。
日期与时间处理：Date 对象在很多应用中都不可或缺，如记录用户的登录时间、订单的创建时间等。在电商系统中，可以根据订单创建时间来计算订单的处理时效。
数据交换：JSON 对象用于在前后端之间进行数据交换。前端将数据转换为 JSON 格式发送给后端，后端接收到 JSON 数据后再解析为 JavaScript 对象进行处理。
调试与日志记录：console 对象帮助开发者在开发过程中调试代码，输出重要的信息、错误和警告，方便快速定位问题。

通过深入理解和熟练运用 JavaScript 的内置对象与方法，开发者可以更高效地编写代码，实现各种复杂的功能，无论是前端页面的交互，还是后端服务器的逻辑处理。同时，关注兼容性问题可以确保代码在不同环境下都能正常运行。