JSFiddle - React, Tailwind, and code Playground

by tamtakoe

HTML

<p><span>Old array:</span> <tt id="oArr"></tt></p>
<p><span>New array:</span> <tt id="nArr"></tt></p>
<p><span><b>Result array:</b></span> <tt id="arr" name="arr"></tt></p>

CSS

span {
 display: inline-block;
 width: 100px; 
}

JavaScript

var oArr = [5,7,2,6,8,9,0],    
    nArr = [5,2,6,8,9,7,0],
    rArr = oArr.slice(), //Копия исходного массива, которая будет преобразована к новому виду
    o = oArr.length,
    n = nArr.length,
    oKeys = {},
    nKeys = {},
    newEl = 0

for (var i = 0; i < o; i++) {
    oKeys[oArr[i]] = i//{i:i, disable: false}
}
for (var i = 0; i < n; i++) {
    nKeys[nArr[i]] = i
}
//console.log(oKeys)
//console.log(nKeys)
for (var i = 0; i < n; i++) {
    var oi = i + newEl
    //console.log(i,nKeys)
    if (nArr[i] !== oArr[oi]) {
        //Добавление нового элемента       
        if (oKeys[nArr[oi]] === undefined) {
            console.log('add')
            newEl--
            rArr.splice(i, 0, nArr[i]);
            //i--
        }
        //Удаление элемента
        if (nKeys[oArr[oi]] === undefined) {
            console.log('del')
            newEl++
            rArr.splice(i, 1);
            i--
        }
        //Смена позиции
        if (oKeys[nArr[oi]] !== undefined && nKeys[oArr[oi]] !== undefined) {
            //console.log('change')
            //newEl++
            var oEl = oArr[oi]
            var nEl = nArr[i]
            console.log(i, oi, oEl, nEl, oKeys[nEl] - oKeys[oEl], nKeys[oEl] - nKeys[nEl])
            if ((oKeys[nEl] - oKeys[oEl]) > (nKeys[oEl] - nKeys[nEl])) {
                rArr.splice(oi, 0, nArr[i]);
                newEl--
                //rArr.splice(oKeys[nEl].i - newEl, 1);
                //oKeys[nEl].disable = true
                //console.log(nKeys[oEl])
                delete nKeys[nEl]
                //console.log(nKeys, newEl, rArr)
                
                
            } else {
                rArr.splice(oi, 1);
                newEl++
                delete oKeys[oEl]
                i--
            }
            //rArr.splice(i, 0, nArr[i]);
            //collection.splice(i + 1, 1);
            //rArr.splice(oKeys[nArr[i].id] + newEl, 1);
            //oArr.splice(oKeys[nArr[i].id] + newEl, 1);
           ...