JavaScript 功能数组实现

478 阅读3分钟

蜡笔小新语录: 人生就是手脚快的人赢啊,只是傻傻看着,就什么也得不到哦!
作者希冀: 希望前端开发者 在情场得意, 在基金和股票市场 一路涨涨涨

以下只是笔者在业务开发中会遇见的对于数据处理的一些数组方法 ,总结下来是为了节约开
发工时,增加摸鱼的时间;分享出来是为了帮助cv工作者,增加他们的摸鱼时间。
我们要一起做最强CV工程师

JavaScript 功能数组方法实现

分割指定长度的元素数组

// 有兴趣的可以看一下函数的默认参数
const  arrayChunk = (list, size=1, arrayPiece=[] ) => {
  const temp = [...list]
  if(size <= 0 ){
  	retrun arrayPiece
  }
  while(temp.length){
  	arrayPiece.push(temp.splice(0,size))
  }
  reutrn arrayPiece 
}
console.log(arrayChunk([1, 2, 3, 4])) // [[1], [2], [3], [4]]
console.log(arrayChunk([1, 2, 3, 4, 5, 6], 2)) // [[1, 2, 3], [4, 5, 6]]
console.log(arrayChunk([1, 2, 3, 4], 0)) // []
console.log(arrayChunk([1, 2, 3, 4], -1)) // []

数组的交集

// 1. 普通数组
intersection(list, ...args)=> {
  // 采用箭头函数简写的语法
  list.filter(item => args.every(list => list.includes(item)))
}
console.log(intersection([1222, 11], [22, 3])) // [22]
console.log(intersection([11, 22], [33, 4455])) // []

// 2. 对象数组
cosnt brandList=[{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]
cosnt GoodBrandList=[{ brand:'领克', id:1},{ brand:'沃尔沃',id:2 } ]

const result= GoodBrandList.filter( item => {
   return  brandList.some(childItem => JSON.stringfy(childItem) === JSON.stringfy(item) )
})
console.log(result);  // [{ brand:'沃尔沃',id:2 } ]

数组并集

// 普通数组
const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const result = arr1.concat(arr2.filter(item => !arr1.includes(item)))
console.log(result) //[1, 2, 3, 4, 5, 8, 9, 6, 7]

// 对象数组
cosnt brandList=[{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]
cosnt GoodBrandList=[{ brand:'领克', id:1},{ brand:'沃尔沃',id:2 } ]
let arrayBrands = brandList.concat(GoodBrandList);
let result = [];
let obj = [];
// 具体可以查看reduce的传入参数的意义
// 这部分在做去重
result = arrayBrands.reduce(function (prev, cur, index, arr) {
  obj[cur.id] ? '' : obj[cur.id] = true && prev.push(cur);
  return prev;
}, []);
console.log(result);
// [{ brand:'吉利', id:1},{ brand:'领克', id:1},{ brand:'沃尔沃',id:2 } ]

数组差集

// 普通数组
const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const diff = arr1.filter(item => !new Set(arr2).has(item))
console.log(diff) //[ 1, 2, 3, 4 ]

// 对象数组
// brandList 相对于 GoodBrandList 所没有的
cosnt brandList=[{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]
cosnt GoodBrandList=[{ brand:'领克', id:1},{ brand:'沃尔沃',id:2 } ]
let result = brandList.filter(function (item) {
  return GoodBrandList.every(childitem => JSON.stringify(childitem) !== JSON.stringify(item))
})
console.log(result); // [{ brand:'领克', id:1} ]
// 数组替换可以结果交换

数组补集

// 两个数组各自没有的集合
// 普通数组
const arr1 = [1, 2, 3, 4, 5, 8, 9]
const arr2 = [5, 6, 7, 8, 9];
const difference = Array.from(new Set(arr1.concat(arr2).filter(v => !new Set(arr1).has(v) || !new Set(arr2).has(v)))) 
console.log(difference) //[ 1, 2, 3, 4, 6, 7 ]

// 数组对象
cosnt brandList=[{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]
cosnt GoodBrandList=[{ brand:'领克', id:1},{ brand:'沃尔沃',id:2 } ]
let newBrands = brandList.concat(GoodBrandList);
let result = newBrands.filter(function (item) {
  return brandList.every(childItem => JSON.stringify(childItem) !== JSON.stringify(item)) || GoodBrandList.every(childItem => JSON.stringify(childItem) !== JSON.stringify(item))
})
console.log(result); 
// [{ brand:'领克', id:1},{ brand:'吉利', id:1} ]

数组去重

// 普通数组
console.log(Array.from(new Set([1, 2, 3, 3, 4, 4]))) //[1,2,3,4]
console.log([...new Set([1, 2, 3, 3, 4, 4])]) //[1,2,3,4]

// 数组对象
cosnt brandList=[{ brand:'吉利', id:1},{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]
 const result = [];
 brandList.forEach(item=>{
    !result.some(childItem => JSON.stringify(childItem) === JSON.stringify(item)) && result.push(item)
 })
 console.log(result) 
 // [{ brand:'吉利', id:1},{ brand:'沃尔沃',id:2  }  ]

数组扁平化

//ES6 
let  es6Arr = [0,[1, 2], [3, 4]]; 
console.log(es6Arr.flat(Infinity))

// reduce
function flatten(arr) {  
    return arr.reduce((result, item)=> {
        return result.concat(Array.isArray(item) ? flatten(item) : item);
    }, []);
}

// ES5 -- 递归
function myFlat(arr){
    let  flatArr = []
    arr.map(item  => Array.isArray(item) === true ? flatArr = flatArr.concat(myFlat(item)) : flatArr.push(item) )
    return flatArr
}