vue项目中遇到的数组数组合并、拆分、排序、筛选、数组重组

vue项目中遇到的数组数组合并、拆分、排序、筛选、数组重组

最近，我们项目快要做完了，想做一些总结，今天做一些我的项目中数组经常遇到的一下问题，一般是数组合并、拆分、排序、筛选、数组重组等问题。

数组合并、去重用两种方法：

第一种方法：
一般用作两个数组合并、去重，简单方便

<template><div></div>
</template>
<script>export default {data(){return{arr1: ['a','b'],  arr2:['a','c','d'], }},created(){atFunction(this.arr1,this.arr2);},mounted(){},methods: {concatFunction(arr1,arr2){//不要直接使用var arr = arr1，这样arr只是arr1的一个引用，两者的修改会互相影响  var arr = at();  //或者使用slice()复制，var arr = arr1.slice(0)  for(var i=0;i<arr2.length;i++){  arr.indexOf(arr2[i]) === -1 ? arr.push(arr2[i]) : 0;  }  console.log('concatFunction',arr)  },},}
</script>

第二种方法：
可以是两个或者两个及以上

<template><div></div>
</template>
<script>export default {data(){return{arr1: ['a','b'],  arr2:['a','c','d'], arr3:[1,'d',undefined,true,null],}},created(){atFunction2(this.arr1,this.arr2,this.arr3);},mounted(){},methods: {concatFunction2(arr1,arr2,arr3){ // ...合并数组let arr12=[...arr1,...arr2,...arr3] let delsame=[];let sames=[];let ss=[];for(let i=0;i<arr12.length;i++){                if(delsame.indexOf(arr12[i])==-1){// 不一样的元素delsame.push(arr12[i])}else{//这里是拿出相同的元素sames.push(arr12[i])ss=[...new Set(sames)]}}console.log(delsame,sames,ss)},},}
</script>

数组拆分的方法：

<template><div></div>
</template>
<script>export default {data(){return{arr:[1,2,3,4,5,2,4,4,4,1,6,7,8,3,9,10,10],}},created(){atFunction(this.arr);},mounted(){},methods: {concatFunction(arr){let delsame=[];let sames=[];let ss=[];for(let i=0;i<arr.length;i++){                if(delsame.indexOf(arr[i])==-1){// 不一样的元素delsame.push(arr[i])}else{//这里是拿出相同的元素sames.push(arr[i])// 相同元素去重ss=[...new Set(sames)]}}console.log(delsame,sames,ss)},},}
</script>

数组排序的方法：

第一种：js中的sort()方法

<template><div></div>
</template>
<script>export default {data(){return{arr:[33,43,13,10,55,24,30,15,16,18,20],}},created(){atFunction(this.arr);},mounted(){},methods: {concatFunction(arr){console.log(arr.sort(this.func));},func(a,b){return a-b;},},}
</script>

第二种方法：

<template><div></div>
</template>
<script>export default {data(){return{arr:[33,43,13,10,55,24,30,15,16,18,20],}},created(){atFunction(this.arr);},mounted(){},methods: {concatFunction(arr){for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){//如果第一个比第二个大，就交换他们两个位置if(arr[i]>arr[j]){var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}}console.log(arr);},},}
</script>

数组筛选的方法：

第一种方法：

<template><div></div>
</template>
<script>export default {data(){return{aim:[{name:'Anne', age: 23, gender:'female'},{name:'Leila', age: 16, gender:'female'},{name:'Jay', age: 19, gender:'male'},{name:'Mark', age: 40, gender:'male'}],}},created(){atFunction(this.arr);},mounted(){},methods: {concatFunction(){var newaim = this.filterByName(this.aim,'Leila')console.log(newaim)},filterByName(aim, name) {return aim.filter(item => item.name == name)},}}
</script>

第二种方法：
第一种方法的升级，又加了一个年龄为限制条件。

<template><div></div>
</template>
<script>export default {data(){return{aim:[{name:'Anne', age: 23, gender:'female'},{name:'Leila', age: 16, gender:'female'},{name:'Jay', age: 19, gender:'male'},{name:'Mark', age: 40, gender:'male'}],}},created(){atFunction(this.arr);},mounted(){},methods: {concatFunction(){var newaim = this.filterByName(this.aim,'Leila','16')console.log(newaim)},filterByName(aim,query,age) {if (query !== '') {var prooptions = aim.filter(item => {return (item.name == null ||item.age === age) ? false : item.name.indexOf(query) > -1})return prooptions} else {var prooptions = [];return prooptions}},}}
</script>

第一种数组重组情况：

把原数组相同的key取出来合并到一起，并组成新数组

<template><div></div>
</template>
<script>export default {data(){return{type:[{name:'苹果',type:'水果',id:1},{name:'橘子',type:'水果',id:2},{name:'香蕉',type:'水果',id:3},{name:'小狗',type:'动物',id:4},{name:'小猫',type:'动物',id:5},{name:'小猪',type:'动物',id:6},{name:'西红柿',type:'蔬菜',id:7},{name:'黄瓜',type:'蔬菜',id:8},{name:'南瓜',type:'蔬菜',id:9},]}},created(){this.pe);},mounted(){},methods: {valueArray(data){var dataObject = {};data.forEach(item => {Object.keys(item).forEach(value=>{// hasOwnProperty()方法用于检测一个对象是否含有特定的自身属性，返回一个布尔值dataObject.hasOwnProperty(value) ? dataObject[value].push(item[value]) : dataObject[value] = [item[value]]})})console.log(dataObject)},}}
</script>

第二种数组重组情况：

把相同类放到一个数组里面，相同的部分作为数组里的一个键值，然后在数组里面组成一个二级数组

<template><div></div>
</template>
<script>export default {data(){return{type:[{name:'苹果',type:'水果',id:1},{name:'橘子',type:'水果',id:2},{name:'香蕉',type:'水果',id:3},{name:'小狗',type:'动物',id:4},{name:'小猫',type:'动物',id:5},{name:'小猪',type:'动物',id:6},{name:'西红柿',type:'蔬菜',id:7},{name:'黄瓜',type:'蔬菜',id:8},{name:'南瓜',type:'蔬菜',id:9},]}},created(){this.pe);},mounted(){},methods: {valueArray(data){// 把源数据先变成目标数据的规则var oldDataRule = []data.forEach(el => {var oldObj = {type: el.type,types:[]}var typeObj = {name: el.name,type: el.type,id: el.pes.push(typeObj)oldDataRule.push(oldObj)})/*** 先去重，后合并* 1、源数据去重* 2、把去重后的数据和源数据中相同name的数据合并types*/var newData = [];var newObj = {};oldDataRule.forEach((el, i) => {console.pe)if (!pe]) {newData.push(el);pe] = true}else {newData.forEach(el => {if (el.type === oldDataRule[i].type) {el.types = [...el.types, ...oldDataRule[i].types]; }})} })console.log(newData);},}}
</script>