SOURCE

let arr = [
    { roleId: null },
    { roleId: 1 },
    { roleId: 2 },
    { roleId: 3 },
    { roleId: 4 },
    { roleId: 4 },
    { roleId: 4 },
    { roleId: 4 },
    { roleId: 4 },
    { roleId: 3 },
    { roleId: 2 },
    { roleId: 1 },
    { roleId: 2 },
    { roleId: 4 },
    { roleId: 4 },
    { roleId: null },
    { roleId: 5 },
    { roleId: null },
    { roleId: 6 },
    { roleId: null },
    { roleId: null },
    { roleId: null }
]
arr.forEach((plot, pIndex) => {
    plot.dir = null;
    plot.i = pIndex;
});
const hasRoleArr = arr.filter(item => item.roleId);
const noRoleArr = arr.filter(item => !item.roleId);
for (let i = 0; i < hasRoleArr.length; i++) {
    if (i !== hasRoleArr.length - 1) {
        if (i === 0 && hasRoleArr[0]) {
            hasRoleArr[0].dir = 'left';
        }
        if (hasRoleArr[i].roleId === hasRoleArr[i + 1].roleId) {
            hasRoleArr[i + 1].dir = hasRoleArr[i].dir;
        } else {
            hasRoleArr[i + 1].dir = hasRoleArr[i].dir === 'left' ? 'right' : 'left';
        }
    }
}
let lastRes = hasRoleArr.concat(noRoleArr);
lastRes = lastRes.sort((a, b) => a.i - b.i);
lastRes.forEach(plot => {
    console.log(plot);
});