React.js状态初始化值数组

Question

我正在尝试初始化一个布尔值数组，其中数组中特定位置的值不同。

如果我这样初始化状态，则为空。

state = {
    activeItems: [...new Array(5)].map((item, idx) =>
      idx === 1 ? true : false
    )
}

Answer 1

在映射数组之前，您必须先fill个数组：

state = {
    activeItems: new Array(5).fill().map((item, idx) => idx === 1)
}

const result = new Array(5).fill().map((item, idx) => idx === 1)
console.log(result)

也可以将idx === 1 ? true : false简化为idx === 1，并且不需要解构数组。

Answer 2

Array from为您提供了<empty slots>

的数组

问题是因为map没有迭代over empty spaces

let arr = new Array(5)

let modified = arr.map((e,i)=> console.log(i)) // prints nothing
console.log('modifed prints nothing')

使用填充填充空状态

let arr = new Array(5)

let modified = arr.fill(0).map((e,i)=> console.log(i))  //prints index

Answer 3

我不确定为什么您提到您的代码返回空数组。因为，它确实返回了预期的输出。

您可以使用Array.from来避免当前出现的任何不一致之处：

const state = {
    activeItems: Array.from({length:5}, (_, idx) => idx === 1)
}

console.log(state)

Array.from的第二个参数是map函数。

Answer 4

该代码可在本机ES6中直接使用：

[...new Array(5)].map((item, idx) =>
  idx === 1 ? true : false
)

结果

  

[false，true，false，false，false]

数组。

与它的任何不一致都是由使用的编译器及其对...数组扩展语法的实现引起的。在某些实现中，这可能会导致代码不兼容，尤其是禁用了downlevelIteration编译器选项的TypeScript。例如，它在Stackblitz中甚至在JS项目中都曾经使用过。如果没有下层迭代，它将被转换为：

new Array(5).slice().map(function (item, idx) {
    return idx === 1 ? true : false;
});

new Array(5).slice()导致 sparse 数组，该数组不会用map进行迭代。可以通过使用Array.from或Array.fill来确保这种情况（如其他答案已建议的那样）。两者都将用undefined可以填充的map值填充稀疏数组：

Array.from(new Array(5)).map((item, idx) => idx === 1);

new Array(5).fill().map((item, idx) => idx === 1);