JavaScript 从零基础到精通系列：对象、数组与 ES6 数据操作利器

云水一下2026-05-31 8:19

摘要： 编程的真谛在于数据操作。本篇将学习 JavaScript 的两大基石：对象和数组。我们将遍历对象属性，掌握数组的 map、filter、reduce 等高级方法，并深入学习 ES6 带来的解构、展开运算符、模板字符串等语法糖。此外，还会梳理 Math、Date、String 等内置工具对象。最后，用"学生成绩管理系统"实例来整合所有数据处理技巧。

一、对象：万物皆可描述

对象是一组键值对（key-value）的无序集合，键是字符串（或 Symbol），值可以是任意数据类型。

1.1 创建对象

javascript 复制代码 
// 字面量方式（首选）
const user = {
    name: '小芳',
    age: 22,
    email: 'xiaofang@example.com',
    isAdmin: false,
    // 方法（值为函数的属性）
    sayHi: function() {
        console.log(`Hi, I'm ${this.name}`);
    }
};

1.2 访问属性

点 . 语法和方括号 [] 语法。

javascript 复制代码 
console.log(user.name);           // 小芳
console.log(user['email']);       // xiaofang@example.com
​
const key = 'age';
console.log(user[key]);           // 22，动态属性名必须用[]
user.sayHi();                     // Hi, I'm 小芳

1.3 添加、修改和删除属性

javascript 复制代码 
user.city = '北京';    // 添加
user.age = 23;         // 修改
delete user.isAdmin;   // 删除
console.log(user.city); // 北京

1.4 遍历对象

javascript 复制代码 
for (const key in user) {
    if (user.hasOwnProperty(key)) { // 过滤掉原型上的属性
        console.log(`${key}: ${user[key]}`);
    }
}
// ES8 提供 Object.keys(), Object.values(), Object.entries()
console.log(Object.keys(user));   // ['name', 'age', 'email', 'sayHi', 'city']
console.log(Object.values(user)); // 对应值的数组
Object.entries(user).forEach(([key, value]) => {
    console.log(key, value);
});

二、数组：有序的数据集合

数组是有序列表，索引从 0 开始。可以存放任意类型的数据。

2.1 创建与基本操作

javascript 复制代码 
const arr = [1, 2, 3, 'text', true];
arr[0] = 10;
console.log(arr.length); // 5
​
// 末尾添加和删除
arr.push('新元素');
arr.pop();
// 开头添加和删除
arr.unshift('开头');
arr.shift();

2.2 强大的数组方法

ES5/ES6 带来的方法让数组操作告别了手动 for 循环。

  • forEach：遍历每个元素，无返回值。

    javascript 复制代码 
    [1, 2, 3].forEach((item, index) => console.log(index, item));

  • map ：映射，返回一个新数组，每个元素经过函数处理。

    javascript 复制代码 
    const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]

  • filter：过滤，返回满足条件的元素组成的新数组。

    javascript 复制代码 
    const evens = [1, 2, 3, 4, 5].filter(x => x % 2 === 0); // [2, 4]

  • reduce：累加器，将数组归纳为单个值。

    javascript 复制代码 
    const sum = [1, 2, 3].reduce((accumulator, current) => accumulator + current, 0); // 6

  • find 和 findIndex：查找符合条件的第一个元素或索引。

    javascript 复制代码 
    const found = [10, 20, 30].find(x => x > 15); // 20

  • some 和 every ：检测数组元素。some 有一个满足即返回 true；every 全部满足才返回 true。

  • sort：排序，会改变原数组，默认按字符串 Unicode 排序。数字排序需传入比较函数。

    javascript 复制代码 
    const nums = [3, 1, 10];
nums.sort((a, b) => a - b); // [1, 3, 10] 升序

  • includes（ES7）：判断数组是否包含某个值，返回布尔值。

    javascript 复制代码 
    [1, 2, 3].includes(2); // true

三、ES6 数据操作语法糖

3.1 解构赋值 (Destructuring)

可以快速从对象或数组中提取值。

javascript 复制代码 
// 数组解构
const point = [100, 200];
const [x, y] = point;
console.log(x, y); // 100 200
​
// 对象解构
const userInfo = { firstName: '三', lastName: '张', age: 30 };
const { firstName, lastName, age: userAge } = userInfo;
console.log(firstName, lastName, userAge); // 三 张 30
// 重命名和默认值
const { city = '未知' } = userInfo;

3.2 展开运算符 ...

在数组或对象字面量中"展开"元素。

javascript 复制代码 
// 数组合并
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
const combined = [...arr1, ...arr2]; // [1,2,3,4,5]
​
// 对象合并
const defaults = { theme: 'light', lang: 'zh' };
const userSettings = { lang: 'en' };
const settings = { ...defaults, ...userSettings }; // { theme: 'light', lang: 'en' }

3.3 剩余参数

函数参数中使用 ... 收集剩余参数为数组。

javascript 复制代码 
function sumAll(...numbers) {
    return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sumAll(1, 2, 3, 4)); // 10

四、常用内置对象

4.1 Math 对象

数学常数和函数。

javascript 复制代码 
Math.PI;                  // 3.14159...
Math.abs(-5);             // 5
Math.ceil(4.2);           // 5 向上取整
Math.floor(4.9);          // 4 向下取整
Math.round(4.5);          // 5 四舍五入
Math.max(10, 20, 5);      // 20
Math.random();            // 0~1 随机数
console.log("Math.PI =", Math.PI);                // 圆周率
console.log("Math.abs(-5) =", Math.abs(-5));      // 绝对值
console.log("Math.ceil(4.2) =", Math.ceil(4.2));  // 向上取整
console.log("Math.floor(4.9) =", Math.floor(4.9));// 向下取整
console.log("Math.round(4.5) =", Math.round(4.5));// 四舍五入
console.log("Math.max(10,20,5) =", Math.max(10, 20, 5)); // 最大值
console.log("Math.random() =", Math.random());    // 0~1随机数

