js数组删除空元素

在JavaScript中，删除数组中的空元素（如 null、undefined、空字符串 "" 等）有多种方法。以下是几种常用的方法及其解释：

1. 使用 `filter` 方法

filter 方法创建一个新数组，包含所有通过测试的元素。你可以根据需要定义测试条件，例如排除 null、undefined 和空字符串。

const array = [1, null, "hello", undefined, "", 5];

// 删除 null、undefined 和空字符串
const filteredArray = array.filter(item => item !== null && item !== undefined && item !== "");

console.log(filteredArray); // 输出: [1, "hello", 5]

优势：

简洁易读。
不修改原数组，而是返回一个新数组。

2. 使用 `filter` 方法结合布尔值转换

在JavaScript中，除了 0、NaN、""（空字符串）、false、null、undefined 和 false 之外的所有值在布尔上下文中都会转换为 true。因此，可以利用这一特性进行过滤。

const array = [1, null, "hello", undefined, "", 5];

// 删除所有“假值”（falsy values）
const filteredArray = array.filter(Boolean);

console.log(filteredArray); // 输出: [1, "hello", 5]

注意： 这种方法会删除所有假值，包括 0 和 false。如果只想删除 null、undefined 和空字符串，建议使用第一种方法。

3. 使用 `splice` 方法

如果你想在原数组上进行修改，可以使用 splice 方法。不过，这种方法相对复杂，尤其是在需要遍历数组时，需要注意索引的变化。

const array = [1, null, "hello", undefined, "", 5];
let i = 0;

while (i < array.length) {
  if (array[i] === null || array[i] === undefined || array[i] === "") {
    array.splice(i, 1);
  } else {
    i++;
  }
}

console.log(array); // 输出: [1, "hello", 5]

优势：

直接修改原数组。

劣势：

代码较为复杂。
在遍历时修改数组可能导致索引问题。

4. 使用 `reduce` 方法

reduce 方法可以用来构建一个新数组，排除不需要的元素。

const array = [1, null, "hello", undefined, "", 5];

const filteredArray = array.reduce((accumulator, current) => {
  if (current !== null && current !== undefined && current !== "") {
    accumulator.push(current);
  }
  return accumulator;
}, []);

console.log(filteredArray); // 输出: [1, "hello", 5]

优势：

灵活，可以在过滤的同时进行其他操作。

应用场景

删除数组中的空元素在多种场景下非常有用，例如：

数据清洗： 在处理用户输入或外部数据时，可能需要移除无效或空的值。
优化性能： 减少数组长度可以提高后续操作的效率。
界面展示： 在渲染列表或表格时，避免显示空值以提升用户体验。

常见问题及解决方案

问题1：为什么使用 filter 方法后原数组没有变化？

filter 方法返回一个新数组，而不会修改原数组。如果你希望修改原数组，可以将结果赋值回原变量：

array = array.filter(item => item !== null && item !== undefined && item !== "");

问题2：如何删除特定类型的空元素？

你可以自定义过滤条件。例如，只删除 null 和 undefined：

const filteredArray = array.filter(item => item != null);

这里使用了宽松相等 !=，它会同时匹配 null 和 undefined。

问题3：删除空元素后数组索引发生变化怎么办？

使用不会改变原数组的方法（如 filter）可以避免索引问题。如果必须使用会修改数组的方法（如 splice），建议从数组末尾开始遍历，以避免影响未处理的元素索引。

for (let i = array.length - 1; i >= 0; i--) {
  if (array[i] === null || array[i] === undefined || array[i] === "") {
    array.splice(i, 1);
  }
}

总结

删除JavaScript数组中的空元素有多种方法，选择哪种方法取决于具体需求，例如是否需要保留原数组、是否需要特定的过滤条件等。filter 方法通常是最简洁和高效的选择，适用于大多数场景。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js删除数组中指定的元素_java数组删除元素

