时间戳

首页 > 解决方案 > 数组映射拆分连接，javascript

javascript - 数组映射拆分连接，javascript

问题描述

我需要帮助来理解这段代码。它在做什么以及它返回的类型是什么。可能把它分成更小的块来理解。

为什么它会在“。”上加入数组元素 然后使用相同的 dilimentor 拆分它们。从搜索结果传回什么类型的数组？

    function getRandomInt(max, min = 0) {
      return Math.floor(Math.random() * (max - min + 1)) + min; // eslint-disable-line no-mixed-operators
    }

const searchResult = query =>
  new Array(getRandomInt(5))
    .join('.')
    .split('.')
    .map((item, idx) => {
      const category = `${query}${idx}`;
      return {
        value: category,
        label: (
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <span>
              Found {query} on{' '}
              <a
                href={`https://s.taobao.com/search?q=${query}`}
                target="_blank"
                rel="noopener noreferrer"
              >
                {category}
              </a>
            </span>
            <span>{getRandomInt(200, 100)} results</span>
          </div>
        ),
      };
    });

它被这样称呼

const [options, setOptions] = useState<SelectProps<unknown>["options"]>([]);

  const handleSearch = (value: string) => {
    setOptions(value ? searchResult(value) : []);
  };

我希望能够放置 console.log 来查看 setOptions 得到什么值。谢谢

----------------- Update 2-----------------
const searchResult = (query: string) => {
  const myArray = new Array(getRandomInt(5)).fill(0).map((item, idx) => {
    const category = `${query}${idx}`;
    return {
      value: category,
      label: labelElement(query, category),
    };
  });
  console.log(myArray);
  return myArray;
};


const labelElement = (query: string, category: string) => {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <span>
        Found {query} on <a>{category}</a>
      </span>
      <span>{getRandomInt(200, 100)} results</span>
    </div>
  );
};

const [options, setOptions] = useState<SelectProps<unknown>["options"]>([]);

  const handleSearch = (value: string) => {
    setOptions(value ? searchResult(value) : []);
  };

标签： javascriptreactjsjoinsplitarray-map

解决方案

如果我们searchResult用简单的英语翻译一下，我认为它会是这样的：

生成并返回一个长度应在 0 到 5 之间（包括两个值）的对象数组。

数组中的对象应具有以下形状：

{
    value: string,
    label: JSX.Element
}

.join('.').split('.')似乎需要使用 with 的技巧来使数组可迭代.map. 如果您尝试调用new Array(5).map(() => 'I am ignored ')，您将看到您将获得一个空数组，并且.map(...)部分将被简单地忽略。

发生这种情况是因为new Array(5)返回了一个被忽略的空单元格数组.map(...)。一个更常用的处理方法是这样的：

new Array(5).fill().map(() => 'Now it works!');

推荐阅读