JavaScript 数组核心方法实战｜新增元素 + 数组转字符串零基础详解

前面我们学完了 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数组基础方法实战
点击测试数组方法

复制代码

<script>
    // 基础测试数组
    let arr = ["zhenwo", "XUGUANG", "fanxing", "joushi", "luoxuan", "wuxian", "chana", "kongmeng"];
    document.getElementById('chele').innerHTML = arr;

    function capital() {
        // 1. 数组转字符串 toString
        // document.getElementById('chele').innerHTML = arr.toString()

        // 2. 数组自定义拼接 join
        // let srr = document.getElementById('chele')
        // srr.innerHTML = arr.join("")+"<br>";
        // srr.innerHTML += arr.join("+")+"<br>";

        // 3. 尾部新增 push
        // arr.push("xz")
        // let srr = arr.push('真我') 
        // document.getElementById('chele').innerHTML=arr+"<br>新增数组长度="+srr

        // 4. 头部新增 unshift
        let srr = arr.unshift('新增');
        document.getElementById('chele').innerHTML = arr;
    }
</script>

六、新手学习重点提示 - 不变更原数组：toString、join 仅做格式转换，原数组数据不会改动，适合纯展示场景； - 变更原数组：push、unshift 会直接修改原数组内容，开发时需注意数据覆盖问题； - 返回值误区：push、unshift 返回的是数组长度，不是新数组，不要直接赋值接收数组内容； - 优先使用 join：绝大多数数组转字符串场景，优先用 join，灵活度更高，适配更多业务需求。七、结尾数组方法是 JS 进阶的重中之重，后续的数组删除、截取、筛选、遍历方法，都是在今天的基础上延伸。掌握新增、转换这四个基础方法，就能搞定 60% 的基础数组操作，为后续数据处理、列表渲染、接口数据解析打下坚实基础！

JavaScript 数组核心方法实战｜新增元素 + 数组转字符串 零基础详解

JavaScript 数组核心方法实战｜新增元素 + 数组转字符串零基础详解