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

方法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];
        }
    
   },