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

Question

我发现了这个删除空字符串的漂亮方法 - 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));

---

实时示例——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

基于此 MDN 参考：

\\s
匹配单个空白字符，包括空格、制表符、换页符、换行符和其他 Unicode 空格。 相当于[ \\f\\n\\r\\t\\v​\ \ ​\᠎\ ​-\ ​\
\
\ \ ​\　\] 。

在ECMA 262 参考中，说\\s应该匹配“空白”，如\ (Tab, <TAB> ), \ (Vertical Tab, <VT> ), \ (Form Feed, <FF> ), \ (Space, <SP> ), \  (No-break space, <NBSP> ), \ (Byte Order Mark, <BOM> )，和其他类别“Zs”( <USP> )，还有“行终止符"像\ （ \ 行， <LF> ）， \ （回车， <CR> ）， \
 （行分隔符， <LS> ）和\
 （段落分隔符， <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​\ \ ​\᠎\ ​-\ ​\
\
\ \ ​\　\]字符类：

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

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

 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 = ['苹果', 未定义, ' ', '芒果', '', '香蕉', ' ', '草莓'];

水果过滤器（水果 => 水果&&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)