删除数组中多个不连续的数组元素的正确姿式

 

 

var arr = ['a', 'a', 'b', 'c', 'd', 'a', 'a', 'e', 'g', 'a', 'f'];

 

咱们如今将数组中全部的‘ a’ 元素删除；

arr.forEach(function(key, index) {
key === 'a' ? arr.splice(index, 1) : '';
})

//["a", "b", "c", "d", "a", "e", "g", "f"]

 

只要相邻的‘ a’ 元素， 都没被删除， splice不但能够删除原素自己， 还同时能够减小数组长度（ 就是抹去一切痕迹），
这样致使后续的数组元素会代替已经删除的元素的位置， 可是循环是按照数组的下标按顺序删除， 这样就会漏掉迁移的元素。

方法一： delete

arr.forEach(function(key, index) {
key === 'a' ? delete arr[index] : '';
})

//["b", "c", "d", "e", "g", "f"]

能够看到这是咱们想要的结果， 由于delete这个方法删除元素时并不会删除自己的位置， 会有个‘ undefind’ 来代替着元素，
这样咱们的循环队列的顺序就正常了， 可是这样数组长度是不会有变化的， 这个方法就看本身的需求了

方法二： 取而不删

简单的例子：

var newArr = arr.filter(function(key) {
return key !== 'a'
})

//["b", "c", "d", "e", "g", "f"]

 

同样的结果， 咱们的思路就是既然删除是由于咱们想要获得符合条件的数组， 那咱们直接去筛选符合条件的新数组就解决了！

实际中咱们面对的业务数据都是比较复杂的，因此下面的稍微复杂一点

复杂的例子：

 

需求：1 咱们须要删除掉checked为"icon-chosen"的全部父项，以及父项中的子项orderDetails。

　　　2 父项中有多个子项，但若是有一个子项checked是"icon-choose",不是"icon-chosen"，那么父项也须要保留下来不被删除。

 

//上面的数据保存在productList中,咱们看到只有数组中第一个父元素的第二个子元素checked是"icon-choose"

var newProductList = [];

productList.forEach(function(key) {

　　//首先筛选父项"icon-choose"，取出咱们须要的父项

　　if (key.checked == "icon-choose") {

　　　　//筛选子项"icon-choose"，取出咱们须要的子项

　　　　var newOrderDetails = key.orderDetails.filter(function(keys) {

　　　　　　return keys.checked == "icon-choose"

　　});

　　　　//将符合条件的子项赋值给被筛选的子项

　　　　key.orderDetails = newOrderDetails;

　　　　//将筛选和改变的父项放入新的数组

　　　　newProductList.push(key);
　　}

})

console.info(newProductList);

最后的结果就是要保留数组中第一个父元素的第二个子元素checked是"icon-choose"，同时保留父元素；数据可能有点多，但其余的只是干扰项，

咱们只关注checked属性就好！