如何在 JQuery 中添加和删除数组而不重新索引数组键

Posted 2023-03-05

【中文标题】如何在 JQuery 中添加和删除数组而不重新索引数组键

【英文标题】：How add and remove array without re-index array key in JQuery

【发布时间】：2019-04-17 04:37:44

【问题描述】：

单击任何复选框时，我都有一个复选框列表，而不是在主数组中追加（推送）新数组。如果取消选中，则删除但不更改当前数组的任何索引。

解释：-

Like:- 当我点击第一个复选框而不是数组时

0: ["2"]

Like:- 当我点击第二个复选框而不是数组时

0: ["2"]
1: ["3"]

喜欢 :- 当我点击四个复选框而不是数组喜欢时

0: ["2"]
1: ["3"]
2: ["5"]

如果我先取消选中我需要的数组，则在取消选中复选框之后

1: ["3"]
2: ["5"]

我再次点击第一个复选框而不是需要数组链接

1: ["3"]
2: ["5"]
3: ["2"]

不需要更改任何数组索引键

https://jsfiddle.net/tx63yjhg/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />

<script type="text/javascript">
var values = [];
var new_value = [];

$("input").on("change", function() 

  var $this = $(this);
  
  if ($this.is(":checked")) 
  
  	var new_data = [$this.val()];
  	new_value.push(new_data);
  
  else 
  	
  	//remove array when uncheck checkbox
  
  console.log('new_value',new_value);
);
</script>

如何删除数组并重新添加？

【问题讨论】：

你为什么有数组？为什么不用一个简单的扁平数组来代替？

@NikhilAggarwal :- 我在数组中有多个值，所以我需要数组内的数组

好的。那你能贴出真实的数组吗？在上面发布的示例中，删除值后您希望数组为1: ["3"], 2: ["5"]。 new_value[0]的值是多少

@NikhilAggarwal ：如果删除 0 索引而不是删除 0 索引并且此键未分配任何数组索引

看看这个例子 - let arr = [1,2]; delete arr[0]; console.log(arr);。看到数组索引仍然是空值。

【参考方案1】：

我不确定您是否使用数组数组来实现相同的效果。您可以尝试使用如下对象。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />

<script type="text/javascript">
var values = [];
var new_value = ;
var counter = 0;

$("input").on("change", function() 
  var $this = $(this);
  
  if ($this.is(":checked")) 
    new_value[counter++] = [$this.val()];
   else 	
    Object.entries(new_value).forEach(([k,v]) => 
      if(v.includes($this.val())) delete new_value[k];
    );
  
  console.log('new_value',new_value);
);
</script>

编辑

添加

new_value[counter++] = id1: 100, id2: 200, "id3": 300,"value":474; // e.g. object

删除

let valueToBeRemoved = 234; // e.g. value to be removed

Object.entries(new_value).forEach(([k,v]) => 
  if(v.value === valueToBeRemoved) delete new_value[k];
)

编辑 2

for (var k in new_value) 
    if(new_value[k].value === valueToBeRemoved) delete new_value[k];

【讨论】：

如果这样的数组值比 ?? new_value[counter++] = id1: 100, id2: 200, "id3": 300,"value":value474;

@PraveenKumar - 你可以做到。但是，我们需要更新我们的删除代码。对象的哪个属性定义了对象的唯一性？

Nikhil - 你能用对象数组删除更新你的答案吗

@PraveenKumar - 我已经用添加/编辑块更新了我的答案。你能检查一下吗

@PraveenKumar - 很高兴帮助你:)

【参考方案2】：

很简单：

var values = [];

$("input").on("change", function() 

  var $this = $(this);
  var new_value = [];
  
  if ($this.is(":checked")) 
  
  	var new_data = [$this.val()];
  	new_value.push(new_data);
  
  console.log('new_value',new_value);
);