javascript nullを含んだ配列をソートする

作成日 2022.08.11
javascript
javascript

javascriptで、nullを含んだ配列をソートするサンプルコードを記述してます。

1. 環境
2. nullを含んだ配列をソート
3. 降順
4. 元の値を変えない

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 104.0.5112.81

Javascript サンプル集はこちら

nullを含んだ配列をソート

「sort()」を使用すると、配列内に「null」を含んでいると「null」自体が「ソート」の対象となってしまします。
※「sort()」を使用すると、元の値もソートされます。

const arr = ['nt',  null, 'b', null, 'nv', null, 'a', null, 'z'];

console.log( arr.sort() );
// ['a', 'b', 'nt', null, null, null, null, 'nv', 'z']

console.log( arr );
// ['a', 'b', 'nt', null, null, null, null, 'nv', 'z']

実行結果

「null」は、「null」でまとめてソートしたい場合は、以下のように「コールバック関数」を使用して、条件を指定します。

三項演算子を使ってif文を1行で書く

const arr = ['nt',  null, 'b', null, 'nv', null, 'a', null, 'z'];

console.log( arr.sort((x, y) => {
  if (x === null) {
    return 1;
  }

  if (y === null) {
    return -1;
  }

  if (x === y) {
    return 0;
  }

  return x < y ? -1 : 1;
}) );
// ['a', 'b', 'nt', 'nv', 'z', null, null, null, null]

console.log( arr );
// ['a', 'b', 'nt', 'nv', 'z', null, null, null, null]

実行結果

降順

降順にするには、「return」する条件を変更します。

const arr = ['nt',  null, 'b', null, 'nv', null, 'a', null, 'z'];

console.log( arr.sort((x, y) => {
  if (x === null) {
    return 1;
  }

  if (y === null) {
    return -1;
  }

  if (x === y) {
    return 0;
  }

  return x < y ? 1 : -1;
}) );
// ['z', 'nv', 'nt', 'b', 'a', null, null, null, null]

console.log( arr );
// ['z', 'nv', 'nt', 'b', 'a', null, null, null, null]

実行結果

元の値を変えない

元の値を変えたくない場合は、スプレッド構文を使用します。

const arr = ['nt',  null, 'b', null, 'nv', null, 'a', null, 'z'];

console.log( [...arr].sort((x, y) => {
  if (x === null) {
    return 1;
  }

  if (y === null) {
    return -1;
  }

  if (x === y) {
    return 0;
  }

  return x < y ? -1 : 1;
}) );
// ['a', 'b', 'nt', 'nv', 'z', null, null, null, null]

console.log( arr );
// ['nt', null, 'b', null, 'nv', null, 'a', null, 'z']