在项目中经常需要处理数据，经常需要操作数组和对象， 且正确使用reduce能够节省很多不必要的代码
1. 造假数据，例如数组
1.1 使用repeat方法：
'abc'.repeat(3).split('')
// ["a", "b", "c", "a", "b", "c", "a", "b", "c"]
1.2 使用fill方法：
Array(5).fill('abc')
// ["abc", "abc", "abc", "abc", "abc"]
2. 统计数组中相同项出现的次数：
const arr = ['mo', 'melantha', 'mo', 'nian', 'chen', 'melantha'];
const nameArr = arr.reduce((prev, name) => {
prev[name] = prev[name] ? ++prev[name] : 1;
return prev
}, {});
// {mo: 2, melantha: 2, nian: 1, chen: 1}
3. 把数组中按相同元素归类： eg： 把dateArr数组中的日期，出现在同一天的进行归类
const dateArr = [
{
date: '2019-06-12',
count: 5
},
{
date: '2019-06-13',
count: 4
},
{
date: '2019-05-12',
count: 3
},
{
date: '2019-06-12',
count: 8
},
{
date: '2019-06-13',
count: 9
},
{
date: '2019-04-12',
count: 1
},
];
const dateObj = dateArr.reduce((prev, item) => {
if (prev[item.date]) {
prev[item.date].push(item)
} else {
prev[item.date] = [item]
}
return prev
}, {});
image.png
4. 将多维数组平铺到一维数组
const flatten = (arr) => {
const result = arr.reduce((prev, item) => {
if(Array.isArray(item)) {
return prev.concat(flatten(item))
} else {
return prev.concat(item)
}
}, [])
return result;
}
flatten(['a', [1,2,3, ['c', [9, [3], 10],'k']], ['4', '7']]);
// ["a", 1, 2, 3, "c", 9, 3, 10, "k", "4", "7"]
5. 将多维数组平铺到指定深度
const flatten = (arr, depth = 1) => {
if ( depth !== 1) {
const value1 = arr.reduce((prev, item) => {
if(Array.isArray(item)) {
return prev.concat(flatten(item, depth - 1));
} else {
return prev.concat(item);
}
} ,[]);
return value1;
} else {
const value2 = arr.reduce((prev, item) => {
return prev.concat(item)
}, []);
return value2;
}
}
flatten(['a', [1,2,3, ['c', [9, [3], 10],'k']], ['4', '7']], 4)
// ["a", 1, 2, 3, "c", 9, 3, 10, "k", "4", "7"]
flatten(['a', [1,2,3, ['c', [9, [3], 10],'k']], ['4', '7']], 2)
// ["a", 1, 2, 3, "c", [9, [3], 10] , "k", "4", "7"]
6. 将一位数组转为二维数组
一维数组数据：
一维数组.png
二维数组结果数据：
二维数组.png
方法一：splice效率极低，每次splice操作除了需要分配新的内存区域去存储数据外，还需要不断操作元素的下标，大量移动元素，如下start为0，就需要每个元素都移动一次
参考：https://segmentfault.com/a/1190000020711978
const returnArr = (arrs: any, num = 3) => {
console.time('数据cameraListDatacameraListData');
const list = _.cloneDeep(arrs);
const result = [];
while (list.length > 0) {
result.push(list.splice(0, num));
}
console.timeEnd('数据cameraListDatacameraListData');
return result;
};
耗时： 1901.871826171875 ms
方法二：slice
const returnArr = (arrs: any, num = 3) => {
console.time('数据cameraListDatacameraListData');
const list = _.cloneDeep(arrs);
const result: any = [];
let linNum =
list.length % num === 0
? list.length / num
: Math.floor(list.length / num + 1);
for (let i = 0; i < linNum; i++) {
let temp = arrs.slice(i * num, (i + 1) * num);
result.push(temp);
}
console.timeEnd('数据cameraListDatacameraListData');
return result;
};
耗时： 172.5029296875 ms
方法三：
const returnArr = (arrs: any, num = 3) => {
console.time('数据cameraListDatacameraListData');
var result: any = [];
for (var i = 0, j = 0; i < arrs.length; i += n) {
result[j] = [];
for (var k = 0; k < n; k++) {
if (i + k < arrs.length) {
result[j].push(arrs[i + k]);
}
}
j++;
}
console.timeEnd('数据cameraListDatacameraListData');
return result;
};
耗时： 5.12890625 ms
方法四：
const returnArr = (arrs: any, num = 3) => {
console.time('数据cameraListDatacameraListData');
const result: any = [];
arrs.forEach((item: any, index: any) => {
const linNum = Math.floor(index / num); // 计算该元素为第几个数组内
if (!result[linNum]) {
// 判断是否存在
result[linNum] = [];
}
result[linNum].push(item);
});
console.timeEnd('数据cameraListDatacameraListData');
return result;
};
耗时： 4.59814453125 ms