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(', ')方法也会返回一个数组。

问题：

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

Answer 1

split方法旨在以这种方式工作。从文档中：

找到后，从字符串中删除分隔符，并将子字符串返回到数组中。如果找不到或省略了分隔符，则数组包含一个由整个字符串组成的元素。

如果您想要一个行为不同的方法，则可以在split（）之上编写一个包装，当字符串不包含定界符（您希望返回什么？）时，该包装返回其他内容

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

Answer 2

从文档https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

它说：

如果找不到或省略了分隔符，则数组包含一个由整个字符串组成的元素。

因此，split将始终返回一个数组。您的split（）方法一切正常

为什么JavaScript split（）方法即使没有分隔符也返回数组？

2 个答案: