2023年5月11日にjQuery 3.7.0がリリース
2023年5月11日にjQuery 3.7.0がリリースされました。
jQuery 3.7.0には.uniqueSort()という新しいメソッドが追加されているのですが、公式サイトの解説だと使い方が少しわかりづらかったので、簡単に説明します。
.uniqueSort()とは
.uniqueSort()はDOM要素の配列または配列に類似したオブジェクトを、重複を除去して並べ替えます。
例えばHTML内に以下のようなコードがあったとします。
<section>
<div class="item">item1</div>
<div class="item circle">item2</div>
<div class="item circle">item3</div>
<div class="item circle">item4</div>
<div class="item">item5</div>
</section>
これを $('.item').get() で取得して .length で調べると5が .itemが5つあるので「5」を返します。
const items = $('.item').get()
console.log(items.length)
// => 5
$('.circle').get() で取得して .length で調べると「3」を返します。
const items = $('.item').get()
console.log(items.length)
// => 5
上記2つを.concat()で統合して .length で調べると「8」を返します。
const divs = items.concat(circles)
console.log(divs.length)
// => 8
しかし、.itemと.circleは重複しているので、この場合は重複を除去して「5」を返してほしいケースがあります。
そんなときに .uniqueSort() を使うと重複を除去した配列を返してくれます。
const divs = items.concat(circles)
console.log(divs.length)
// => 8
const uniqueDivs = $.uniqueSort(divs)
console.log(uniqueDivs.length)
// => 5
jQueryは $('.foo') のように指定すれば要素を簡単に取得できますが、.concat()などで配列を結合した際に要素を重複させてバグを発生させてしまうケースが多いので、jQueryで要素を取得して結合する際は必ず .uniqueSort() で重複除去の処理を入れたほうが良いです。
ちなみに数値や文字列の配列の重複除去には使用できません。
const numbers = $.uniqueSort([1, 2, 2, 3, 4, 3])
console.log(numbers.length)
// => 5
const fruits = $.uniqueSort(['apple', 'banana', 'apple'])
console.log(fruits.length)
// => 3
