在开发项目中,经常会遇到对数组的操作,比如对数组的数据进行删减或增加,同时也会对每个数组里的数据进行删减,下面就举个例子说明一下。

      直接给一段代码

getOnlineColumns(this.taskForm.onlineId).then(res => {//获取从表相关信息
if (res.success) {
console.log("getOnlineColumns res=",res)
this.columns = res.result.columns
console.log("getOnlineColumns columns=",this.columns)
this.columns.forEach(function(item, index) {//删除不需要的列
Object.keys(item).map(function (key) {
null == item[key] && delete item[key]
})
})
this.columns = this.indexColumn.concat(this.columns)
this.columns = this.columns.concat(this.actionColumn)
console.log("this.columns=",this.columns)

上面是根据onlineId获取表单列信息,

获取的信息如下:

{
"description": "商城订单表",
"pidField": null,
"cgButtonList": [],
"checkboxFlag": "Y",
"currentTableName": "ces_order_main",
"dictOptions": {},
"enhanceJs": null,
"fieldHrefSlots": [],
"hasChildrenField": null,
"hideColumns": [],
"paginationFlag": "Y",
"scrollFlag": 1,
"textField": null,
"code": "56efb74326e74064b60933f6f8af30ea",
"tableType": 2,
"relationType": null,
"columns": [
{
"title": "订单编码",
"dataIndex": "order_code",
"align": "center",
"customRender": null,
"scopedSlots": null,
"hrefSlotName": null,
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
},
{
"title": "下单时间",
"dataIndex": "xd_date",
"align": "center",
"customRender": null,
"scopedSlots": null,
"hrefSlotName": null,
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
},
{
"title": "订单总额",
"dataIndex": "money",
"align": "center",
"customRender": null,
"scopedSlots": null,
"hrefSlotName": null,
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
},
{
"title": "备注",
"dataIndex": "remark",
"align": "center",
"customRender": null,
"scopedSlots": null,
"hrefSlotName": null,
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
}
],
"formTemplate": "1",
"foreignKeys": [],
"desFormCode": null,
"isDesForm": null
}

     但这里的"columns":不能直接给给this.columns,否则会报错,所以需要进行处理

首先要删除不需要的列

this.columns.forEach(function(item, index) {//删除不需要的列
Object.keys(item).map(function (key) {
null == item[key] && delete item[key]
})
})

变成下面的列

[
{
"title": "订单编码",
"dataIndex": "order_code",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "下单时间",
"dataIndex": "xd_date",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "订单总额",
"dataIndex": "money",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "备注",
"dataIndex": "remark",
"align": "center",
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
}
]

同时根据要求,在前面要增加一组信息indexColumn,内容如下:

indexColumn: [{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
}]this.columns = this.indexColumn.concat(this.columns)
同时在后面要增加一组信息actionColumn
actionColumn: [{
title: "操作",
dataIndex: "action",
scopedSlots: { customRender: "action" },
align: "center",
width: 150
}]this.columns = this.columns.concat(this.actionColumn)

最后合成如下数组:

[
{
title: '#',
dataIndex: '',
key:'rowIndex',
width:60,
align:"center",
customRender:function (t,r,index) {
return parseInt(index)+1;
}
},
{
"title": "订单编码",
"dataIndex": "order_code",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "下单时间",
"dataIndex": "xd_date",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "订单总额",
"dataIndex": "money",
"align": "center",
"showLength": 0,
"sorter": false,
},
{
"title": "备注",
"dataIndex": "remark",
"align": "center",
"showLength": 0,
"sorter": false,
"linkField": null,
"tableName": null
}, {
title: "操作",
dataIndex: "action",
scopedSlots: { customRender: "action" },
align: "center",
width: 150
}
]


另外附上其它一些数组的相关方法如下

1、将数组合并成字符串(返回字符串)[ Array.join() ]


var a = [1,2,3];
var b = a.join("");
console.log(a); //[1, 2, 3],原数组不改变
console.log(b); //"123",变成字符串


2、返回逆序数组(倒叙排列数组)[ Array..reverse() ]


var a = [1,2,3];
a.reverse();
console.log(a); //直接改变a数组的值 返回的是[3,2,1]


3、Array.concat(),创建并返回一个新数组

var a = [1,2,3]; 
var b = a.concat(4,5);
var c = a.concat([4,5]);
console.log(a); //返回的还是[1,2,3]
console.log(b); //返回[1,2,3,4,5]
console.log(c); //返回[1,2,3,4,5]
// 复制数组
var a = [1,2,3];
var b = a.concat();
console.log(a); //返回[1,2,3]
console.log(b); //返回[1,2,3]

4、Array.slice()方法,返回指定数组的片段或者子数组。不会改变原数组

var a = [1,2,3,4,5];<br>
a.slice(0,3); //返回[1,2,3] 第一个参数是截取开始的位置(包括),第二个参数是截取结束的位置(不包括)
a.slice(3); //返回[4,5]
a.slice(1,-1); //返回[2,3,4] 负数表示倒数
console.log(a); //返回[1,2,3,4,5]

5、Array.splice()方法,用来删除或插入元素,会修改原数组!


数组的起始位置为0
var a = [1,2,3,4,5,6,7,8];
var b = a.splice(1,2); //第一个参数是截取的起始位置(包括),第二个参数是截取的个数,之后的参数就是添加在元数组的新值
console.log(a); //返回[1, 4, 5, 6, 7, 8]
console.log(b); //返回[2, 3]


可以用来解决在数组起始部位加入数据


this.noticeMessageList.splice(0, 0, { fromUser: 'zhangq1',
noticeMessage: '此处添加message'})


6、push()方法与pop()方法

push()方法在数组的尾部添加一个或者多个元素,并返回数组的新长度。注意的是,改变的是原数组的值,返回的是新数组的长度。

pop()方法删除数组的最后一个元素,并返回它的删除值。也是改变原数组,返回的是删除的值。

7、unshift()方法与shift()方法

unshift()方法类似于push()不同的是,他是在数组头部添加,其他都一样

shift()方法则类比pop()方法。

8、forEach()方法,从头至尾遍历数组,为每个元素调用指定的函数。


var a = [1,2,3,4,5]; 
var sum = 0;
a.forEach(function (value) {
sum += value
})
console.log(sum); //sum = 15


9、map()方法

和forEach()类似,调用数组的每个元素传递给指定函数,并返回一个数组,所以它和forEach()的区别在于,有一个返回值。不修改原数组,返回的数组长度和原数组相同


var a = [1,2,3,4,5]; 
var b = a.map(function (value) {
return value+1
})
console.log(b); //返回[2,3,4,5,6]


10、filter()方法,返回的是调用数组的一个子集


var a = [1,2,3,4,5]; 
var b = a.filter(function (value) {
return value > 3
})
console.log(b); //返回[4,5]
注意:如果使用map()方法,返回的是[false, false, false, true, true]


filter()会跳过稀疏数组中缺少的元素,他的返回数组总是稠密的。所以可以用一下方法来压缩稀疏数组的空缺。


var a = [1,2,,,5]; 
var b = a.filter(function (value) {
return true
})
console.log(b); //返回[1,2,5]