js常用的数据转换方法（日期，树tree）
本文主题：数据转换方法
创作日期：2020.08.28
个人主页：KinHKin的博客_CSDN博客-vue,性能优化,前端开发规范领域博主
在前端开发中，数据类型转换十分常见，本文记录的目的是方便后续的查阅和使用。
目录
1.date转string类型
1.1第一种方法：
1.2 第二种方法
2.string类型转Date
3.数组转为tree
4.tree转数组类型
4.1第一种方法
4.2第二种方法
4.3第三种方法
1.date转string类型
1.1第一种方法：
new Date()的格式转换成指定分隔符的格式
let date = new Date();
// 转成 YYYY-MM-DD 格式
// 只需要传入分隔符 缺点不够扩展
function formatDateToString(date, foramt = "-") {
return (
date.getFullYear() +
foramt +
(date.getMonth() + 1) +
foramt +
date.getDate()
);
}
console.log(formatDateToString(date, "."));
console.log(
date.getFullYear(),
date.getMonth() + 1,
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds()
);
输出：2022 8 28 11 17 19
2022.8.281.2 第二种方法
在原生Date对象的原型链上封装，好处实用性强，范围广
/ 对Date的扩展，将 Date 转化为指定格式的String
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
// 例子：
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
S: this.getMilliseconds(), //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
};
// 调用：
var time1 = new Date().Format("yyyy-MM-dd");
var time2 = new Date().Format("yyyy-MM-dd HH:mm:ss");
console.log(time1, time2);
输出：2022-08-28 2022-08-28 11:21:572.string类型转Date
let str = '2020-09-20 20:20:10'
console.log(new Date(str))
输出：2020-09-20T12:20:10.000Z3.数组转为tree
一个一维数组要想能转化为树，必须至少包含2个字段，id和parentId。id是每个节点的唯一性标识；parentId是父id的意思，用于建立节点之间的关联。
// toTree 函数用于把一维数组转换为tree
function toTree(data, config) {
const { id = "id", parentId: pId = "parentId" } = config || {};
const ids = data.map((item) => item[id]);
const result = [],
waitRes = [];
data.forEach((item) => {
if (ids.includes(item[pId])) {
waitRes.push(item);
} else {
result.push(item);
}
});
const flatData = [...result];
while (waitRes.length) {
const flatIds = flatData.map((f) => f[id]);
const node = waitRes.find((w) => flatIds.includes(w[pId]));
const parNode = flatData.find((f) => f[id] === node[pId]);
waitRes.splice(waitRes.indexOf(node), 1);
if (parNode.children) {
parNode.children.push(node);
} else {
parNode.children = [node];
}
flatData.push(node);
}
return result;
}
const json = [
{ id: 1, parentId: -1, name: "menu-1" },
{ id: 3, parentId: 2, name: "menu-1 item-1" },
{ id: 2, parentId: 1, name: "menu-1-1" },
{ id: 4, parentId: -1, name: "menu-2" },
{ id: 5, parentId: 4, name: "menu-2 item-1" },
];
console.log(JSON.stringify(toTree(json), null, 2));
输出：[
{
"id": 1,
"parentId": -1,
"name": "menu-1",
"children": [
{
"id": 2,
"parentId": 1,
"name": "menu-1-1",
"children": [
{
"id": 3,
"parentId": 2,
"name": "menu-1 item-1"
}
]
}
]
},
{
"id": 4,
"parentId": -1,
"name": "menu-2",
"children": [
{
"id": 5,
"parentId": 4,
"name": "menu-2 item-1"
}
]
}
]4.tree转数组类型
4.1第一种方法
/**
* 树转数组扁平化结构
* 深度优先遍历 堆栈 后进先出
*/
function toArray(node) {
let stack = node,
data = [];
while (stack.length != 0) {
let pop = stack.pop();
data.push({
id: pop.id,
name: pop.name,
parentId: pop.parentId,
});
let children = pop.children;
if (children) {
for (let i = children.length - 1; i >= 0; i--) {
stack.push(children[i]);
}
}
}
return data;
}
let resceshi = [
{
id: 1,
parentId: -1,
name: "menu-1",
children: [
{
id: 2,
parentId: 1,
name: "menu-1-1",
children: [
{
id: 3,
parentId: 2,
name: "menu-1 item-1",
},
],
},
],
},
{
id: 4,
parentId: -1,
name: "menu-2",
children: [
{
id: 5,
parentId: 4,
name: "menu-2 item-1",
},
],
},
];
console.log(toArray(resceshi), "tree转数组");
输出：[
{ id: 4, name: 'menu-2', parentId: -1 },
{ id: 5, name: 'menu-2 item-1', parentId: 4 },
{ id: 1, name: 'menu-1', parentId: -1 },
{ id: 2, name: 'menu-1-1', parentId: 1 },
{ id: 3, name: 'menu-1 item-1', parentId: 2 }
] tree转数组4.2第二种方法
/**
* 树转数组扁平化结构
* 深度优先遍历 递归
*/
function deepTraversal(data) {
const result = [];
data.forEach(item => {
const loop = data => {
result.push({
id: data.id,
name: data.name,
parentId: data.parentId
});
let child = data.children
if(child){
for(let i = 0; i < child.length; i++){
loop(child[i])
}
}
}
loop(item);
})
return result;
}4.3第三种方法
/**
* 广度优先
* 队列 先进先出
*/
function wideTraversal(node){
let stack = node,
data = [];
while(stack.length != 0){
let shift = stack.shift();
data.push({
id: shift.id,
name: shift.name,
parentId: shift.parentId
})
let children = shift.children
if(children){
for(let i = 0; i < children.length; i++){
stack.push(children[i])
}
}
}
return data
}