#JavaScript# 合并数组的多种方法（附源码）

最新推荐文章于 2025-06-18 11:56:06 发布

Miraitowa_chole

最新推荐文章于 2025-06-18 11:56:06 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue专栏文章标签： javascript vue.js elementui 前端前端框架

本文链接：https://blog.youkuaiyun.com/ZHENGCHUNJUN/article/details/127273528

vue专栏专栏收录该内容

53 篇文章

订阅专栏

本文介绍了三种JavaScript中合并数组的方法：使用concat()方法创建新数组而不改变原数组；利用push.apply()改变并扩展原数组；通过扩展运算符实现数组合并且保持原数组不变。每种方法都提供了具体的代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：concat()

concat()方法合并数组，不改变原来的两个数组，数据不变，同时会返回一个新的数组

//concat()方法合并数组不改变原数组，用一个新的数组来接收2个或多个数组的数据
  getConcat() {
    this.concat = this.arr.concat(this.arrList);
},

<template>
   <div class="service">
        <p>合并两个数组的方法</p>
        <p>{{ '数组一：'+ arr }}</p>
        <p>{{ '数组二：'+ arrList }}</p>
        <p>{{ '(1)合并的最终数组（concat）' + concat }}</p>
        <el-button @click="getConcat()">点击获取合并数组(concat)</el-button>
   </div>
</template>

<script>
   export default {
   components: {},
   props: {},
   data() {
    return {
        arr:[1,2,3,4,5],
        arrList:[23.67,89,100],
        concat:[],
       };
   },
   watch: {},
   computed: {},
   methods: {
        //合并数组
        //方法一
        //concat()方法合并数组不改变原数组，用一个新的数组来接收2个或多个数组的数据
        getConcat() {
            this.concat = this.arr.concat(this.arrList);
        },
   },

方法2：push()

合并数组会改变原数组

//方法二
 //push()方法合并数组会改变原数组,直接用原来的数组去接收另一个数组的数据，生成新的数组
 getList() {
     this.arr.push.apply(this.arr,this.arrList);//将arrList的数据合并到arr数组里
},

<template>
   <div class="service">
        <p>合并两个数组的方法</p>
        <p>{{ '数组一：'+ arr }}</p>
        <p>{{ '数组二：'+ arrList }}</p>
        <p>{{ '(2)合并的最终数组(push)' + arr }}</p>
        <el-button @click="getList()">点击获取合并数组(push)</el-button>
   </div>
</template>

<script>
   export default {
   components: {},
   props: {},
   data() {
    return {
        arr:[1,2,3,4,5],
        arrList:[23.67,89,100],
       };
   },
   watch: {},
   computed: {},
   methods: {
        //合并数组
        //方法二
        //push()方法合并数组会改变原数组,直接用原来的数组去接收另一个数组的数据，生成新的数组
        getList() {
           this.arr.push.apply(this.arr,this.arrList);//将arrList的数据合并到arr数组里
        },
   },

方法3：拓展运算符

采用拓展运算符的方式不会改变原数组

//拓展运算符,采用拓展运算符的方式不会改变原数组
   getOperator() {
      this.Operator = [...this.arr,...this.arrList];
     }

<template>
   <div class="service">
        <p>合并两个数组的方法</p>
        <p>{{ '数组一：'+ arr }}</p>
        <p>{{ '数组二：'+ arrList }}</p>
        <p>{{ '(3)合并的最终数组(拓展运算符)' + Operator }}</p>
        <el-button @click="getOperator()">点击获取合并数组(拓展运算符)</el-button> 
   </div>
</template>

<script>
   export default {
   components: {},
   props: {},
   data() {
    return {
        arr:[1,2,3,4,5],
        arrList:[23.67,89,100],
        Operator:[]
       };
   },
   watch: {},
   computed: {},
   methods: {
        //合并数组
        //方法三
        //拓展运算符,采用拓展运算符的方式不会改变原数组
        getOperator() {
            this.Operator = [...this.arr,...this.arrList];
        }
    
   },