数组映射拆分连接，javascript

Question

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

为什么它会在“.”上连接数组元素然后使用相同的稀释器将它们分开。从搜索结果传回什么类型的数组？

    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) : []);
  };

Answer 1

如果我们将 searchResult 的功能翻译成简单的英语，我认为它会是这样的：

Generate & return an array of objects which length should be between 0 and 5 (including both values).

Objects in array should have this shape:
{
    value: string,
    label: JSX.Element
}

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

发生这种情况是因为 new Array(5) returns 一组空单元格被 .map(...) 忽略。更常见的处理方式是这样的：

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

数组映射拆分连接，javascript

array map split join, javascript

javascript

split

join

array-map

reactjs