【前端日常开发记录】001.搜索指定数据项

虽然这是一个很简单的小需求，但是里面能带给你一些算法对于开发中的好处。

• 从Redux里面取出你的数据

/**
 * useSelector
 * 作用：共享状态,从Redux的store中提取数据（state）
 * 例子：const num=useSelector(state=>state.num)
 */
const { yourData } = useSelector(({ root, xxList }: any) => ({ ...root, ...xxList }));

• 初始化你要传入antd-Table的Col，Array里面放的是每一个Col的参数，作为一个数据映射，并允许改变render
• 所以我们就可以通过dataIndex的xx，来取出text，然后传入render里面进行BFSSearch

const xxTableCols = [
	{
	  title: 'xx',
	  dataIndex: 'xx',
	  key: 'xx',
	  render: (text: string) => {
	    return (
	      <span>{BFSSearch(yourData, "key", text, "value")}</span>
	    );
	  }
	},
];

<Table
  columns={xxTableCols}
/>

• 下面是BFSSearch的具体使用方法

var objs = [
    {
        key: 1,
        value: 1,
        children: [
            {
                key: 2,
                value: 2,
                children: [
                    {
                        key: 5,
                        value: 5,
                        children: [
                            {
                                key: 14,
                                value: 14,
                                children: null,
                            }, 
                            {
                                key: 15,
                                value: 15,
                                children: null,
                            },
                            {
                                key: 16,
                                value: 16,
                                children: null,
                            }
                        ]
                    },
                    {
                        key: 6,
                        value: 6,
                        children: null,
                    },
                    {
                        key: 7,
                        value: 7,
                        children: null,
                    }
                ]
            },
            {
                key: 3,
                value: 3,
                children: [
                    {
                        key: 8,
                        value: 8,
                        children: null,
                    }, 
                    {
                        key: 9,
                        value: 9,
                        children: null,
                    },
                    {
                        key: 10,
                        value: 10,
                        children: null,
                    }
                ]
            },
            {
                key: 4,
                value: 4,
                children: [
                    {
                        key: 11,
                        value: 11,
                        children: null,
                    }, 
                    {
                        key: 12,
                        value: 12,
                        children: null,
                    },
                    {
                        key: 13,
                        value: 13,
                        children: null,
                    }
                ]
            }
        ]
    }
]
function BFSSearch(treeData, idName, idValue, dataName) {
    var queue = [...treeData]
    var curIndex = 0
    while (curIndex < queue.length) {
      let curNode = queue[curIndex]
      if(curNode[idName] === idValue) {
        return curNode[dataName];
      }
      if (curNode.children) {
        queue = queue.concat(curNode.children)
      }
      curIndex++
    }
    return "-";
}
console.log(BFSSearch(objs, "key", 1, "value"));
// 1

• 核心思想是：循环到某一层，就把该node下面的一层（children）压入queue里面（通过concat），然后该node进行相关操作（这里是判断node[key]的value跟text一不一样）后出queue。
• 那么也可以改写成：

function BFS(treeData, callback) {
  let queue = [...treeData];
  let curIndex = 0;
  while (curIndex < queue.length) {
    let curNode = queue[curIndex];
    callback(curNode);
    if (curNode.children) {
      queue = queue.concat(curNode.children);
    }
    curIndex++;
  }
  return treeData;
}

搜索方法汇总