title: Sort by defined values, if found
body: <p>Using native ES2015 only (i.e. no libraries)
  I need to sort a list of objects by a defined set of values (think T-shirt size) AND prioritize the ones that match one of the defined values.</p>
  <p>Sample data:</p>
  <pre><code>const shirt_stock= [
      {size: &quot;M&quot;},
      {size: &quot;L&quot;},
      {size: &quot;M&quot;},
      {size: &quot;XM&quot;},
      {size: &quot;XL&quot;} ]
  </code></pre>
  <p>Defined sort order:</p>
  <pre><code>const sort_order = [&quot;S&quot;, &quot;M&quot;, &quot;L&quot;, &quot;XL&quot;]
  </code></pre>
  <p>Sort code (no comments needed on use of indexOf() in sort, it's pseudo code):</p>
  <pre><code>shirt_stock.sort((a, b) =&gt; {
    return sort_order.indexOf(b.size) - sort_order.indexOf(a.size)
  })
  </code></pre>
  <p>Yields result:</p>
  <pre><code>&gt; 0: &quot;XM&quot;
  &gt; 1: &quot;M&quot;
  &gt; 2: &quot;M&quot;
  &gt; 3: &quot;L&quot;
  &gt; 4: &quot;XL&quot;
  </code></pre>
  <p>The problem is that first result, &quot;XM&quot; - I want that to be at the end. In other words, I want to sort shirts that have a known size first, in the order defined in <code>sort_order</code>, then everything else after - bonus if the &quot;unknown size shirts&quot; are also sorted so they're grouped by size.</p>
  <p>Desired result:</p>
  <pre><code>&gt; 0: &quot;M&quot;
  &gt; 1: &quot;M&quot;
  &gt; 2: &quot;L&quot;
  &gt; 3: &quot;XL&quot;
  &gt; 4: &quot;XM&quot;
  </code></pre>
  <p>I'm stumped, what's a clean (e.g. not splitting <code>shirt_stock</code> into two arrays, sorting and combing back) and reasonably efficient way to achieve this?</p>