要删除数组中的指定的元素，当然肯定少不了遍历，肯定得匹配指定的index,然后用数组的splice()方法来实现，因为pop()从数组尾部删除元素，shift()从数组头部删除第一个元素，还有delete...()，当然，splice()方法可以删除数组中任意位置的元素。...splice(index, number); index：表示从第几个元素开始； number：表示从此元素开始，向后删除几个元素要遍历数组方法当然有很多，for()循环，map()，filter

9.5K2 0

Node.JS 删除数组元素

//数组数据 var valArray = [2,2,2,3,4,5,2,6,7]; //删除的值 var delVal = 2; //删除元素 for(var i=0; i<valArray.length...; i++){ //数据比对 if(valArray[i] == delVal){ //删除值 valArray.splice(i,1);...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4.4K3 0

js 数组删除指定元素「建议收藏」

js 数组删除指定元素，js 数组并没有提供直接删除某一指定元素的方法，因此需要我们稍作处理思路：首先找到要删除的元素的位置，然后使用 splice 方法进行删除示例代码删除数组 s 中的 ‘dd...’元素 var s = ['s', 'dd', 're'] s.splice(s.indexOf('dd'), 1) console.log(s) 运行效果至此完发布者：全栈程序员栈长，转载请注明出处

9.3K3 0

js删除数组中的元素

arr.splice(start,delete_length) 这种方式数组长度相应改变，原来的索引也相应改变。 splice()删除后返回的是删除的元素。...另外splice()还可以添加，替换数组元素。...var arr = [1,true,{},"a"]; var a = arr.splice(0,2); /*输出*/ console.log("删除后数组的长度：" + arr.length); console.log

11.4K2 0

js删除数组中的一个元素_js数组包含某个元素

目录第一种：删除最后一个元素 pop 删除 slice 删除 splice 删除 for 删除 length 删除第二种: 删除第一个元素 shift 删除 slice 删除 splice 删除...第三种：删除数组中某个指定下标的元素 splice 删除 for 删除第四种：删除数组中某个指定元素的元素 splice 删除 filter 删除 forEach、map、for 删除 Set 删除...1)// arr => [2,3,4,5]// new_arr => [1] 第三种：删除数组中某个指定下标的元素 splice 删除 var delete_index = 2var arr = [1,2,3,4,5...不可以使用 delete 方式删除数组中某个元素，此操作会造成稀疏数组，被删除的元素的为位置依然存在为empty，且数组的长度不变 2....不可以使用 forEach 方法比对数组下标值，因为 forEach 在循环的时候是无序的第四种：删除数组中某个指定元素的元素 splice 删除 var element = 2, arr =

11.7K4 0

js数组删除某一个元素_删除数组中重复元素

JS 删除数组中某一个元素注意：很多人误以为数组的pop()方法可以删除指定元素，实则不是这样，虽然你给他传参也不会报错，但是它始终删除的是数组中的最后一个元素。...方式一：在Array原型对象上添加删除方法 // 查找指定的元素在数组中的位置 Array.prototype.indexOf = function(val) { for (var i...= 0; i < this.length; i++) { if (this[i] == val) { return i; } } return -1; }; // 通过索引删除数组元素 Array.prototype.remove...id: 1, name: 'Janche' }, { id: 2, name: '老王' } ] arr.splice(arr.findIndex(e => e.id === 1), 1) // 将删除...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

5.4K2 0

js判断元素在不在数组中_js判断数组是否为空

res3) // 结果：2 let res4 = arr.indexOf(5) // 验证是否包含：5 console.log(res4) // 结果：-1 // 由此我们发现，indexOf 返回的是数组的下标...has = (arr.indexOf(5) > -1) console.log(has) // 结果：false 2.find函数 let arr = [2,3,4]; // find函数会循环遍历，整个数组...arr.find(function(value, index, arr) { return value > 2; }) console.log(find3) // 结果：3 // 我们发现 // 当数组中的元素在测试条件时返回...true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。...// 如果没有符合条件的元素返回 undefined 3.findIndex函数 let arr = [2,3,4]; let findIndex = arr.findIndex(function(value

