前面我们学完了 JS 数据类型、运算符、流程控制、DOM 基础，今天重点攻克前端高频核心：原生数组基础方法。
数组是存储批量数据的核心容器，日常开发中的列表渲染、数据新增、数据格式转换，全部依赖数组方法。本篇基于实战代码，详解 toString、join、push、unshift 四大最常用基础数组方法，代码逐行注释、可直接复制运行，新手零门槛吃透！
一、前期基础：定义测试数组
我们先定义一个包含多组名称的数组，作为所有方法的测试数据源，全程复用，方便对比不同方法效果：
// 基础测试数组
let arr = "zhenwo", "XUGUANG", "fanxing", "joushi", "luoxuan", "wuxian", "chana", "kongmeng";
// 初始渲染数组到页面
document.getElementById('chele').innerHTML = arr;
初始页面渲染效果：数组默认以逗号分隔展示所有元素。
二、数组转字符串方法（格式转换必备）
开发中经常需要把数组转为纯文本字符串，用于展示、传参、文本拼接，这两个方法是刚需。
toString() 方法
核心作用：将整个数组完整转换为纯字符串，默认以逗号分隔元素，无法自定义分隔符。
特点：不修改原数组，返回全新字符串，是最简单的数组转文本方式。
function capital() {
// 数组自动转为逗号分隔的字符串
document.getElementById('chele').innerHTML = arr.toString()
}
运行效果：
zhenwo,XUGUANG,fanxing,joushi,luoxuan,wuxian,chana,kongmeng
join() 方法（开发首选）
核心作用：将数组拼接为字符串，支持自定义分隔符，灵活性远超 toString()，是项目中最常用的数组转字符串方法。
常用分隔场景：无分隔、空格分隔、加号分隔、换行分隔等。
function capital() {
let srr = document.getElementById('chele')
// 空分隔符：所有元素无缝拼接
srr.innerHTML = arr.join("") + "
";
// 加号分隔符：元素之间用 + 连接
srr.innerHTML += arr.join("+") + "
";
}
运行效果：
无缝拼接：zhenwoXUGUANGfanxingjoushiluoxuanwuxianchanakongmeng
加号拼接：zhenwo+XUGUANG+fanxing+joushi+luoxuan+wuxian+chana+kongmeng
核心区别：toString() 只能逗号分隔，join() 可自由定义分隔符，实际开发优先使用 join()。
三、数组新增元素方法（动态添加数据）
动态新增数据是数组最核心的操作之一，分为尾部新增和头部新增，两个方法都会修改原数组，并返回新数组长度。
push() 尾部新增元素
核心作用：在数组末尾添加一个或多个新元素。
返回值：返回新增后的新数组长度（重点考点）。
function capital() {
// 尾部新增单个元素
arr.push("xz");
document.getElementById('chele').innerHTML = arr + "
";
// 接收返回值：新数组长度
let newLength = arr.push('真我')
document.getElementById('chele').innerHTML += "数组内容=" + arr + "
新增后数组长度=" + newLength
}
场景适配：列表下拉加载、新增列表数据、尾部追加内容。
unshift() 头部新增元素
核心作用：在数组开头添加一个或多个新元素，原有元素依次后移。
返回值：同样返回新增后的新数组长度，修改原数组。
function capital() {
// 头部新增元素
let newLength = arr.unshift('新增');
// 渲染最终数组
document.getElementById('chele').innerHTML = arr;
}
场景适配：最新消息置顶、顶部新增公告、头部插入优先级数据。
四、四大方法核心总结（必背）
数组方法
功能作用
是否修改原数组
返回值
使用场景
toString()
数组转逗号分隔字符串
否
转换后的字符串
简单数组文本展示
join()
自定义分隔符转字符串
否
转换后的字符串
文本拼接、数据格式化、接口传参
push()
数组尾部新增元素
是
新数组长度
列表追加、动态新增数据
unshift()
数组头部新增元素
是
新数组长度
数据置顶、头部插入内容
五、完整可运行源码
整合所有方法，可直接复制到本地运行，切换注释即可测试不同效果：
JS数组基础方法实战
点击测试数组方法
复制代码
六、新手学习重点提示 - 不变更原数组：toString、join 仅做格式转换，原数组数据不会改动，适合纯展示场景； - 变更原数组：push、unshift 会直接修改原数组内容，开发时需注意数据覆盖问题； - 返回值误区：push、unshift 返回的是数组长度，不是新数组，不要直接赋值接收数组内容； - 优先使用 join：绝大多数数组转字符串场景，优先用 join，灵活度更高，适配更多业务需求。 七、结尾 数组方法是 JS 进阶的重中之重，后续的数组删除、截取、筛选、遍历方法，都是在今天的基础上延伸。掌握新增、转换这四个基础方法，就能搞定 60% 的基础数组操作，为后续数据处理、列表渲染、接口数据解析打下坚实基础！