经过对 Vue 的学习，并积累了一定的开发经验之后。我发现在前端网页开发过程中，经常要对后端返回的数据进行处理，尤其是数组和对象。在处理的过程中就会用到很多函数方法。本文将给大家介绍哪些情况会需要对数据进行处理转换，什么样的函数方法可以帮助我们做数据的处理。

1.     什么是数组？

从人类的角度看，数组是按顺序排列的一组值。

从JS的角度看，是用 Array 定义的一个对象。

总而言之，数组对象就是使用单独的变量名来存储的一系列的值。创建一个数组实例如下：

var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";

2.     什么是对象？

对象是拥有属性和方法的数据。真实生活中，一辆汽车是一个对象。对象有它的属性，如重量和颜色等，方法有启动停止等。 所有汽车都有这些属性，但是每款车的属性都不尽相同。

所有汽车都拥有这些方法，但是它们被执行的时间都不尽相同。创建一个对象实例如下：

var car = { name:"Fiat", model:500, color:"white" };

3.     数组和对象的区别

数组和对象两者都可以用来表示数据的集合，但二者的区别是什么呢？我们来看这个例子，有一个数组 a=[1,2,3,4]，还有一个对象 a={0:1,1:2,2:3,3:4}，然后你运行 alert(a[1])，两种情况下的运行结果是相同的！这就是说，数据集合既可以用数组表示，也可以用对象表示，那么我到底该用哪一种呢？我后来才知道，数组表示有序数据的集合，而对象表示无序数据的集合。如果数据的顺序很重要，就用数组，否则就用对象。从表象上来看，数组和对象的另一个区别是，数组的数据没有“名称”（name），对象的数据有“名称”（name）。从本质上来看：它们的__proto__指向不同即原型链不同。当然，两者可以相互转换，数组是不是数组，取决于使用者要不要把它当作数组。实现代码如下：

var obj = { 0:1, 1:2, 2:3 ,3:4 } 
当成数组： for(let i=0; i<obj.length;i++){ console.log(obj[i]) } 
当成对象： for(let i in obj){ console.log(obj[i]) }

4.     常用数组的方法函数

① forEach ： forEach() 用于调用数组的每个元素，并将元素传递给回调函数。forEach 接收一个函数，这个函数必须接收三个参数，依次是array的 value、key 和array 本身,且返回值是undefined。forEach 函数是开发经常用到的一个方法。结合实际项目举例。代码如下：

5.	 // 数据切换
6.	      this.processData.forEach((element) => {
7.	        if (element.egname === value) {
8.	          this.processContent = element.data.process.origin;
9.	          this.softInfo[0].chip = element.data.chip;
10.	          this.softInfo[0].soft_version = element.data.soft_version;
11.	          this.newProcess = element.data.process.add;
12.	          if (this.softInfo[0].chip === '') {
13.	            this.isShowTable = false;
14.	          } else {
15.	            this.isShowTable = true;
16.	          }
17.	          if (this.newProcess) {
18.	            this.isShowNew = true;
19.	          } else {
20.	            this.isShowNew = false;
21.	          }
22.	        }
23.	      });
24.	    },
​

此代码的作用是当用户切换按钮，展示相对应的数据信息。所以采用 forEach 遍历所有的数据信息，当捕捉到其中信息的所有者的名字“egname”与按钮的值一致。就将它对应的数据展示出来。

② map ： map() 功能与forEach完全相同，但返回值不是undefined，而是将函数返回的每一个值收集起来组成一个新的数组，新数组的长度与原数组相同。结合实际项目举例。代码如下：

 // 转换数组
      this.processData = Object.keys(this.process).map((el) => {
        return { egname: el, data: this.process[el] };
      });

此段代码的作用是利用 map 方法将后端返回的数组转换为一个对象数组。给每个值都添加一个 egname 作为 key 值，便于后续数据的使用。

③ concat ： concat () 合并多个数组；合并多个字符串；连接多个数组。结合实际项目举例。代码如下：

// 提交修改信息
    updateProjectData() {
      // 对应用数组进行转换
      this.editProjectForm.applications = this.editProjectForm.applications
        .map((el) => {
          return el.application;
        })
        .join(',')
        .split(',');
      // 对工程师数组进行转换
      this.addEngineers.forEach((item, index) => {
            const obj = item;
            const newEngineers = [];
            newEngineers.push({
               id: obj.id,
               title_id: obj.title_id
            });
            this.addEngineers = newEngineers;
      });
      this.editProjectForm.engineers = this.editProjectForm.engineers.concat(
        this.addEngineers
      );
      this.$store
        .dispatch('admin/updateProject', this.editProjectForm)
        .then(() => {
          // 提示用户
          this.$message.success('修改成功');
          this.addEngineers = null;
        });
    }

此段代码的作用是利用 concat 方法将新增的数组 addEngineers 与原来的数组 editProjectForm.engineers 拼接，然后一起提交做网络请求。

④ filter ：filter() 是过滤的意思，根据return的条件筛选出元素并组成一个新的数组。结合实际项目举例。代码如下：

 // 删除工程师信息
    deleteEngineer(engineer) {
      engineer.showInput = false;
      this.addEngineers =
      this.addEngineers.filter((el) => {
          return el.showInput !== false;
        });
    },

此段代码的作用是采用 filter 方法将数组中 showInput 属性值为 TRUE 的过滤出来组成一个新的数组。实现删除功能。

⑤ push: push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。结合实际项目举例。代码如下：

 engineerType: function() {
      const arr = [];
      this.engineerType.map((item, index) => {
        arr.push(Object.assign({}, item, { editable: false }));
      });
      this.newEngineerType = arr;
    },