15.9K1 0

js数组添加删除数据_如何删除数组中的元素

文章目录添加删除数组元素的方法 ---- 添加删除数组元素的方法 // 添加删除数组元素的方法 // 1.push()在我们数组的末尾添加一个或者多个数组元素 var arr...unshift 完毕后返回的结果是新数组的长度 // （4）原数组也会发生变化 //3.删除数组元素pop() 它可以删除数组的最后一个元素 console.log(arr.pop()); //返回删除的元素...console.log(arr); // (1)pop 是可以删除数组的最后一个元素，但是一次只能删除一个元素 // （2）pop 没有参数 // （3）pop 完毕后返回的结果是删除的元素 //...（4）原数组也会发生变化 //34.删除数组元素shift() 它可以删除数组的最后一个元素 console.log(arr.shift()); //返回删除的元素 console.log(arr);...// (1)shift 是可以删除数组的第一个元素，但是一次只能删除一个元素 // （2）shift没有参数 // （3）shift 完毕后返回的结果是删除的元素 // （4）原数组也会发生变化 </

14.4K1 0

JS数组删除指定下标元素「建议收藏」

splice方法——Array.splice(index,n) 参数语义化理解：删除以下标index为起点的n个元素。...(之后的元素会往前移动) 注意:splice会直接改变原数组 let arr=['a','b','c','d']; arr.splice(2,1); console.log(arr); // ['a...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4.2K3 0

JS快速删除数组中的指定元素

