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

Posted 2023-02-22

【中文标题】从数组中删除空字符串或空白字符串 - Javascript

【英文标题】：Remove empty or whitespace strings from array - Javascript

【发布时间】：2016-05-30 08:27:23

【问题描述】：

我找到了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"]

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

【参考方案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))));

【讨论】：

说!/\S/.test(entry)会稍微干净一些。

@torazaburo：实际上，所有我的例子都是落后的！

@Daniel：经典的早晨精神失常。固定的。 :-)

@T.J.Crowder ：如果第一个/第二个示例仅包含一个空白字符，是否有理由不删除数组的第一个元素？

@user3001499：不，为什么？

【参考方案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>

【讨论】：

我会使用String(e).trim()，以防万一。

@agm1984 因为 OP 只想删除空且只包含空格的字符串，所以我使用了 trim。如果您只想保留真实值，可以使用.filter(e => e)。

谢谢，经过进一步评估，我删除了答案。

好答案，拯救了我的一天。您永远无法确定数组中的所有内容都是String。

【参考方案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 空间。

【讨论】：

我只会使用\s，但MDN trim() reference page 建议使用此正则表达式。如果我们真的需要支持 all Unicode 空白，我们需要在字符类中添加更多字符。

但是\s 不包括\xA0（不能更简单地写成\n）吗？

MDN 是由凡人编写的，不应被视为神圣令状。很明显\s包含\n，和\x0a是一样的。所以那个 MDN 页面上给出的正则表达式是错误的，或者至少是多余的。

我不知道“硬空间”是什么意思。根据 MDN 正则表达式页面，“\n 匹配换行符 (U+000A)。”

是的，我在答案中添加了所有相关细节。我希望它现在是完整的并且对那些寻求了解\s背后的人有帮助:)

【参考方案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>

【参考方案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

【参考方案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, '', '']))

【参考方案7】：

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

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

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

console.log(arr2)

【参考方案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

【参考方案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)

【讨论】：

这是一个可怕的想法。如果数组中的元素包含内部空格，如"My name is Guest271314" 或逗号怎么办？

@torazaburo ["My name is a b c", 'Apple', ' ', 'Mango', '', 'Banana', ' ', 'Strawberry'].join("~").split(/~\s+~|\s(?=\s+)|~?~/)

现在如果数组中的字符串中有波浪号，它将不起作用。

@torazaburo ["My name is, a b c", "Apple", " ", "Mango", "", "Banana", " ", "Strawberry"].join(" "/* two space characters */).replace(/\s2,/g, "DELIM").split("DELIM")