为什么 JavaScript split() 方法即使没有分隔符也会返回一个数组？

Question

我有一个 html 元素网格，每个元素都有一个data-category属性。

一些data-category属性有多个值，用逗号分隔：data-category="category 2, category 3"。

有些具有单个值：data-category="category 1"，没有分隔符。

我使用这个简单的脚本按类别过滤元素：

$('#category-selector').on('change', function(){

  var $item = $('#items-container').find('.item'),

      current = $(this).val();

    if(current == 'all'){

       $item.fadeIn(200);

    } else {

       $item.hide(200);

       $item.each(function(){

          var category = $(this).data('category').split(', ');

          //console.log(category);

          if($.inArray(current, category) >= 0){

            $(this).fadeIn(200);

          }

       });

    }

});

.posts-grid {

  margin-top: 25px;

}

.posts-grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}

.posts-grid .block {

  background: #fff;

  border-top: 1px solid #d5d5d5;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);

}

.posts-grid p {

  margin: 0;

  text-align: center;

}

.posts-grid .block {

  flex-grow: 1;

  display: flex;

  justify-content: center;

  flex-direction: column;

}

.posts-grid .read-more {

  margin-top: auto;

}

@media (max-width: 767px) {

  .container {

    max-width: 100%;

  }

}

@media (max-width: 575px) {

  .container {

    max-width: 100%;

    padding-left: 0;

    padding-right: 0;

  }

  .posts-grid>[class*='col-'] {

    padding-left: 5px;

    padding-right: 5px;

  }

}

我（愉快地）惊讶于我的split(', ')方法返回一个数组，即使没有 separator。

问题：

1. 为什么会发生这种情况？

2. 我的过滤器可靠吗？

Answer 1

该split方法旨在以这种方式工作。从文档：找到后，从字符串中删除分隔符，并在数组中返回子字符串。如果未找到或省略了分隔符，则数组包含一个由整个字符串组成的元素。如果您想要一个行为不同的方法，您可以在 split() 之上编写一个包装器，当字符串没有分隔符时返回其他内容（您希望它返回什么？）您的过滤器看起来仍然很好——您正在检查类别的名称是否在数组中；如果数组只包含一个与类别名称对应的元素，则会找到它；如果数组由一个空字符串元素组成，则不会找到它——两者都是正确的行为。