有这么一个数组： const arr = [ { id: 1, value: 2 }, { id: 2, value: 3 }, ... ]; 想删除数组里 id=8 的元素，如何方便快捷的实现...findIndex findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。...arr.splice(arr.findIndex(item => item.id === 8), 1) 这个有问题，假如返回 -1 则直接把数组的最后一项给删除了，所以需要判断存在（不为 -1 ）才执行...filter filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。 arr = arr.filter(({ id }) => id !...快速删除数组中的指定元素

7.2K3 0

js判断空数组

方法一 Array.isArray && arr.length 通过Array.isArray来判断是否为数组，再通过length属性。...使用Array.isArray（）方法和Array.length属性：可以通过Array.isArray（）方法检查数组是否实际是一个数组。如果作为参数传递的对象是数组，则此方法返回true。...它还检查数组是否未定义或为空。可以使用array.length属性检查数组是否为空。此属性返回数组中的元素数。如果数字大于0，则计算结果为true。...此方法和属性可与and（&&）运算符一起使用，以确定数组是否存在且不为空。...只是判断数组的方法不一样而已。使用typeof来检测是否为数组，再通过length属性。

22K0 0

js数组删除指定元素splice_js找出数组中最大的数

js自带删除元素方法有： 1.splice方法 //获取元素在数组的下标 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length...; i++) { if (this[i] == val) { return i; }; } return -1; }; //根据数组的下标，删除该下标的元素 Array.prototype.remove...splice有3个参数，它也可以用来替换/删除/添加数组内某一个或者几个值 index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空如：arr = [‘a’...,‘b’,‘c’,‘d’] 删除 —- item不设置 arr.splice(1,1) //[‘a’,‘c’,‘d’] 删除起始下标为1，长度为1的一个值，len设置的1，如果为0，则数组不变 arr.splice...len设置为0，item为添加的值 arr.splice(1,0,‘ttt’) //[‘a’,‘ttt’,‘b’,‘c’,‘d’] 表示在下标为1处添加一项‘ttt’ 2.delete方法 delete删除掉数组中的元素后

3.8K4 0

java数组删除元素_java中删除数组中的指定元素方法

java中删除数组中的指定元素要如何来实现呢，如果各位对于这个算法不是很清楚可以和小编一起来看一篇关于java中删除数组中的指定元素的例子。 java的api中，并没有提供删除数组中元素的方法。...不过，我们要感谢Apache Commons Utils，我们可以使用这个库的ArrayUtils类来轻易的删除数组中的元素。...不过有一点需要注意，数组是在大小是固定的，这意味这我们删除元素后，并不会减少数组的大小。所以，我们只能创建一个新的数组，然后使用System.arrayCopy()方法将剩下的元素拷贝到新的数组中。...对于对象数组，我们还可以将数组转化为List，然后使用List提供的方法来删除对象，然后再将List转换为数组。...其实还是要用到两个数组，然后利用System.arraycopy()方法，将除了要删除的元素外的其他元素都拷贝到新的数组中，然后返回这个新的数组。

8.2K2 0

删除javascript数组中空元素

filter 请记住，此方法将返回一个新数组，其中的元素通过您提供给它的回调函数的条件。...例如，如果要删除null或未定义的值： var array = [0, 1, null, 2, "", 3, undefined, 3,,,,,, 4,, 4,, 5,, 6,,,,]; var filtered

1.5K2 1

Java数组删除指定元素

//删除数组中其中一个元素 public static void testB() { String [] str = { "Java", "C++", "Php...", "C#", "Python"};//删除php List list = new ArrayList(); for (int i=0;...2); //list.remove("Php") String[] newStr = list.toArray(new String[1]); //返回一个包含所有对象的指定类型的数组

2.8K2 0

js算法之删除数组最后一个元素

function truncate(arr) { var arr1=arr.slice(0,arr.length-1); return arr1; } 思路：先截取出来除了最后一个数组的元素其他元素

5K3 0

vue删除数组中指定元素_如何删除数组中的元素

vue删除数组中指定的元素 export default{ data(){ return { listVar: ['测试一','测试二','测试三'] } }, created(){

7.8K3 0

js 数组插入删除

常用的方法是遍历数组，然后使用splice（）删除这里我们使用es6 中findIndex（）查找，然后删除 function deleteFromArray(arr, compare) {...const index = arr.findIndex(compare) if (index === 0) { return } if (index > 0) { //删除一个...arr.splice(index, 1) } //再插入（unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度） arr.unshift(val) if (maxLen...&& arr.length > maxLen) { //pop() 方法用于删除并返回数组的最后一个元素。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

6.8K2 0

es6删除数组指定元素_如何删除数组中的元素

，如果你数组里面写的是id，这里就写id，如果数组里面写的是num，那这里就写num ， //=== 后面的id是你想要删除的元素的id号，同理，如果你数组里面写的是num，那这里就是num号，...//1是你要删除1个元素的意思第一种 splice(index,num); index代表的是数组元素的下标位置，num代表的是删除的个数 findIndex(); 是找到某元素的下标的位置...如图，这个数组里面有三个元素，现在要删掉这个id是24的元素,那我们代码就应该这么写 arr.splice(arr.findIndex(item => item.id === 24), 1) 打印一下发现...，id为24的元素就删掉啦 !...第二种 arr.filter() filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。注意： filter() 不会对空数组进行检测。

6.8K2 0

js -- 判断数组是否为空？

判断一个数组是否为空： JSON.stringify(arr) === '[]' arr.length === 0 +arr === 0 上面三种判断数组为空的方法虽然大多数情况下都可以用，但依然存在bug...，比如令arr[-1] = ''时，数组不为空，但三者都返回true。

20.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js数组删除空元素

1. 使用 filter 方法

2. 使用 filter 方法结合布尔值转换

3. 使用 splice 方法

4. 使用 reduce 方法

应用场景

常见问题及解决方案

总结

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

1. 使用 `filter` 方法

2. 使用 `filter` 方法结合布尔值转换

3. 使用 `splice` 方法

4. 使用 `reduce` 方法