复制数组项并按属性值放置取决于位置？答案

【问题标题】：copy array item and put in position-dependent by property value?复制数组项并按属性值放置取决于位置？
【发布时间】：2022-01-01 19:41:19
【问题描述】：

我有一个数组：

let rawArray = [{ name: "Name", repeat: null }, { name: "Name1", repeat: 2 }, ...];

我需要循环 rawArray 并读取重复属性，如果重复不等于 null，则复制该项目并重复该项目购买重复次数值？

这怎么可能？ :)

我想得到结果：

let result = [..., { name: "Name1", repeat: 2 }, ..., { name: "Name1", repeat: 2 } ... { name: "Name1", repeat: 2 }, ... etc];

【问题讨论】：

标签： javascript jquery arrays reactjs vue.js

【解决方案1】：

您可以使用flatMap

let rawArray = [{ name: "Name", repeat: null }, { name: "Name1", repeat: 2 }];

console.log(rawArray.flatMap(item => {
  const { repeat } = item
  
  if (repeat === null) {
    return [item] // or [] if you want to omit item w/o repeat
  }
  
  return Array.from({ length: repeat}).map(() => ({ ...item }))
}))

【讨论】：

重复是，但我想将Name1 放在数组中的每个第二个位置。
@MiloshN。然后你需要更好地解释预期的行为。提供一堆具有各种输入的示例。尤其是一些极端情况，例如如果您有 2 个具有相同重复的元素，或者如果您有重复 2 和重复 3，那么第 6 个位置会是什么。

【解决方案2】：

你可以使用reduce：

const rawArray = [
  { name: "Name", repeat: null },
  { name: "Name1", repeat: 2 },
  { name: "Name2", repeat: 1 },
  { name: "Name3", repeat: 3 },
]

const result = rawArray.reduce((acc, item) => {
  if (!item.repeat) {
    return acc
  }
  
  return [
    ...acc,
    ...[...new Array(item.repeat)].map(i => item)
  ]
}, [])

console.log(result)

或者代码稍微少一点：

const result = rawArray.reduce((acc, item) => (!item.repeat) ? acc : [
  ...acc,
  ...[...new Array(item.repeat)].map(i => item)
], [])

【讨论】：

【解决方案3】：

普通的 HTML 和 js

<!DOCTYPE html>
<html>
    <head>  
    </head>
    <body>
        <ul id="myList">
        </ul>
        
        
    <script type="text/javascript">
    const rawArray = [
      { name: 'Name', repeat: null },
      { name: 'Name1', repeat: 2 },
      { name: 'Name2', repeat: 5 },
      { name: 'Name3', repeat: null },
    ]
    function my_code(){
        rawArray.map((item)=> {
            var node = document.createElement("LI");
            var textnode = document.createTextNode(item.name);
            node.appendChild(textnode);
            document.getElementById("myList").appendChild(node);
            if(item.repeat) {
                Array.from(Array(item.repeat).keys()).map((repeatItem) => {
                    var nodeRepeat = document.createElement("LI");
                    var textnodeRepeat = document.createTextNode(item.name+'(repet'+(repeatItem+1)+')');
                    nodeRepeat.appendChild(textnodeRepeat);
                    document.getElementById("myList").appendChild(nodeRepeat);
                    return null
                })              
            }
            return null
        })
    }

    window.onload=my_code();
    </script>
    </body>
</html>

反应js

const rawArray = [
  { name: 'Name', repeat: null },
  { name: 'Name1', repeat: 2 },
  { name: 'Name2', repeat: 5 },
  { name: 'Name3', repeat: null },
]
const MyList= () => {
return (
<div>
{rawArray.map((item, i) => (
        <div key={i.toString}>
          {item.name}
          {item.repeat && (
            <>
              {Array.from(Array(item.repeat).keys()).map((repeatItem, r) => (
                <div key={r.toString}>
                  {item.name}
                  <i>- repeat {repeatItem + 1}</i>
                </div>
              ))}
            </>
          )}
        </div>
      ))}
</div>
)
}
export default memo(MyList)

【讨论】：