目 录CONTENT

文章目录

一行JavaScript代码:用push()方法往数组里「塞」元素,到底发生了什么?

星野集
2025-08-07 / 0 评论 / 0 点赞 / 33 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2025-08-08,若内容或图片失效,请留言反馈。 眼看十遍,不如手敲一遍!‌ ‌打开控制台‌ ‌Windows/Linux‌:按 F12 或 Ctrl+Shift+I ‌......Mac‌:按 Option+Command+I 也可右键网页 → 选择「检查」→ 切换到「Console」标签 ‌ ......动手实践‌ ▶ 在闪烁的光标处直接输入教程代码 ▶ 按 Enter 执行代码,立即看到结果 ▶ 用 ↑↓ 方向键快速调出历史命令 ......当需要编写多行代码时: 正常输入第一行代码 按住 Ctrl 键(Mac用户按 Command) 再按 Enter 换行而不执行 代码输入完成后,单独按 Enter 执行全部 ‌.......小技巧‌ 输入 clear() 可清空控制台 错误提示是好朋友!红色报错能帮你快速定位问题 💡 记住:每个程序员都从这里开始你的第一行代码吧! ⚠️ 注意:部分旧版浏览器可能不支持此功能,建议使用Chrome/Edge/Firefox最新版

最近在帮朋友调试前端代码时,发现他对数组的push()方法理解得不太透彻。他写了一段代码,但对执行结果一知半解,于是我决定用这篇博客帮他(也帮你)彻底搞明白——当我们调用push()时,JavaScript到底在背后做了什么。


先看一段简单的代码

我们从一个具体的例子入手。假设你有一个数组,里面存着几个名字:

let rows = ["Naomi", "Quincy", "CamperChan"];

现在需要往这个数组里新增一个元素"xingyeji",你会怎么做?最常见的写法就是用push()

let pushed = rows.push("xingyeji");

这两行代码看起来很简单,但背后藏着不少细节。我们一步一步拆解。


第一步:声明一个数组

首先看第一行代码:
let rows = ["Naomi", "Quincy", "CamperChan"];

这里做了两件事:

  1. let声明了一个变量rowslet是ES6引入的变量声明方式,允许后续修改变量值);
  2. 把一个数组赋值给它。数组是用方括号[]包裹的有序数据集合,这里的元素是三个字符串:"Naomi""Quincy""CamperChan"

此时,rows数组的状态是这样的:
["Naomi", "Quincy", "CamperChan"],长度是3(可以通过rows.length查看到)。


第二步:用push()往数组里「塞」新元素

接下来是关键的一行:
let pushed = rows.push("xingyeji");

这行代码的作用很明确:往rows数组的末尾添加一个新元素"xingyeji"。但push()方法的特性值得仔细说一说。

1. push()会直接修改原数组

和其他一些数组方法(比如map()filter())不同,push()不会创建新数组,而是直接在原数组的末尾「追加」元素。

举个例子:执行完rows.push("xingyeji")后,原来的rows数组就被「改」了——它不再只有3个元素,而是变成了:
["Naomi", "Quincy", "CamperChan", "xingyeji"]

这种「直接修改原数组」的特性,我们称为「副作用」(在函数式编程中,副作用通常指对数据的直接修改)。不过对于push()来说,这是它的设计目的,所以不必担心「破坏数据」,反而是它的优势——高效。

2. push()的返回值是新数组的长度

再回到这行代码:let pushed = rows.push("xingyeji");

这里的pushed变量存储的是push()方法的返回值。那push()返回什么呢?答案是:添加元素后,数组的新长度

比如原来的rows长度是3,添加1个元素后,长度变成4,所以pushed的值就是4

我们可以验证一下:
执行完这两行代码后,打印rows会得到["Naomi", "Quincy", "CamperChan", "xingyeji"],而console.log(pushed)会输出4


总结:push()的「使用说明书」

通过这个例子,我们可以总结出push()的核心特点:

  • 作用:向数组末尾添加一个或多个元素(比如rows.push("A", "B")会一次加两个);
  • 修改原数组:直接改变原数组的内容,而不是生成新数组;
  • 返回值:新数组的长度(不是被添加的元素,也不是原数组长度)。

下次你在代码里用push()时,记得这三个点,就能避免很多小错误。比如:
如果你想保留原数组,同时生成一个包含新元素的新数组,应该用concat()(比如const newArr = oldArr.concat("newItem"));而如果只是想简单地在原数组里「塞」元素,push()就是最直接的选择。


最后,再强调一个小细节:push()可以接收多个参数,它们会被依次添加到数组末尾。比如:
rows.push("Diana", "Evan");
执行后,rows会变成["Naomi", "Quincy", "CamperChan", "xingyeji", "Diana", "Evan"],长度是6。

是不是很灵活?这就是JavaScript数组方法的魅力~

学编程哪有什么「天赋异禀」?不过是多了点「死磕」的耐心——敲错的语法、卡壳的逻辑、反复调试的报错,这些看似恼人的「坎儿」,其实都是成长的刻度。
当你第一次写出能运行的代码时,当你终于搞懂那个绕了三天的逻辑时,当你用自己写的程序解决了一个实际问题时……这些瞬间会告诉你:所有敲键盘的夜晚、揉着头发叹气的瞬间、咬着牙再试一次的坚持,都在悄悄攒着未来的底气
编程不难,难的是「开始」和「坚持」。但相信我——你现在敲下的每一行代码,都会在某一天,变成你指尖的光。

0
  1. 微信打赏

    qrcode weixin
    1. 微信打赏

      qrcode weixin

评论区