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

摘要 编程的真谛在于数据操作。本篇将学习 JavaScript 的两大基石对象和数组。我们将遍历对象属性掌握数组的 map、filter、reduce 等高级方法并深入学习 ES6 带来的解构、展开运算符、模板字符串等语法糖。此外还会梳理 Math、Date、String 等内置工具对象。最后用“学生成绩管理系统”实例来整合所有数据处理技巧。一、对象万物皆可描述对象是一组键值对key-value的无序集合键是字符串或 Symbol值可以是任意数据类型。1.1 创建对象// 字面量方式首选 const user { name: 小芳, age: 22, email: xiaofangexample.com, isAdmin: false, // 方法值为函数的属性 sayHi: function() { console.log(Hi, Im ${this.name}); } };1.2 访问属性点.语法和方括号[]语法。console.log(user.name); // 小芳 console.log(user[email]); // xiaofangexample.com ​ const key age; console.log(user[key]); // 22动态属性名必须用[] user.sayHi(); // Hi, Im 小芳1.3 添加、修改和删除属性user.city 北京; // 添加 user.age 23; // 修改 delete user.isAdmin; // 删除 console.log(user.city); // 北京1.4 遍历对象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 创建与基本操作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遍历每个元素无返回值。[1, 2, 3].forEach((item, index) console.log(index, item));map映射返回一个新数组每个元素经过函数处理。const doubled [1, 2, 3].map(x x * 2); // [2, 4, 6]filter过滤返回满足条件的元素组成的新数组。const evens [1, 2, 3, 4, 5].filter(x x % 2 0); // [2, 4]reduce累加器将数组归纳为单个值。const sum [1, 2, 3].reduce((accumulator, current) accumulator current, 0); // 6find和findIndex查找符合条件的第一个元素或索引。const found [10, 20, 30].find(x x 15); // 20some和every检测数组元素。some有一个满足即返回trueevery全部满足才返回true。sort排序会改变原数组默认按字符串 Unicode 排序。数字排序需传入比较函数。const nums [3, 1, 10]; nums.sort((a, b) a - b); // [1, 3, 10] 升序includesES7判断数组是否包含某个值返回布尔值。[1, 2, 3].includes(2); // true三、ES6 数据操作语法糖3.1 解构赋值 (Destructuring)可以快速从对象或数组中提取值。// 数组解构 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 展开运算符...在数组或对象字面量中“展开”元素。// 数组合并 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 剩余参数函数参数中使用...收集剩余参数为数组。function sumAll(...numbers) { return numbers.reduce((acc, cur) acc cur, 0); } console.log(sumAll(1, 2, 3, 4)); // 10四、常用内置对象4.1 Math 对象数学常数和函数。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 对象处理日期和时间。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 方法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数据交换的通用语言JSONJavaScript Object Notation是前后端数据交换的标准格式。JavaScript 提供JSON.stringify()序列化和JSON.parse()反序列化。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。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让页面真正动起来。如果这篇文章帮你解决了实操上的困惑别忘记点击点赞、分享也可以留言告诉我你遇到的其它问题我会尽快回复。动手练习是掌握编程最快的方法请务必亲手敲一遍本文的所有示例代码并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源谢谢大家。