javascript - 为什么即使没有分隔符，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;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<select id="category-selector">
  <option value="all">Select Category</option>
  <option value="category 1">Category 1</option>
  <option value="category 2">Category 2</option>
  <option value="category 3">Category 3</option>
</select>

<div class="container" id="items-container">
  <div class="posts-grid row">
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1, category 2">
      <div class="block">
        <div class="block">
          <p>1</p>
          <p>2</p>
        </div>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 2, category 3">
      <div class="block">
        <p>2</p>
        <p>3</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1, category 3">
      <div class="block">
        <p>1</p>
        <p>3</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <div class="block">
          <p>1</p>
        </div>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 2">
      <div class="block">
        <p>2</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <p>1</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <p>1</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <p>1</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <p>1</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1, category 2">
      <div class="block">
        <p>1</p>
        <p>2</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 2, category 3">
      <div class="block">
        <p>2</p>
        <p>3</p>
      </div>
    </div>
    <div class="item col-xs-12 col-sm-6 col-lg-4 col-xl-3" data-category="category 1">
      <div class="block">
        <p>1</p>
      </div>
    </div>
  </div>
</div>

令我(高兴地)感到惊讶的是，我的 split(', ') 方法返回一个数组即使没有分隔符。

问题:

1. 为什么会这样？
2. 我的过滤器可靠吗？

Answer 1

1. split 方法旨在以这种方式工作。来自文档:

When found, separator is removed from the string and the substrings are returned in an array. If separator is not found or is omitted, the array contains one element consisting of the entire string.

如果您想要一个行为不同的方法，您可以在 split() 之上编写一个包装器，当字符串没有分隔符时返回其他内容(您希望它返回什么？)

1. 您的过滤器看起来仍然不错——您正在检查类别名称是否在数组中；如果数组只包含一个与类别名称相对应的元素，则会找到它；如果数组由一个空字符串元素组成，则不会找到它 -- 两者都是正确的行为。