如何让golang array 添加元素

Posted 2023-04-01

参考技术A 自动扩展是指大小吗? 数组大小不能改变的,如果需要可改变的话,可以用slice,提供append可以添加,超出大小可以自动扩容。

如何在 array.map 中的每个元素之后添加逗号，除了 React JSX 中的最后一个元素

【中文标题】如何在 array.map 中的每个元素之后添加逗号，除了 React JSX 中的最后一个元素

【英文标题】：How to add a comma in array.map after every element except last element in React JSX

【发布时间】：2018-06-01 13:57:00

【问题描述】：

如何在数组的每个元素之后添加一个尾随逗号，以制作如下列表：

INV, INV, INV, INV

请注意，最后一个元素没有尾随逗号

当前使用array.map 迭代列表：

var List = React.createClass(
  render: function() 
    return (
      <div>
        this.props.data.map(function(item) 
          return <div>item</div>;
        )
      </div>
    );
  
);

var data = ["red", "green", "blue"];

React.render(<List data=data />, document.body);

【问题讨论】：

你需要一个字符串作为回报？

您可以尝试一个简单的 hack：array.map((item, index) => (<div> (index ? ', ': '') + item</div>))。这将做的是，检查索引是否有效，添加一个逗号，否则为空白字符串。并且由于 JS 中的 0 是错误的，它将跳过第一个条目

arr.join(',');

data=data.map((x,i,arr)=>(i<arr.length-1)?x+',':x)

老兄只是做 .map 然后 .join.. 示例：array.map(c => c).join(',')

【参考方案1】：

根据评论，您可以使用：

array.map((item, index) => ( (index ? ', ': '') + item ))

此外，由于您想内联显示文本，因此不适合使用 div。相反，您可以/应该使用像span这样的内联元素

var List = React.createClass(
  render: function() 
    return (
      <div>
        
          this.props.data.map(function(item, index) 
            return <span key=`demo_snap_$index`> (index ? ', ' : '') + item </span>;
          )
        
      </div>
    );
  
);

var data = ["red", "green", "blue"];

ReactDOM.render(<List data=data />, demo);

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

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

【讨论】：

记得在<span> 中添加key=index，否则您会在控制台中收到警告

刚刚遇到这个问题，我想对这个解决方案表示感谢！我也想知道为什么 index ？ '，'：'' 工作？ :) 我不明白它背后的逻辑，因为 index 只是一个数字？

@SJ19 因为我们在前面加上值，所以我们必须确保我们没有添加额外的逗号。所以为此我做了那个三元运算符。由于在 JS 中 0 是错误的，因此对于第一次迭代，不会添加任何内容

@Rajesh OH，我一直在想相反的方式，我想知道它是如何知道我们在最后一个索引上的。现在它是有道理的。谢谢！智能解决方案。

太棒了！想要这样。

【参考方案2】：

使用 CSS adjacent sibling combinator (+) 将伪元素 (::before) 用逗号添加到所有同级项，但第一个：

var List = React.createClass(
  render: function() 
    return (
      <div>
        this.props.data.map(function(item) 
          return <div className="item">item</div>;
        )
      </div>
    );
  
);

var data = ["red", "green", "blue"];

ReactDOM.render(<List data=data />, demo);

.item 
  display: inline-block;


.item + .item::before 
  display: inline-block;
  white-space: pre;
  content: ", ";

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

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

【讨论】：

只是一个固执己见的评论，但我更喜欢使用 JS。同样使用 div 并添加 display: inline-block 看起来很奇怪。

在这种情况下你为什么更喜欢 JS？

我更喜欢将 UI 更改保留给 CSS，并将此类操作保留给 JS。同样，这只是我的偏好/意见。是的，使用 CSS 会提高性能，但可能会降低可读性。

我实际上认为这是设计的一部分，因此适合 CSS。为什么会降低可读性？我很想知道你的意见:)

@Rajesh - 在这种情况下你的感觉是不正确的 :) 伪元素和内容确实是一个灰色区域。问题是 - 逗号是内容本身的一部分，还是设计的一部分？你可以用两种方式回答它。我不确定可读性。一方面它可能令人困惑——“逗号从何而来？”。另一方面，它减少了 JSX 中的噪音，并且简短的检查会告诉你它来自哪里。所以，正如你所说 - 见仁见智。

【参考方案3】：

你可以做的是，检查项目的索引，如果索引不等于最后一个项目，则呈现,，否则什么都没有。

这样写：

    this.props.data.map((item, i, arr) => <span>item i != (arr.length-1) ? ',' : ''</span>)

您还可以将总数据长度存储在一个单独的变量中，而不是在每次迭代中检查 arr.length 并检查该变量。

工作示例：

var List = React.createClass(
  render: function() 
    return (
      <div>
        
	   this.props.data.map((item, i, arr) => <span>item i != (arr.length-1) ? ', ' : ''</span>)
        
      </div>
    );
  
);

var data = ["red", "green", "blue"];

ReactDOM.render(<List data=data />, document.body);

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

【参考方案4】：

const data = ["red", "green", "blue"];

class List extends React.Component
render()
return( 
<div>
this.props.data.map((item, index) => 
  return <span> (index ? ', ' : '') + item </span>;
)
</div>
)



ReactDOM.render(
<List data=data/>,
document.getElementById('demo')
)

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

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

【参考方案5】：

就这样吧：

<div>array.join(',')</div>

【参考方案6】：

我知道这已经晚了，但这是迄今为止最简单的方法，没有任何功能。在内联语句中效果很好，如果您的情况需要，则不需要单独的函数或映射。

const items = [1, 2, 3, 4, 5];

console.log("Items: " + "" + items + ".")

数组前的“”+由于某种原因添加了逗号，我不完全明白为什么。

【参考方案7】：

试试 array.toString()

你会得到INV, INV, INV, INV