4.2 Date 对象

处理日期和时间。

javascript 复制代码 
const now = new Date();
console.log(now.toISOString());
const specificDate = new Date('2026-01-15');
console.log(specificDate.getFullYear()); // 2026
// 时间戳：从 1970.1.1 至今的毫秒数
console.log(Date.now());

4.3 String 方法

javascript 复制代码 
const str = ' Hello JavaScript ';
console.log("原字符串：", str);
console.log("去首尾空格：", str.trim()); 
console.log("是否包含 Java：", str.includes('Java')); 
console.log("是否以 Hell 开头：", str.startsWith(' Hell'));
console.log("截取 1-6：", str.slice(1, 6)); 
console.log("按空格分割成数组：", str.split(' ')); 
console.log("替换 Java 为 Type：", str.replace('Java', 'Type'));

五、JSON：数据交换的通用语言

JSON（JavaScript Object Notation）是前后端数据交换的标准格式。JavaScript 提供 JSON.stringify() 序列化和 JSON.parse() 反序列化。

javascript 复制代码 
const obj = { name: '小白', skills: ['JS', 'HTML'] };
const jsonStr = JSON.stringify(obj);
// '{"name":"小白","skills":["JS","HTML"]}'
const parsed = JSON.parse(jsonStr);
console.log(parsed.name); // 小白

注意：JSON.stringify 会忽略 undefined、函数、Symbol，因此只适用于纯数据。

六、综合实战：学生成绩管理系统

构建一个在控制台运行的成绩管理模块（后续可接入 DOM）。

javascript 复制代码 
const students = [
    { name: '张三', score: 85 },
    { name: '李四', score: 92 },
    { name: '王五', score: 78 },
    { name: '赵六', score: 95 },
];
​
// 1. 添加学生
function addStudent(name, score) {
    students.push({ name, score });
}
​
// 2. 计算平均分
function getAverage() {
    const total = students.reduce((sum, stu) => sum + stu.score, 0);
    return (total / students.length).toFixed(1);
}
​
// 3. 获取不及格学生（<60）
function getFailing() {
    return students.filter(stu => stu.score < 60);
}
​
// 4. 按成绩排序并展示
function displayRanking() {
    // 不改变原数组，浅拷贝后排序
    const sorted = [...students].sort((a, b) => b.score - a.score);
    console.table(sorted);
}
​
// 5. 增加奖品标记：>=90 为 '优秀'
const withAward = students.map(stu => {
    return {
        ...stu,
        award: stu.score >= 90 ? '🏅 优秀' : ''
    };
});
console.log(withAward);
​
console.log(`平均分：${getAverage()}`);
displayRanking();

代码中使用了对象数组、push、reduce、filter、sort、map，以及展开运算符和解构，完美体现了现代 JavaScript 数据处理的灵活与高效。console.table 可以以表格形式打印对象数组，在调试时非常好用。

总结 ： 本篇我们攻坚了 JavaScript 数据处理的半壁江山。对象和数组是表达复杂信息的核心容器，而 ES6 的解构、展开等特性让代码简洁优雅。掌握 map/filter/reduce 这三大将，你的数据处理能力将提升一个台阶。内置对象和 JSON 是实际开发中的常客。现在，你对纯数据的操作已经游刃有余，下一站，让我们进入浏览器王国，操纵 DOM，让页面真正动起来。

如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享 ，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。

相关推荐
四代水门1 小时前
服务端倒带（Server-Side Rewind）命中判定系统
java·前端·算法
宋浮檀s1 小时前
应急响应——Web高危漏洞应急（SQL注入+XSS跨站+文件上传）
前端·网络·安全·web安全·xss
前端后腿哥1 小时前
UNIAPPX UTS插件Widget开发完整教程（Android版）
前端·uni-app
大家的林语冰1 小时前
AI 遥控代码截图，录制终端动画，定制自动化批量制图流程，解放你的双手～
前端·ai编程·trae
无聊的老谢1 小时前
Vue 3 + Leaflet 实现高性能 Web GIS 基站监控平台
前端·javascript·vue.js
之歆1 小时前
Day23_Bootstrap 前端框架完全指南：从栅格系统到组件化开发
开发语言·前端·javascript·前端框架·bootstrap·ecmascript·less
前端 贾公子1 小时前
3.响应式系统基础：从发布订阅模式的角度理解 Vue2 的数据响应式原理（上）
前端·javascript·vue.js
2501_940041741 小时前
纯前端高阶实战：涵盖3D、音频可视化与复杂交互的开发命题
前端
AIFQuant1 小时前
外汇交易平台技术栈深度解析：行情 API、清算、风控、前端一体化方案
前端·python·websocket·金融·restful
热门推荐
01GitHub 镜像站点02DeepSeek V4 + Claude Code thinking mode 400 错误修复方案03【AI】2026 年具身智能模型和世界模型总结04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05Codex 接入 DeepSeek API 完整配置文档06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07CC-Switch & Claude 基于 Linux 服务器安装使用指南08几个好用的ip纯净度检测网站09CC-Switch 全平台下载、安装与使用全指南（Windows/macOS/Linux）10API Key 登录 Codex 也能用插件了，还支持会话删除和导出