JavaScriptで作った任意の配列から重複する要素を取り除いた後、何種類の数値で構成されている確認するためのプログラミングの解説をお願いします。

Question

いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

---

【質問の主旨】

ある配列内において重複する数値の要素を除いたのち、その配列がもともといくつの要素で構成されているかカウントするプログラムがあります。

const arr = [2, 3, 4, 4, 5]

var removeDuplicates = function(nums) {
    
    
    for (let i = 0; i < nums.length; ++i) {
        while(nums[i] === nums[i + 1]) {
          nums.splice(i + 1, 1);
        }
    }

    return nums.length;

};

console.log(removeDuplicates(arr));　// 4

なぜこのコードで、定数arrは4つの要素から成る配列であることが判定できるのでしょうか？

【質問の補足】

1. このアルゴリズムとプログラミングについて

このアルゴリズムはleetcodeから引用し、プログラミングコードはこの問題について解答をされた方のコードを引用しています。leetcode上ではこのコードは「正解(Accepted)」とされます

leetcode上ではこのコードは「正解」とされています。

2. spliceで処理をしたあとの配列値について

特にwhile文の中で、nums.splice(i + 1, 1); としたあとの配列が[2, 3, 4, 5]となることは理解できますが、その配列が別の変数に代入されているわけではないにもかかわらず、return nums.length; したときにはすでに要素の個数が5から1つ減って4になっていることがよくわかりません。

3. デバッグについて

nums.splice(i + 1, 1); について確認するために、paiza.ioを使ってデバッグをしました。
するとこちらは処理結果の配列や、その要素数も想定外の結果が返されます。leetcode と paizo.io でなぜ異なるような挙動をするのかよく分かりません。

---

以上、よろしくお願いします。

Answer 1

spliceは配列を破壊的に書き換えます(詳しい仕様についてはMDNが分かりやすいです)。つまり、nums.splice(i + 1, 1);を実行した時点で既にnumsの内容が[2, 3, 4, 5]に変更されています。そのため、それよりも後ろにあるnums.length;では4が出力されます。
また、leetcodeとpaiza.ioで結果が異なるように見えるのは、console.log(nums.splice(i + 1, 1))を追加したからです。これによって2回配列を書き換えることになっています。この行をconsole.log(nums)に変更すると期待通りに出力されるはずです。

このコードの仕組みが分かりやすくなるように出力する部分を増やしてみたので実際にarrの中身を色々と変更して実行してみてください。

const arr = [2, 3, 4, 4, 5, 5, 5]

var removeDuplicates = function(nums) {

    for (let i = 0; i < nums.length; ++i) {
        console.log(`配列[${nums}]の${i}番目と重複したデータがないかチェックします`)
        while(nums[i] === nums[i + 1]) {
          nums.splice(i + 1, 1);
          console.log(` 配列[${nums}]の${i}番目と${i+1}番目のデータは重複していたので${i+1}番目のデータを削除しました`)
          console.log(` 現在の内容:[${nums}]`)

        }
    }

    return nums.length;

};

console.log(removeDuplicates(arr));

Comments

[echizeyayota]

goma1661 さん。
コメントありがとうございます。
また元のコードから、for や while で何をやっているのか分かりやすいコードに書き換えてくださりありがとうございます。このコードを確認することで自分が疑問に思っていたことが全て解消しました。
今後ともどうぞよろしくお願いします。

Answer 2

２枚目の画像の「本来は[2,3,4,5]と整数値の4が表示されるのでは？」というコメントより
誤解があるかもしれませんので、

spliceは、(配列と与える引数によりますが)
元の配列そのものを破壊的に変更するとともに、
spliceの戻り値は、変更された後の配列ではなく、切り取られた要素の配列です。

const arr = [0, 1, 2, 3, 4];

const a = arr.splice(2, 1);

console.log(a) //[2]　と出力される　＝切り取った要素が配列として返される。

console.log(arr) //[0, 1, 3, 4]　と出力される　＝元の配列が破壊的に変更されている

Comments

[echizeyayota]

baitokunさん
spliceの解説ありがとうございます。
おかげさまでspliceメソッドがどういう性質のメソッドであるかがよく分かりました。
今後ともどうぞよろしくお願いします。