如何使用 splice 方法删除数组

Question

我已经创建了 (3) 个列表。 我正在尝试做的事情：

- 当复选框被选中时，将值推入 mainArray（我已经开始工作）

- 当复选框未选中时，从 mainArray 中删除值。

例如：如果输入 A 未选中，则从 mainArray 中删除 [6, 7, 8, 9, 10]。

任何帮助或输入在这里将不胜感激！ 干杯。

 const a = document.querySelector('.input-1') const b = document.querySelector('.input-2') const c = document.querySelector('.input-3') const list = [1, 2, 3, 4, 5]; const list2 = [6, 7, 8, 9, 10]; const list3 = [11, 12, 13, 14, 15]; const mainArray = []; a.addEventListener('change', function(e) { if (a.checked) { mainArray.push(list) console.log(mainArray) } else if (!a.checked) { let index = mainArray.indexOf(list) if (index != -1) { mainArray.splice(index) console.log(mainArray) } } }); b.addEventListener('change', function(e) { if (b.checked) { mainArray.push(list2) console.log(mainArray) } else if (!b.checked) { let index = mainArray.indexOf(list2) if (index != -1) { mainArray.splice(index) console.log(mainArray) } } }) c.addEventListener('change', function(e) { if (c.checked) { mainArray.push(list3) console.log(mainArray) } else if (!c.checked) { let index = mainArray.indexOf(list3) if (index != -1) { list3.splice(index) console.log(mainArray) } } })

 <input class="input-1" type="checkbox" value = "a"> A <input class="input-2" type="checkbox" value = "b"> B <input class="input-3" type="checkbox" value = "c"> C

任何帮助或输入在这里将不胜感激。

Answer 1

快速而肮脏的方式来完成同样的事情。 每次单击复选框时，它mainArray从头开始重新计算mainArray ，使用当前选定的复选框及其data-list属性来构建它。

 [...document.querySelectorAll(".listy")].forEach(input => { input.addEventListener('change', (e) => { const mainArray = [...document.querySelectorAll(".listy:checked")].flatMap(el => JSON.parse(el.dataset.list)); console.log(mainArray); }); });

 <input class="listy" type="checkbox" value = "a" data-list="[1,2,3,4,5]"> A <input class="listy" type="checkbox" value = "b" data-list="[6,7,8,9,10]"> B <input class="listy" type="checkbox" value = "c" data-list="[11,12,13,14,15]"> C

Answer 2

您只需要删除一个，因此请确保传递第二个参数。

mainArray.splice(index, 1);

您还可以通过访问字母索引处的列表（例如 a = 0、b = 1、c = 2 等）来使其更通用，方法是将字符代码规范化为索引。

完整示例

 const mainArray = []; const lists = [ [1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15] ]; const handleClick = (e) => { const input = e.target; const listIndex = input.value.charCodeAt(0) - 97; const foundList = lists[listIndex]; if (input.checked) { mainArray.push(foundList); } else { let index = mainArray.indexOf(foundList); if (index !== -1) { mainArray.splice(index, 1); } } console.log(JSON.stringify(mainArray)); }; document.querySelectorAll('.list') .forEach(el => el.addEventListener('input', handleClick));

 <input class="list" type="checkbox" value="a"> A <input class="list" type="checkbox" value="b"> B <input class="list" type="checkbox" value="c"> C

实现此目的的更好方法是使邮件列表可变并仅替换该值。 更新值时，只需查看当前选择并减少列表。

 let mainList = []; // Make this mutable... const subLists = [ [1, 2, 3, 4, 5], [6, 7, 8, 9, 10], [11, 12, 13, 14, 15] ]; const syncChoices = (inputs, lists) => [...inputs].reduce((acc, { checked }, index) => checked ? [...acc, ...lists[index]] : acc, []); const handleClick = (e) => { mainList = syncChoices(document.querySelectorAll('.list'), subLists); // Set console.log(JSON.stringify(mainList)); // Print the list }; document.querySelectorAll('.list') .forEach(el => el.addEventListener('input', handleClick));

 .as-console-wrapper { max-height: 4em !important; }

 <input type="checkbox" class="list" data-index="0"> A <input type="checkbox" class="list" data-index="1"> B <input type="checkbox" class="list" data-index="2"> C

Answer 3

您应该引用mainArray而不是list 。

 const a = document.querySelector('.input-1') const b = document.querySelector('.input-2') const c = document.querySelector('.input-3') const list = [1, 2, 3, 4, 5]; const list2 = [6, 7, 8, 9, 10]; const list3 = [11, 12, 13, 14, 15]; const mainArray = []; a.addEventListener('change', function(e) { if (a.checked) { mainArray.push(list) console.log(mainArray) } else if (!a.checked) { let index = mainArray.indexOf(list) if (index != -1) { mainArray.splice(index) console.log(mainArray) } } }); b.addEventListener('change', function(e) { if (b.checked) { mainArray.push(list2) console.log(mainArray) } else if (!b.checked) { let index = mainArray.indexOf(list2) if (index != -1) { mainArray.splice(index) console.log(mainArray) } } }) c.addEventListener('change', function(e) { if (c.checked) { mainArray.push(list3) console.log(mainArray) } else if (!c.checked) { let index = mainArray.indexOf(list3) if (index != -1) { mainArray.splice(index) console.log(mainArray) } } })

 <input class="input-1" type="checkbox" value = "a"> A <input class="input-2" type="checkbox" value = "b"> B <input class="input-3" type="checkbox" value = "c"> C

Answer 4

这是执行相同操作的另一种方法：

 const arr = [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15]], cbs=document.querySelectorAll("input[type=checkbox]") document.body.onchange=()=> console.log(arr.filter((_,i)=> cbs[i].checked).flat() );

 <label><input type="checkbox"> A</label> <label><input type="checkbox"> B</label> <label><input type="checkbox"> C</label>

在实际用例中，您可能需要将选择器document.body限制为复选框周围的实际容器。

如果你真的，真的想用.splice()做到这一点，那么也许以下可能是一种方法：

 const arr = [[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15]], cbs=document.querySelectorAll("input[type=checkbox]"); document.body.onchange=()=>{ for(var res=arr.slice(0),i=cbs.length;i--;) if(!cbs[i].checked) res.splice(i,1); console.log(res.flat()); };

 <label><input type="checkbox"> A</label> <label><input type="checkbox"> B</label> <label><input type="checkbox"> C</label>

为了保留原始数组，我首先使用.slice(0)创建了一个浅拷贝。 然后使for循环从最高索引倒数到零，每当未检查关联的cbs元素时，就会从res数组中splice掉一个元素。

Answer 5

您的逻辑是正确的，但您使用 arr.splice() 的方式是错误的。

为了让它在您的情况下工作，您应该给 splice 提供第二个参数，以告知您希望删除多少个元素

前任：

 let arr = [1,2,3,4,5,6,7,8,9] arr.splice(3,10)

这将删除数组中从索引 3 开始的所有元素。

由于在您的情况下，您预先定义了要删除的每个数组中的元素数，因此我相信使用此方法将是最简单的方法。

还有其他使用 splice() 的方法，您可以在其中选择要删除的确切元素。

这是链接，您需要了解的有关拼接的所有信息都在这里，