[TOC]
### 1. 獲取相差時間/運行時間
~~~
const getTime = () => {
const date1 = '2021/09/16 00:00:00'; // 開始時間
const date2 = new Date(); // 結束時間
const date3 = date2.getTime() - new Date(date1).getTime(); // 時間差的毫秒數
// 計算出相差天數
const days = Math.floor(date3 / (24 * 3600 * 1000));
// 計算出小時數
const leave1 = date3 % (24 * 3600 * 1000); // 計算天數后剩余的毫秒數
const hours = Math.floor(leave1 / (3600 * 1000));
// 計算相差分鐘數
const leave2 = leave1 % (3600 * 1000); // 計算小時數后剩余的毫秒數
const minutes = Math.floor(leave2 / (60 * 1000));
// 計算相差秒數
const leave3 = leave2 % (60 * 1000); // 計算分鐘數后剩余的毫秒數
const seconds = Math.round(leave3 / 1000);
const temp = { days, hours, minutes, seconds };
return temp;
};
~~~
### 2. 數據合并統計
~~~
getChartData(value) {
if (!Array.isArray(value)) return [];
const fruitTotal = []; // 最終數據結果
const nameContainer = {};
value.forEach(item => {
let tempData =moment(item.gmt_create).format('YYYY-MM-DD');
nameContainer[tempData] = nameContainer[tempData] || [];
nameContainer[tempData].push(item);
});
const fruitName = Object.keys(nameContainer);
fruitName.forEach(nameItem => {
let count = nameContainer[nameItem].length;
fruitTotal.push({ Data: nameItem, sales: count });
});
return fruitTotal.sort((a,b)=>a.Data.split('-')[2]-b.Data.split('-')[2]);
}
var fruits =
[{
name: 'apple',
value: 1
},
{
name: 'apple',
value: 2
}, // 總計3個蘋果
{
name: 'banana',
value: 2
},
{
name: 'banana',
value: 3
}]; // 總計5個香蕉
var fruitTotal = []; // 存最終數據結果
// 數據按照水果名稱進行歸類
var nameContainer = {}; // 針對鍵name進行歸類的容器
fruits.forEach(item => {
nameContainer[item.name] = nameContainer[item.name] || [];
nameContainer[item.name].push(item);
});
console.log(nameContainer); // 按照水果名稱歸類完成：{ apple: Array(2), banana: Array(2) }
// 統計不同種類水果的數量
var fruitName = Object.keys(nameContainer); // 獲取水果種類：["apple", "banana"]
fruitName.forEach(nameItem => {
let count = 0;
nameContainer[nameItem].forEach(item => {
count += item.value; // 遍歷每種水果中包含的條目計算總數
});
fruitTotal.push({'name': nameItem, 'total': count});
});
console.log(fruitTotal);
// 輸出結果：
// [{ name: "apple", total: 3 },
// { name: "banana", total: 5 }]
~~~
### 3. 更新url
~~~
import qs from '@alipay/bigfish/util/query-string';
// 更新 url
export function updateLocation(searchData: {}) {
const searchDataTemp = searchData;
const newQsParams = {
...qs.parse(location.search.replace('?', '')),
search: Object.keys(searchDataTemp)
.map(item => {
if (!searchDataTemp[item] || !searchDataTemp[item].length) {
delete searchDataTemp[item];
return;
}
return `${item},${searchDataTemp[item]}`;
})
.join('|'),
};
history.replaceState(null, '', `${location.pathname}?${qs.stringify(newQsParams)}`);
}
useEffect(() => {
const search = qs.parse(location.search.replace('?', '')).search as any || 'name';
const searchData = {};
let newSearch = [];
// search=a,1|b,2&search=c,3
if (Array.isArray(search)) {
newSearch = lodashFlatten(search.map(item => item.split('|')));
} else if (search) {
newSearch = search.split('|');
}
newSearch.forEach(item => {
const obj = item.split(',');
if (obj[0] && obj[1]) {
// 處理tags 這種 search=tags,1,2 case
searchData[obj[0]] = item.substr(obj[0].length + 1);
}
});
if (searchData.value) {
searchData.value = searchData.value.split(',').filter(Boolean);
}
}, [])
~~~
#### 數字格式化（金錢，分割）
~~~
329472343.1415926.toLocaleString('en-US')
// '329,472,343.142'
~~~
### 文件格式轉換
#### 1、file-----二進制文件
~~~
/**
* file => base64
* @param {*} file
*/
export function asyncFileToBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
// target.result 該屬性表示目標對象的DataURL
resolve(e.target.result)
}
})
}
/**
* imageFile => base64
* @param {*} file
*/
export function asyncImage2Base64(file) {
return new Promise((resolve, reject) => {
const img = new Image()
img.src = file
img.onload = function() {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
var dataURL = canvas.toDataURL('image/' + ext)
resolve(dataURL)
// console.log(11,dataURL)
}
})
}
~~~
#### 2、二進制-----轉文件
~~~
/**
* 二進制轉文件
* @param {*} blobs blob對象
* @param {*} fileName 文件名
*/
export function blob2File(blobs, fileName) {
const blob = new Blob([blobs])
const href = window.URL.createObjectURL(blob) // 創建下載的鏈接
const aEle = document.createElement('a') // 創建a標簽
aEle.href = href
aEle.download = fileName // 下載后文件名
document.body.appendChild(aEle)
aEle.click() // 點擊下載
document.body.removeChild(aEle) // 下載完成移除元素
window.URL.revokeObjectURL(href) // 釋放掉blob對象
}
~~~
#### 3、base64-----二進制
~~~
/**
* 將base64編碼轉換為二進制文件
* @param {*} base64
*/
export function base642File(base64) {
const arr = base64.split(',')
const mime = arr[0].match(/:(.*?);/)[1]
const bstr = atob(arr[1])
let n = bstr.length
const u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new Blob([u8arr], { type: mime })
}
~~~
### 4、 對象數組去重
~~~
[參考](https://www.lodashjs.com/docs/lodash.uniqWith)
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
~~~~
### 5 、 raact多次setState合并
~~~
import ReactDOM from "react-dom";
ReactDOM.unstable_batchedUpdates(() => {
// 僅僅加了unstable_batchedUpdates
// 這里的兩個setState會合并執行一次。
setNum(2);
setStr('c');
});
~~~
### 6。 循環調用promis
~~~
const processUrlList = (
await Promise.all(
needProcessList?.map(async (v: any) => {
const processRes = await TableAntdApi.getProcessUrl({
id: v.id,
});
const { success, data } = processRes || {};
if (success && data) {
return {
id: v.id,
processUrl: data,
};
}
return null;
}),
)
)?.filter(Boolean);
~~~
### 7 useEffect監聽對象（自定義hooks）
~~~
import React, { useEffect, useRef } from 'react';
export function useDeepCompareMemoize(value) {
const ref = useRef(value)
if (!_.isEqual(value, ref.current)) {
ref.current = value
}
return ref.current
}
const useDeepCompareEffect = (callback, dependencies)=> {
return useEffect(callback, useDeepCompareMemoize(dependencies))
}
export default useDeepCompareEffect
~~~
