JavaScript数组与对象怎么用？前端最常用的数据结构入门实战

学前端，HTML 负责结构、CSS 负责样式，真正让网页动起来的，是 JavaScript。而 JS 里最常用、也最该先搞懂的，就是数组（Array）和对象（Object）这两种数据结构。今天老陈用最直白的话，带新手把这两个东西用起来，配几个能直接复制运行的小例子，看完就能上手。

一、数组：一排有序的盒子

数组可以理解为一排带编号的盒子，编号从 0 开始。比如存一周七天的菜名，用数组最合适。声明方式很简单：用方括号把数据括起来，元素之间用逗号隔开。想取第一个，就写编号 0；取最后一个，用长度减一。数组自带很多好用的方法，新手先记住三个就够了。

• push：往末尾加一个元素，比如往购物车再加一件商品。
• forEach：遍历每个元素，做同一件事，比如把列表每一项打印出来。
• filter：按条件筛选，比如只留下价格大于一百的商品。

二、对象：一张带标签的卡片

数组适合存一串同类数据，对象适合存一条有结构的信息。比如一个用户，有名字、年龄、是否会员，用对象就能把这三样信息打包在一起。声明用花括号，里面写「键: 值」对，键是标签，值是内容。取某个值的时候，用点加键名就能拿到，比如取用户名字。

三、数组里放对象，威力才出来

真实项目里，经常是数组套对象。比如一个商品列表，就是一个数组，里面每一项都是一个商品对象。这样既能用数组的遍历方法批量处理，又能用对象的键精准取字段。下面是一个最经典的实战场景：有一组商品数据，用 forEach 把它们逐个拼成网页上的列表项，再塞进页面容器，列表就渲染出来了。

• 用数组存多条记录，每条是一个对象。
• 用遍历方法循环每一条，取出名字和价格。
• 拼成 HTML 字符串，一次性写进页面。

四、新手最常踩的三个坑

• 混淆编号和长度：数组第一个是 0 不是 1，取最后一个用长度减一。
• 对象键写错：取不到值多半是键名拼错，大小写都要一致。
• 直接改原数组没察觉：filter、map 会返回新数组，原数组不变，别以为旧数据被改了。

老陈总结

数组和对象是 JS 的基石，几乎所有前端功能都绕不开它们。建议新手今天就打开浏览器控制台，亲手写一个小数组、一个小对象，试试用 push 加数据、用 forEach 遍历、用点取对象的值，多敲几遍手感就出来了。想系统学网页开发的可以看我系统课程，或者评论区留言发链接给你。