从数组中删除空或空格字符串 - 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'];
snippet.log("Example 1: " + JSON.stringify(arr.filter(function(entry) { return entry.trim() != ''; })));
snippet.log("Example 2: " + JSON.stringify(arr.filter(function(entry) { return /\S/.test(entry); })));
var rex = /\S/;
snippet.log("Example 3: " + JSON.stringify(arr.filter(rex.test.bind(rex))));

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

...以及ES2015(ES6)(如果您的浏览器不支持箭头功能,则无效):

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

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

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 参考：

\n\n

\n

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

\n

\n\n

在ECMA 262 参考中，\\s应该匹配“空白” ，如\\u0009(Tab, <TAB>)、\\u000B(Vertical Tab, <VT>)、\\u000C(Form Feed, <FF>)、\\u0020(Space, <SP>)、\\u00A0(No-break space, <NBSP>)、\\uFEFF(Byte Order Mark, <BOM>) ，以及其他类别 \xe2\x80\x9cZs\xe2\x80\x9d ( <USP>)，以及“行终止符”，例如\\u000A(换行, <LF>)、\\u000D(回车, <CR>)、\\u2028(行分隔符, <LS>) 和\\u2029(段落分隔符, <PS>),仅当trim()本机不可用时，您才可以使用以下代码来删除空元素或空白元素：

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

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

\n