在开发项目中，经常会遇到对数组的操作，比如对数组的数据进行删减或增加，同时也会对每个数组里的数据进行删减，下面就举个例子说明一下。
直接给一段代码
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]
