从创建对象到内置对象：JavaScript 核心语法通关指南

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

作为前端开发的核心语言，JavaScript 的强大之处在于其灵活的对象体系。无论是表单数据的校验，还是大型项目的模块化架构设计，对象的深度使用贯穿了几乎所有的业务逻辑场景。

本文将系统梳理 JavaScript 中对象的关键知识点：涵盖「三种创建对象方式的对比分析」、「高效遍历对象的实用方法」以及「常用内置对象的实战技巧」，帮助你全面掌握 JS 对象的核心机制。

一、JavaScript 创建对象的三种主要方式

对象是 JavaScript 中用于存储键值对的基本结构。不同的创建方式适用于不同场景，合理选择可显著提升代码的可维护性与执行效率。

1. 字面量方式：适用于简单独立场景

通过直接书写 {} 定义属性和值，是最直观的对象创建方式，特别适合配置项或属性较少的对象。

{}

javascript
运行

// 示例：创建一个用户信息对象
const user = {
  name: "豆包编程助手",
  age: 2,
  sayHi: function() {
    console.log(`你好，我是${this.name}`);
  }
};
user.sayHi(); // 输出：你好，我是豆包编程助手

优势：
- 语法简洁明了，易于理解和编写；
- 不涉及函数调用，运行性能优异。

局限：
- 无法批量生成相同结构的对象；
- 多次重复定义会造成代码冗余，缺乏复用能力，不适用于复杂逻辑。

2. 构造函数方式：实现同类对象的批量生成

当需要创建多个结构一致的对象（如用户列表中的每条记录），构造函数是一种高效的解决方案。通常以大写字母开头命名，并结合 new 关键字来实例化。

function

new

javascript
运行

// 定义用户构造函数
function User(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log(`你好，我是${this.name}`);
  }
}

// 批量创建实例
const user1 = new User("小明", 18);
const user2 = new User("小红", 17);

user1.sayHi(); // 输出：你好，我是小明
user2.sayHi(); // 输出：你好，我是小红

优势：
- 支持快速生成多个实例，提升代码复用性；
- 结构清晰，便于统一管理属性与行为。

局限：
- 每个实例的方法都是独立的函数副本，占用额外内存空间。
例如，getName 和 getAge 在每个实例中都会重新创建，若生成 100 个实例，则对应产生 100 个相同的函数对象，造成资源浪费。

user1.sayHi

user2.sayHi

sayHi

3. 原型（Prototype）方式：优化内存使用的进阶方案

为解决构造函数中方法重复创建的问题，JavaScript 提供了原型机制——将共用的方法挂载在构造函数的 prototype 属性上，使所有实例共享同一份方法定义。

prototype

javascript
运行

// 构造函数：仅定义实例独有的属性
function User(name, age) {
  this.name = name;
  this.age = age;
}

// 原型：定义所有实例共享的方法
User.prototype.sayHi = function() {
  console.log(`你好，我是${this.name}`);
};

// 创建实例
const user1 = new User("小明", 18);
const user2 = new User("小红", 17);

// 验证方法共享：两个实例的 sayHi 指向同一个函数
console.log(user1.sayHi === user2.sayHi); // 输出：true

优势：
- 方法只定义一次，被所有实例共享，有效节省内存；
- 可动态向原型添加新方法，已存在的所有实例均可立即访问。

局限：
- 语法相对复杂，需理解原型链的工作原理，对初学者有一定门槛；
- 原型上的引用类型属性（如数组或对象）为所有实例共享，一旦修改会影响全部实例。

三种创建方式对比总结

创建方式	核心优势	适用场景	局限性
字面量方式	语法简洁、性能高	简单的独立对象（如配置项）	无法批量创建，复用性差
构造函数方式	支持批量创建，结构清晰	多个同结构对象（如数据列表）	方法重复创建，消耗内存
原型方式	方法共享，节省内存	大量同类对象的复杂业务	需掌握原型链，语法较复杂

二、JavaScript 遍历对象的常用方法

获取对象的属性和值是日常开发中的高频操作。掌握正确的遍历方式，有助于避免潜在错误并提升代码健壮性。

1. for...in 循环：遍历可枚举属性

for...in 是传统的对象遍历语法，会遍历对象自身及其原型链上所有可枚举的属性。

for...in

javascript
运行

const user = { name: "小明", age: 18 };

// 遍历对象属性
for (let key in user) {
  console.log(`键：${key}，值：${user[key]}`);
}
// 输出：
// 键：name，值：小明
// 键：age，值：18

注意事项：
该循环会包含从原型继承来的属性。例如，若为 Object.prototype 添加了一个自定义方法，它也会被遍历出来：

Object.prototype

javascript
运行

// 给原型添加方法（仅作示例，实际开发不建议这样做）
Object.prototype.greet = function() {};

const user = { name: "小明", age: 18 };
for (let key in user) {
  console.log(key); // 输出：name、age、greet
}

解决方案：
使用 hasOwnProperty() 方法进行过滤，确保仅处理对象自身的属性：

hasOwnProperty()

javascript
运行

