zqy233的前端学习笔记过滤空值
在 JavaScript 中，有一些值被认为是 false，也就是在条件语句中被视为 false 值，这些值包括：
false0（数字零）""（空字符串）nullundefinedNaN（非数值）
除了上述值，其他所有值都被视为 true
Boolean函数可以判断是true和false，直接把该函数传给filter，就可以快速过滤空值
js
arr.filter(Boolean)
arr.filter(Boolean)
判断是否是数组
js
Array.isArray(arr)
Array.isArray(arr)
字符串数组转数字数组
Number函数可以将字符串转换成数字，直接把该函数传给map，就可以快速把字符串数组转数字数组
js
arr.map(Number)
arr.map(Number)
对树形数组根据某一属性进行过滤
js
/**
* 递归过滤节点，生成新的树结构
* @param {Node[]} nodes 要过滤的节点
* @param {node => boolean} predicate 过滤条件，符合条件的节点保留
* @return 过滤后的节点
*/
function deal(nodes, predicate) {
// 如果已经没有节点了，结束递归
if (!(nodes && nodes.length)) {
return []
}
const newChildren = []
for (const node of nodes) {
if (predicate(node)) {
// 如果节点符合条件，直接加入新的节点集
newChildren.push(node)
node.children = deal(node.children, predicate)
} else {
// 如果当前节点不符合条件，递归过滤子节点，
// 把符合条件的子节点提升上来，并入新节点集
newChildren.push(...deal(node.children, predicate))
}
}
return newChildren
}
const result = deal(data, node => node.resName.includes(''))
console.log(JSON.stringify(result, null, 4))
/**
* 递归过滤节点，生成新的树结构
* @param {Node[]} nodes 要过滤的节点
* @param {node => boolean} predicate 过滤条件，符合条件的节点保留
* @return 过滤后的节点
*/
function deal(nodes, predicate) {
// 如果已经没有节点了，结束递归
if (!(nodes && nodes.length)) {
return []
}
const newChildren = []
for (const node of nodes) {
if (predicate(node)) {
// 如果节点符合条件，直接加入新的节点集
newChildren.push(node)
node.children = deal(node.children, predicate)
} else {
// 如果当前节点不符合条件，递归过滤子节点，
// 把符合条件的子节点提升上来，并入新节点集
newChildren.push(...deal(node.children, predicate))
}
}
return newChildren
}
const result = deal(data, node => node.resName.includes(''))
console.log(JSON.stringify(result, null, 4))
树结构数组转扁平数组
js
export function treeToArray(tree) {
const arr = [];
function recursiveFunction(tree) {
for (let i = 0; i < tree.length; i++) {
arr.push(tree[i]);
if (tree[i].children && tree[i].children.length) {
recursiveFunction(tree[i].children);
}
}
}
recursiveFunction(tree);
return arr;
}
export function treeToArray(tree) {
const arr = [];
function recursiveFunction(tree) {
for (let i = 0; i < tree.length; i++) {
arr.push(tree[i]);
if (tree[i].children && tree[i].children.length) {
recursiveFunction(tree[i].children);
}
}
}
recursiveFunction(tree);
return arr;
}
为每个节点添加id字段
数组
js
const addIdField = (nodes, parentId = '') => {
nodes.forEach(node => {
const currentId = parentId ? `${parentId},${node.name}` : node.name;
node.id = currentId;
if (node.Children.length > 0) {
addIdField(node.Children, currentId);
}
});
return nodes;
};
const addIdField = (nodes, parentId = '') => {
nodes.forEach(node => {
const currentId = parentId ? `${parentId},${node.name}` : node.name;
node.id = currentId;
if (node.Children.length > 0) {
addIdField(node.Children, currentId);
}
});
return nodes;
};
对象
js
function addIdToTree(tree) {
const addIdToNode = (node, parentId) => {
const id = parentId ? parentId + ',' + node.name : node.name;
const newNode = { ...node, id };
if (node.Children && node.Children.length > 0) {
newNode.Children = node.Children.map(child => addIdToNode(child, id));
}
return newNode;
};
return addIdToNode(tree, null);
}
function addIdToTree(tree) {
const addIdToNode = (node, parentId) => {
const id = parentId ? parentId + ',' + node.name : node.name;
const newNode = { ...node, id };
if (node.Children && node.Children.length > 0) {
newNode.Children = node.Children.map(child => addIdToNode(child, id));
}
return newNode;
};
return addIdToNode(tree, null);
}