从数组中删除空字符串或空白字符串 - Javascript

Question

我找到了this 删除空字符串的漂亮方法 - arr = arr.filter(Boolean)。

但它似乎不适用于空白字符串。

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
arr = arr.filter(Boolean);
// ["Apple", "  ", "Mango", "Banana", " ", "Strawberry"]

// should be ["Apple", "Mango", "Banana", "Strawberry"]

有没有一种很好的方法可以将此方法扩展到删除空格，或者我应该先通过迭代数组来修剪空格？

Answer 1

filter 有效，但您需要正确的谓词函数，Boolean 不是（为此）：

// Example 1 - Using String#trim (added in ES2015, needs polyfilling in outdated
// environments like IE)
arr = arr.filter(function(entry) { return entry.trim() != ''; });

或

// Example 2 - Using a regular expression instead of String#trim
arr = arr.filter(function(entry) { return /\S/.test(entry); });

（\S 表示“非空白字符”，因此/\S/.test(...) 检查字符串是否至少包含一个非空白字符。）

或（可能有点过火且难以阅读）

// Example 3
var rex = /\S/;
arr = arr.filter(rex.test.bind(rex));

---

使用 ES2015（又名 ES6）箭头函数，更加简洁：

// Example 4
arr = arr.filter(entry => entry.trim() != '');

或

// Example 5
arr = arr.filter(entry => /\S/.test(entry));

---

Live Examples -- ES5 和更早的例子：

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
console.log("Example 1: " + JSON.stringify(arr.filter(function(entry) { return entry.trim() != ''; })));
console.log("Example 2: " + JSON.stringify(arr.filter(function(entry) { return /\S/.test(entry); })));
var rex = /\S/;
console.log("Example 3: " + JSON.stringify(arr.filter(rex.test.bind(rex))));

...以及 ES2015 (ES6) 的 （如果您的浏览器还不支持箭头功能，则无法使用）：

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
console.log("Example 4: " + JSON.stringify(arr.filter(entry => !entry.trim() == '')));
console.log("Example 5: " + JSON.stringify(arr.filter(entry => /\S/.test(entry))));

Answer 2

你可以利用空字符串作为假值。

您可以将Array#filter 与String#trim 一起使用。

使用 ES6 箭头函数：

arr = arr.filter(e => String(e).trim());

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
var nonEmpty = arr.filter(e => String(e).trim());

document.getElementById('result').innerHTML = JSON.stringify(nonEmpty, 0, 4);

<pre id="result"></pre>

使用 ES5 匿名函数：

arr = arr.filter(function(e) {
    return String(e).trim();
});

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
var nonEmpty = arr.filter(function(e) {
    return String(e).trim();
});

document.getElementById('result').innerHTML = JSON.stringify(nonEmpty, 0, 4);

<pre id="result"></pre>

Answer 3

基于this MDN reference:

\s
匹配单个空白字符，包括空格、制表符、换页符、换行符和其他 Unicode 空格。相当于[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]。

在ECMA 262 reference 上，说\s 应该匹配"White Space"，例如\u0009（制表符，<TAB>），\u000B（垂直制表符，<VT>），\u000C（换页，@ 987654334@)、\u0020（空格、<SP>）、\u00A0（无间断空格、<NBSP>）、\uFEFF（字节顺序标记，<BOM>）和其他类别“Zs”（@ 987654341@)，还有"line terminators"，比如\u000A（换行，<LF>），\u000D（回车，<CR>），\u2028（行分隔符，<LS>）和\u2029（段落分隔符 <PS>)，只有当 trim() 本身不可用时，您才可以使用以下代码删除为空或空格的元素：

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
arr = arr.filter(s => s.replace(/\s+/g, '').length !== 0);
// Or for ES5
// arr = arr.filter(function (el) { return el.replace(/\s+/g, '').length !== 0; });
console.log(arr);

如果某些旧浏览器的行为与 \s 不同，请将其替换为 [ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff] 字符类：

arr = arr.filter(function (el) { return el.replace(/[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]+/g, '').length !== 0; });

您还可以进一步自定义它以包含新的 Unicode 空间。

Answer 4

你可以试试这个approach。我发现这个过程很简单，而且对我有用。

let arrayEle = ["abc", " "," ", "def", "xyz", " "]; 

  arrayEle = arrayEle.filter((element) => {
    return /\S/.test(element);
  });
  
  console.log(arrayEle);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Answer 5

const fruits = ['Apple', undefined, ' ', 'Mango', '', 'Banana', ' ', 'Strawberry'];

fruits.filter(fruit =>fruit &&fruit.trim())

输出：[“苹果”、“芒果”、“香蕉”、“草莓”]

Filter condition: fruit && fruit.trim()

prefix - will remove all the falsy value
suffix - will trim and then remove all the falsy values

Answer 6

一个用 ES6 编写的快速使用的单行解决方案：

const filterArray=a=>a.filter(x=>typeof x!=='string'||!!x.trim())

这样做的一些优点是它会忽略任何不是字符串的内容。

没有 ES6：

function filterArray(a) {
  return a.filter(function(x) {
    return typeof x !== 'string' || !!x.trim()
  })
}

例子：

const filterArray=a=>a.filter(x=>typeof x!=='string'||!!x.trim())

console.log(filterArray([1, 2, 4, '', '']))

或者如果您的浏览器不支持 ES6（它可能支持）：

function filterArray(a) {
  return a.filter(function(x) {
    return typeof x !== 'string' || !!x.trim()
  })
}

console.log(filterArray([1, 2, 4, '', '']))

Answer 7

我使用过滤器并检查元素长度是否不等于零。 它对我有用，而且这个解决方案很简短：

const arr = ['Apple', '', 'Mango', '', 'Banana', '', 'Strawberry']

const arr2 = arr.filter(item => item.length !== 0)          

console.log(arr2)

Answer 8

function clearSpace(arr){
    for (var key in arr) {
        if (arr[key] == "") {
            arr.splice(key, 1)
            clearSpace(arr)
        }
    }
}
var arr = ["","a","b","",""]
clearSpace(arr)
console.log(arr)

//I hope this helps you!!
//Vu Tien Luong - 3GTEL

Answer 9

可以使用Array.protype.join()、String.prototype.split() 和参数RegExp /\s|,/ 后跟.filter(Boolean)

var arr = ['Apple', '  ', 'Mango', '', 'Banana', ' ', 'Strawberry'];
arr = arr.join().split(/\s|,/).filter(Boolean);
console.log(arr)