for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(`键：${key}，值：${user[key]}`);
  }
}
// 输出：name、age（过滤掉原型上的 greet）

2. Object.keys()：获取自身属性名数组

ES5 引入的 Object.keys() 方法返回一个数组，包含对象自身所有可枚举属性的名称，不会访问原型链，更加安全可控。

Object.keys()

javascript
运行

const user = { name: "小明", age: 18 };

// 获取属性名数组
const keys = Object.keys(user);
console.log(keys); // 输出：["name", "age"]

// 遍历属性
keys.forEach(key => {
  console.log(`键：${key}，值：${user[key]}`);
});

优势：
- 仅返回自有属性，无需额外判断；
- 返回结果为数组，可直接调用 map、filter 等数组方法，操作更灵活。

forEach

forEach

map

三、JavaScript 内置对象：即拿即用的功能组件

JavaScript 提供了一系列无需手动构造即可直接使用的内置对象，它们如同现成的工具包，极大提升了开发效率。

1. Math 对象：数学运算的得力助手

Math 是一个静态对象，无需实例化，直接通过 Math. 前缀调用其方法，提供了丰富的数学计算功能。

Math

Math.方法名

javascript
运行

// 绝对值
Math.abs(-10); // 10
// 最大值/最小值
Math.max(1, 3, 5); // 5
Math.min(1, 3, 5); // 1
// 随机数（0~1 之间的浮点数）
Math.random(); 
// 取整
Math.floor(3.9); // 3（向下取整）
Math.ceil(3.1); // 4（向上取整）
Math.round(3.5); // 4（四舍五入）

典型应用：
生成 1 到 100 之间的随机整数：

javascript
运行

const randomNum = Math.floor(Math.random() * 100) + 1;

2. 日期对象（Date）：时间处理的核心工具

Date 对象用于处理日期与时间信息，必须通过 new Date() 创建实例，支持获取和设置年、月、日、时、分、秒等。

Date

new Date()

javascript
运行

// 创建当前时间的 Date 实例
const now = new Date();

// 获取时间信息
console.log(now.getFullYear()); // 年份（如 2025）
console.log(now.getMonth() + 1); // 月份（0~11，需 +1 才是实际月份）
console.log(now.getDate()); // 日期（1~31）
console.log(now.getHours()); // 小时（0~23）
console.log(now.getMinutes()); // 分钟（0~59）
console.log(now.getSeconds()); // 秒数（0~59）

典型应用：
将当前时间格式化为 YYYY-MM-DD HH:mm:ss 形式：

javascript
运行

function formatTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

console.log(formatTime(new Date())); // 输出：2025-12-10 15:30:25

YYYY-MM-DD HH:mm:ss

3. 数组对象（Array）：数据集合的操作中枢

数组是 JavaScript 中最常用的集合类型之一，内置了丰富的方法，可用于高效完成数据的增删改查等操作。

javascript
运行

const arr = [1, 2, 3];

// 增删元素
arr.push(4); // 末尾添加：[1,2,3,4]
arr.pop(); // 末尾删除：返回 4，数组变为 [1,2,3]
arr.unshift(0); // 头部添加：[0,1,2,3]
arr.shift(); // 头部删除：返回 0，数组变为 [1,2,3]

// 转换与拼接
arr.join("-"); // 数组转字符串："1-2-3"
[1,2].concat([3,4]); // 数组合并：[1,2,3,4]

// 遍历与筛选
arr.map(item => item * 2); // 映射转换：[2,4,6]
arr.filter(item => item > 1); // 过滤元素：[2,3]
arr.reduce((sum, item) => sum + item, 0); // 累加求和：6

4. 字符串对象（String）：文本处理的“瑞士军刀”

字符串在 JavaScript 中可作为对象使用，具备大量内置的方法，能够高效完成各类常见的文本操作任务。无论是截取、查找、替换还是格式化，都能通过其提供的方法快速实现。

const str = "Hello JavaScript";

// 获取长度
str.length; // 16

// 查找与截取
str.indexOf("Java"); // 6（查找子串位置，找不到返回 -1）
str.slice(0, 5); // "Hello"（截取 0~4 索引的字符）
str.substring(6); // "JavaScript"（从索引 6 截取到末尾）

// 转换与分割
str.toUpperCase(); // "HELLO JAVASCRIPT"（转大写）
str.toLowerCase(); // "hello javascript"（转小写）
str.split(" "); // ["Hello", "JavaScript"]（按空格分割为数组）

JavaScript 的对象体系构成了前端开发的核心基础，也是深入掌握主流框架（如 React、Vue）的关键前提。这些框架中的组件结构与状态管理机制，本质上都是对 JS 对象的封装与拓展。

从字面量到构造函数，再到原型机制，这三种对象创建方式不仅展示了语法的演进，更体现了 JavaScript 从简洁实用走向灵活复杂的设计哲学。而从

for...in

到

Object.keys()

，再到各类内置对象的实际应用，我们所积累的不仅是技术手段，更是一种面向问题、高效解决的编程思维模式。

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：Javascript script scrip scri Java