如果数组只有3个项目并附加2个占位符，我是否可以.map（）由5个项目组成的数组？

Question

我想像这样映射5个项目的数组：

one
two
three
placeholder
placeholder

但是，如果数组只有3个项目，而我想用我的react组件中的占位符填充数组中的其余项目。我可以使用.map（）吗？像这样显示：

{{1}}

Answer 1

使用Array.from()创建一个占位符数组，以填充列表中缺少的位置，并与原始列表结合：

const Demo = ({ list, minLength = 5 }) => (
  <ul>
  {[
    ...list,
    ...Array.from({ length: minLength - list.length }, () => 'placeholder')
    ].map((i) => <li>{i}</li>)
  }
  </ul>
);

const list = ['a', 'b', 'c']

ReactDOM.render(
  <Demo list={list} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

您还可以使用Array.from()直接渲染项目：

const getLength = ({ length }, minLength) => minLength > length ? minLength : length;

const Demo = ({ list, minLength = 5 }) => (
  <ul>
  {Array.from({ ...list, length: getLength(list, minLength) }, o => 
    <li>{o === undefined ? 'placeholder' : o}</li>
  )}
  </ul>
);

const list = ['a', 'b', 'c']

ReactDOM.render(
  <Demo list={list} />,
  demo
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="demo"></div>

Answer 2

仅凭map不能满足您的要求。这里的其他建议很好，但我认为，像这样使用Array.from会更干净：

var list = ['one', 'two', 'three'];
var result = Array.from({length: 5}, (x, i) => i in list ? list[i] : 'placeholder');

console.log(result) // 'one', 'two', 'three', 'placeholder', 'placeholder'

这将产生由5个元素组成的数组，而不管list包含的元素是否多于5个，因此您可以摆脱对slice的调用。您可以在反应中使用它：

Array.from({length: 5}, (x, i) => {
    return <div>{i in list ? list[i] : 'placeholder'}</div>
})

Answer 3

不。正如Array.prototype.map文档所提到的，该函数返回a new array with the results of calling a provided function on every element in the calling array.，因为列表list仅包含3个元素，因此map函数将仅对这3个元素进行迭代。

但是，如果要将占位符添加到数组的末尾，则可以执行以下操作（或其他多种选择）：

const results = []
for (let i = 0; i < 5; i++) {
  results.push(list[i] || 'placeholder')
}

例如，使用以下列表：const list = ["a", "b", "c"]，上述代码的输出将为["a", "b", "c", "placeholder", "placeholder"]。

在React组件的上下文中，您可以映射到results上，并按照您的初衷用div将数组中的每个项目包装起来。

Answer 4

不是仅靠.map，不是-但是，如果长度不够，可以先push到slice ed数组：

const sliced = list.slice(0, 5);
const { length } = sliced;
if (length < 5) {
  sliced.push(...new Array(5 - length).fill('placeholder'));
}
sliced.map(...

Answer 5

否，您不能使用map()将其他元素追加到数组中。一种解决方案是首先检查输入数组的长度，并在必要时用其他元素填充它。然后map()，就像您一样。

Answer 6

const list = [1, 2, 3];
list.slice(0, 5).concat(new Array(5 - list.length));

Answer 7

一根衬垫（效率不作保证）：

const list5 = list.map(...).concat([placeholder, placeholder, placeholder, placeholder, placeholder]).slice(0,5);

如果您经常这样做，则placeholder []可能是常量。