web-dev-qa-db-ja.com

配列から空または空白文字列を削除する-Javascript

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"]

この方法を拡張して空白も削除する良い方法はありますか、または最初に配列を繰り返して空白を削除する必要がありますか？

javascriptarraysregexstringfilter
13
Daniel

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(...)は文字列に少なくとも1つの非空白文字が含まれているかどうかを確認します。）

または（おそらく少し船外で読みにくい）

_// 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'];
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>_
31
T.J. Crowder

空の文字列を偽の値として利用できます。

Array#filter with String#trim 。

ES6 Arrow関数を使用する：

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>
7
Tushar

このMDNリファレンス に基づく：

_\s_
スペース、タブ、フォームフィード、ラインフィード、その他のUnicodeスペースを含む単一の空白文字に一致します。 _[ \f\n\r\t\v​\u00a0\u1680​\u180e\u2000​-\u200a​\u2028\u2029\u202f\u205f​\u3000\ufeff]_と同等。

そして ECMA 262リファレンス 、_\s_が一致する必要があると言う "ホワイトスペース" のように_\u0009_（タブ、_<TAB>_）、_\u000B_（垂直タブ、_<VT>_）、_\u000C_（フォームフィード、_<FF>_）、_\u0020_（スペース、_<SP>_）、_\u00A0_ （改行なしスペース、_<NBSP>_）、_\uFEFF_（バイトオーダーマーク、_<BOM>_）、およびその他のカテゴリ「Z」（_<USP>_）、および 「ラインターミネータ」 like _\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スペースを含めるためにさらにカスタマイズすることもできます。

3
Wiktor Stribiżew

これを試すことができます 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>
0
Atit More