JavaScript中如何从数组删除指定条件的元素

删除数组中某些或者指定元素方法还是比较多的。尤其当删除的元素位于开始或者尾部。

一定要注意的是delete array[item] ,只是将数组清空,并不能更改数组的尺寸。这个确实非常误导人,这个方法真应该重写。

当删除的元素位于开始或者尾部的时候,可以认为数组是栈。shift,pop自然就能想到了。

初始化数组,将内容赋值为:1~20,下面这个方式,一定比较新颖。javascript并没有序列的功能。只能曲线救国,模拟出来一个。

shell 中可以这样

echo {1..20}

初始化数组比较优雅的方法

方法1:

let initArray = [...Array(20)].map((item,index)=>item = index+1);
console.info(initArray);

解析:我们初始化一个长度为20的数组Array(20). 我们使用展开运算符(thee dots operator)将数组展开为一个新数组的内容。然后再对新数组使用map方法,并将内容出初始为序号。

方法2:

console.info(new Array(20).fill(0).map((item, index) => item = index + 1));

下面讨论下删除数组中符合特定条件元素的方法。为了方便读者测试,tempArray每次都创建或者变量名忽略掉了。

保留数组前5位元素。直接修改长度方法比较简单。

let tempArray = new Array(20).fill(0).map((item, index) => item = index + 1);
tempArray.length = 5;
console.info(tempArray)

删除tempArray中内容为奇数的元素

方法1:使用filter过滤需要的元素

console.info(new Array(20).fill(0).map((item, index) => item = index + 1).filter(item=>item%2!=1));

方法2: 使用循环的方式进行删除

这种方式尤其当元素比较多的时候,效率比较差。存在大量的移位操作。不如使用filter这种方式快速,从工作原理上也能推测出来。

let tempArray  = new Array(20).fill(0).map((item, index) => item = index + 1)

tempArray.forEach((item,index,array)=>{
    if(item % 2 == 1){
        array.splice(index,1)
    }
})
console.info(tempArray)

方法3:使用数组差集的方法

let tempArray  = new Array(20).fill(0).map((item, index) => item = index + 1)
let removeArray = [...Array(10)].map((item,index)=>item = 2*index+1)

let result = tempArray.filter(item=> !removeArray.includes(item))
console.info(result)

获取 tempArray中10~15的元素

console.info(new Array(20).fill(0).map((item, index) => item = index + 1).slice(9,15));
console.info(new Array(20).fill(0).map((item, index) => item = index + 1).splice(9,6));

删除 tempArray中10~15的元素

let tempArray = new Array(20).fill(0).map((item, index) => item = index + 1)
tempArray.splice(9,6);
console.info(tempArray)

数组合并优雅实现

let array0to20  = new Array(20).fill(0).map((item, index) => item = index + 1)
let array31to50= [...Array(20)].map((item,index)=>item = 30 + index+1)

console.info([...array0to20,...array31to50])
end
  • 作者:kali(作者介绍)
  • 更新时间:2022-07-20 18:09
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:转载站点文章,请附上原文链接
  • 翻译声明:翻译文章会不严谨,请务必附上原文链接
  • 扫描阅读:扫描二维码,手机阅读该文章