Как сортировать массив от меньшего к большему и обратно?

Question

[Mdmitr]

Нужно по клику сортировать массив,
этот код работает, но есть ли лучшее решение?

Существует ли решение чтобы сократить код сортировки?

<div id="sort"></div>
	<button id="btn">Sort</button>

	<script>
const sortArr = document.getElementById('sort')		
const sortBtn = document.getElementById('btn')	

const points = [40, 100, 1, 5, 25, 10];
sortArr.innerHTML = points
const newArr = points.map(i => i + Math.floor(Math.random() * 100))

const sortListArr = () => {
	const arr = newArr[0]
	const arr1 = newArr[newArr.length - 1]
	if(arr > arr1){
		sortArr.innerHTML = newArr.sort(function(a, b){return a - b});
	}
	else{
		sortArr.innerHTML = newArr.sort(function(a, b){return b - a});
	}
}

sortBtn.addEventListener('click', sortListArr)

Answer 1

[Тигран Абрамян]

const sortListArr = () => {
  const condition = (newArr[0] > newArr[newArr.length - 1]);
  const sortedArr = newArr.sort((a, b) => a - b);

  sortArr.innerHTML = condition ? sortedArr : sortedArr.reverse();
}

Comments

[Mdmitr]

предыдущий код был рабочий, с локальными переменными

[Тигран Абрамян]

Mdmitr,
Обновил ответ.
В этом случае можем копировать оригинальный массив, что бы не изменить его.

либо так

const sortedArr = [...newArr].sort((a, b) => a - b);

либо так

const sortedArr = newArr.concat().sort((a, b) => a - b);

[Mdmitr]

TAbrahamyan, нет не работает, локальные переменные все же нужны

[Иван Клименко]

TAbrahamyan, вот так будет совсем правильно:

const sortListArr = () => {
    const sign = ((newArr[0] > newArr[newArr.length - 1]) ? 1 : -1);
    const sortedArr = [...newArr].sort((a, b) => (sign * (a - b)));
    return sortedArr;
}

[Mdmitr]

Иван Клименко, так вообще не работает

[Иван Клименко]

Mdmitr, приведите код, который вы запускаете

[Mdmitr]

Иван Клименко, я имею ввиду работает только в одну сторону

<div id="sort"></div>
	<button id="btn">Sort</button>

	<script>
const sortArr = document.getElementById('sort')		
const sortBtn = document.getElementById('btn')	

const points = [40, 100, 1, 5, 25, 10];
sortArr.innerHTML = points
const newArr = points.map(i => i + Math.floor(Math.random() * 100))

const sortListArr = () => {
    const sign = ((newArr[0] > newArr[newArr.length - 1]) ? 1 : -1);
    const sortedArr = [...newArr].sort((a, b) => (sign * (a - b)));
    return sortArr.innerHTML = sortedArr;
}


sortBtn.addEventListener('click', sortListArr)

[Тигран Абрамян]

Mdmitr,
У меня работает

[Mdmitr]

TAbrahamyan, а по клику?

[Тигран Абрамян]

Mdmitr,
Тоже работает

При нажатий на Run смотрите в Console.
Какой именно результат вы ожидаете ?

[Mdmitr]

TAbrahamyan, просто нужно чтобы по клику была сортировка меньше - больше и обратно
а в вашем примере только в одну сторону сортирует

[Тигран Абрамян]

Mdmitr, Обновил ответ. Да тут без локальных переменных не обойтись.

[Mdmitr]

TAbrahamyan, да, такой код рабочий
спасибо

[Иван Клименко]

Mdmitr, вот так? Но вообще какой-то странный подход.

<div id="sort"></div>
<button id="btn">Sort</button>
<script>
    const sortArr = document.getElementById('sort');
    const sortBtn = document.getElementById('btn');

    const points = [40, 100, 1, 5, 25, 10];
    sortArr.innerHTML = points;
    const newArr = points.map(i => i + Math.floor(Math.random() * 100));

    const sortListArr = () => {
        const sign = ((newArr[0] > newArr[newArr.length - 1]) ? 1 : -1);
        sortArr.innerHTML = newArr.sort((a, b) => (sign * (a - b)));
    }

    sortBtn.addEventListener('click', sortListArr);
</script>

[Mdmitr]

Иван Клименко, да именно так, а что тут странного?

[Иван Клименко]

Mdmitr, сортировка одного и того же массива каждый раз. Вот так логичнее:

<div id="sort"></div>
<button id="btn">Sort</button>
<script>
    const elemWithArr = document.getElementById('sort');
    const button = document.getElementById('btn');
    
    let array = [40, 100, 1, 5, 25, 10];
    elemWithArr.innerHTML = array;
	
    array = array.map(i => i + Math.floor(Math.random() * 100));
    const sign = ((array[0] > array[array.length - 1]) ? 1 : -1);
    array = array.sort((a, b) => (sign * (a - b)));

    const reverseArr = () => {
        array = array.reverse();
        elemWithArr.innerHTML = array;
    }

    button.addEventListener('click', reverseArr);
</script>

[Mdmitr]

Иван Клименко, да вы правы, я не изменяю массив array
должна быть имутабельность и исходные данные не должны изменятся
а эта строка будет удалена

array = array.map(i => i + Math.floor(Math.random() * 100));