Question

我有一个数组，我希望能够将它分成2个组件，所以就像前5个元素一样，进入一个元素，剩下的就是第二个元素。我知道我必须使用切片，我可以获得第一个组件但不确定第二个组件。

我有这样的事情：

if (item.children) {
  return item.children.slice(0, 5).map((childItem) => {
    const navItem = (
      <Link activeClassName={styles.active} to={childItem.url}>{childItem.text}</Link>
    )
    return (
      <li key={childItem.id}>
        {navItem}
      </li>
    )
  })
}

那么如何让其他组件出现，比如

<li key={childItem.id}>
   {navItem}
</li>
{navExtra}

包含数组中所有剩余的元素吗？

最终的HTML应该是这样的：

<ul>
    <!-- // first five elements of the array -->
    <li><a href="Item 1">Item 1</a></li>
    <li><a href="Item 2">Item 2</a></li>
    <li><a href="Item 3">Item 3</a></li>
    <li><a href="Item 4">Item 4</a></li>
    <li><a href="Item 5">Item 5</a></li>
    <!-- // new component  -->
    <li>
      <button>Extra</button>
      <ul>
        <!-- // remaning elements of the array -->
        <li><a href="Item 6">Item 6</a></li>
        <li><a href="Item 7">Item 7</a></li>
        <!-- // etc -->
      </ul>
    </li>
</ul>

Answer 1

变量将真正有助于您的代码可读性。 slice(beginIndex, endIndex)和slice(begin)是关键。

您已经知道slice(0,5)将获得数组的前半部分。

var x = slice(5)将从第五个元素到结尾获取数组的组件。您可以调用map()并对这些元素进行任何其他处理以获取要显示的内容。

MSDN docs for slice

Answer 2

当你使用拼接时，它会改变原始数组，基本上会让你的item.children包含你想要包含在navExtra

中的所有元素

我们可以创建一个单独保存navItems和navExtra的返回对象，以便您单独渲染，在渲染中添加包裹<ul>等。

if (item.children) {
  let ret = {
    navItems: [],
    navExtra: []
  };
  navItems = item.children.splice(0, 5);

  ret.navItems.push(
    navItems.map(navItem => {
      return (
        <li key={navItem.id}>
          <Link activeClassName={styles.active} to={navItem.url}>{navItem.text}</Link>
        </li>
      )
    })
  )

  ret.navExtra.push(
    item.children.map(navExtra => {
      <li key={navExtra.id}>
         <Link activeClassName={styles.active} to={navExtra.url}>{navExtra.text}</Link>
      </li>
    })
  )
}

Answer 3

您可以使用<!DOCTYPE html> <html> <body> <div id="div1"> </div> <script> var array = ["this", "is", "a", "random", "array", "that", "i", "just", "made"]; var splitBy = Math.round(array.length / 2); //for first half for (var i = 0; i <= splitBy; i++){ var li = document.createElement("li"); var node = document.createTextNode(array[i]); li.appendChild(node); var element = document.getElementById("div1"); element.appendChild(li); } //for second half for (var i = splitBy + 1; i < array.length; i++){ var li = document.createElement("li"); var node = document.createTextNode(array[i]); li.appendChild(node); var element = document.getElementById("div1"); element.appendChild(li); } </script> </body> </html>创建HTML元素。这是一个如何做你想做的事情的例子：

a = np.empty((0, 2))
a = np.append(a, [[3,6]], axis=0)
a = np.append(a, [[1,4]], axis=0)

希望这有帮助！

将js数组分为2个组件

3 个答案: