Сортировка массивов JavaScript

Сортировка массива

Метод sort() сортирует массив в алфавитном порядке:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The sort() method sorts an array alphabetically:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

fruits.sort();
document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Реверсирование массива

Метод reverse() меняет местами элементы массива.

Вы можете использовать его, чтобы отсортируйте массив в порядке убывания:

Пример

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>Sort in Reverse</h2>

<p>The reverse() method reverses the elements in an array.</p>
<p>By combining sort() and reverse() you can sort an array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
// Create and display an array:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo1").innerHTML = fruits;

// First sort the array
fruits.sort();

// Then reverse it:
fruits.reverse();

document.getElementById("demo2").innerHTML = fruits;
</script>

</body>
</html>

Числовая сортировка

По умолчанию функция sort() сортирует значения как строки.

Это хорошо работает для строк («Apple» предшествует «Banana»).

Однако если числа отсортированы как строки, «25» больше «100». потому что «2» больше, чем «1».

Из-за этого метод sort() будет выдавать неправильный результат при сортировке. цифры.

Это можно исправить, предоставив функцию сравнения:

Пример

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in ascending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;  

points.sort(function(a, b){return a - b});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

Используйте тот же прием для сортировки массива по убыванию:

Пример

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort the array in descending order:</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo1").innerHTML = points;

points.sort(function(a, b){return b - a});
document.getElementById("demo2").innerHTML = points;
</script>

</body>
</html>

Функция сравнения

Целью функции сравнения является определение альтернативной сортировки. заказ.

Функция сравнения должна возвращать отрицательное, нулевое или положительное значение, в зависимости от аргументы:

function(a, b){return a - b}

Когда функция sort() сравнивает два значения, она отправляет значения в функцию сравнения и сортирует значения в соответствии с возвращаемыми значениями (отрицательные, нулевое, положительное) значение.

Если результат отрицательный, a сортируется перед b.

Если результат положительный, b сортируется. перед a.

Если результат равен 0, никакие изменения не производятся в порядке сортировки двух ценности.

Пример:

Функция сравнения сравнивает все значения в массиве, два значения одновременно. время (a, b).

При сравнении 40 и 100 метод sort() вызывает функцию сравнения (40, 100).

Функция вычисляет 40-100 (a - b) и поскольку результат отрицательный (-60), функция сортировки отсортирует 40 как значение меньше 100.

Вы можете использовать этот фрагмент кода для экспериментов с численными и сортировка по алфавиту:

<button onclick="myFunction1()">Sort Alphabetically</button>
<button 
 onclick="myFunction2()">Sort Numerically</button>
<p id="demo"></p>
 
<script>
const points = [40, 100, 1, 5, 25, 10];
 document.getElementById("demo").innerHTML = points;
function 
 myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML 
 = points;
}
function myFunction2() {
  points.sort(function(a, b){return 
 a - b});
  document.getElementById("demo").innerHTML = points;
}
 </script>

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort the array alphabetically or numerically.</p>

<button onclick="myFunction1()">Sort Alphabetically</button>
<button onclick="myFunction2()">Sort Numerically</button>

<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction1() {
  points.sort();
  document.getElementById("demo").innerHTML = points;
}
function myFunction2() {
  points.sort(function(a, b){return a - b});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Сортировка массива в случайном порядке

Пример

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(){return 0.5 - Math.random()});

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  points.sort(function(){return 0.5 - Math.random()});
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Метод Фишера Йейтса

Приведенный выше пример array.sort() неточен. Это пойдет на пользу некоторым цифры над остальными.

Самый популярный правильный метод называется «перетасовка Фишера Йейтса». введен в науку о данных еще в 1938 году!

В JavaScript метод можно перевести так:

Пример

const points = [40, 100, 1, 5, 25, 10];

for (let i = points.length -1; i > 0; i--) {
  let j = Math.floor(Math.random() * (i+1));
  let k = points[i];
  
  points[i] = points[j];
  points[j] = k;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>
<h2>The Fisher Yates Method</h2>

<p>Click the button (again and again) to sort the array in random order.</p>

<button onclick="myFunction()">Try it</button>
<p id="demo"></p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;  

function myFunction() {
  for (let i = points.length -1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i+1));
    let k = points[i];
    points[i] = points[j];
    points[j] = k;
  }
  document.getElementById("demo").innerHTML = points;
}
</script>

</body>
</html>

Найдите самое низкое (или самое высокое) значение массива

Нет встроенных функций для нахождения максимума или минимума. значение в массиве.

Однако после того, как вы отсортировали массив, вы можете использовать индекс для получения самых высоких и самых низких значений.

Сортировка по возрастанию:

Пример

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
// now points[0] contains the lowest value
// and points[points.length-1] contains the highest value

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Сортировка по убыванию:

Пример

const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});
// now points[0] contains the highest value
// and points[points.length-1] contains the lowest value

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b-a});
document.getElementById("demo").innerHTML = points[0];
</script>

</body>
</html>

Сортировка всего массива — очень неэффективный метод, если вы хотите найти только наибольшее (или наименьшее) значение.

Использование `Math.max()` в массиве

Вы можете использовать Math.max.apply, чтобы найти наибольшее число в массиве:

Пример

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  return Math.max.apply(null, arr);
}
</script>

</body>
</html>

Math.max.apply(null, [1, 2, 3]) эквивалентен Math.max(1, 2) , 3).

Использование `Math.min()` в массиве

Вы можете использовать Math.min.apply, чтобы найти наименьшее число в массиве:

Пример

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array Sort</h1>

<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  return Math.min.apply(null, arr);
}
</script>

</body>
</html>

Math.min.apply(null, [1, 2, 3]) эквивалентен Math.min(1, 2) , 3).

Мои мин/макс методы JavaScript

Самое быстрое решение — использовать «самодельный» метод.

Эта функция проходит через массив, сравнивая каждое значение с самым высоким найдено значение:

Пример (Найти Макса)

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
        
  if (arr[len] > max) {
      
  max = arr[len];
    }
  }
  return max;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The highest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMax(points);

function myArrayMax(arr) {
  let len = arr.length;
  let max = -Infinity;
  while (len--) {
    if (arr[len] > max) {
      max = arr[len];
    }
  }
  return max;
}
</script>

</body>
</html>

Эта функция проходит через массив, сравнивая каждое значение с наименьшим. найдено значение:

Пример (Найти мин)

 function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    
  if (arr[len] < min) {
      
  min = arr[len];
    }
  }
  return min;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Array Sort</h2>
<p>The lowest number is <span id="demo"></span>.</p>

<script>
const points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = myArrayMin(points);

function myArrayMin(arr) {
  let len = arr.length;
  let min = Infinity;
  while (len--) {
    if (arr[len] < min) {
      min = arr[len];
    }
  }
  return min;
}
</script>

</body>
</html>

Сортировка массивов объектов

Массивы JavaScript часто содержат объекты:

Пример

const cars = [
  
 {type:"Volvo", year:2016},
  
 {type:"Saab", year:2001},
  
 {type:"BMW", year:2010}
];

Даже если объекты имеют свойства разных типов данных, метод sort() можно использовать для сортировки массива.

Решение состоит в том, чтобы написать функцию сравнения для сравнения значений свойств:

Пример

cars.sort(function(a, b){return a.year - b.year});

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Sort car objects on age:</p>

<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

cars.sort(function(a, b){return a.year - b.year});
displayCars();

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Сравнение свойств строк немного сложнее:

Пример

cars.sort(function(a, b){
  let x = a.type.toLowerCase();
  let y = b.type.toLowerCase();
    if (x < y) {return -1;}
  
 if (x > y) {return 1;}
  return 0;
});

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The sort() Method</h2>

<p>Click the buttons to sort car objects on type.</p>

<button onclick="myFunction()">Sort</button>
<p id="demo"></p>

<script>
const cars = [
  {type:"Volvo", year:2016},
  {type:"Saab", year:2001},
  {type:"BMW", year:2010}
];

displayCars();

function myFunction() {
  cars.sort(function(a, b){
    let x = a.type.toLowerCase();
    let y = b.type.toLowerCase();
    if (x < y) {return -1;}
    if (x > y) {return 1;}
    return 0;
  });
  displayCars();
}

function displayCars() {
  document.getElementById("demo").innerHTML =
  cars[0].type + " " + cars[0].year + "<br>" +
  cars[1].type + " " + cars[1].year + "<br>" +
  cars[2].type + " " + cars[2].year;
}
</script>

</body>
</html>

Стабильный массив `sort()`

В ES2019 переработан метод Array sort().

До 2019 года спецификация допускала нестабильные алгоритмы сортировки, такие как QuickSort.

После ES2019 браузеры должны использовать стабильный алгоритм сортировки:

При сортировке элементов по значению элементы должны сохранять свое относительное положение относительно других элементов с тем же значением.

Пример

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

<p id="demo"></p>

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

В приведенном выше примере при сортировке по цене результат не может содержать имена. в другом относительном положении, например:

Полная ссылка на массив

Для получения полной информации о массивах перейдите по ссылке:

Полное руководство по массивам JavaScript.

Справочник содержит описания и примеры всех Array. свойства и методы.

Сортировка массивов JavaScript

Оглавление

Сортировка массива

Пример

Реверсирование массива

Пример

Числовая сортировка

Пример

Пример

Функция сравнения

Сортировка массива в случайном порядке

Пример

Метод Фишера Йейтса

Пример

Найдите самое низкое (или самое высокое) значение массива

Пример

Пример

Использование Math.max() в массиве

Пример

Использование Math.min() в массиве

Пример

Мои мин/макс методы JavaScript

Пример (Найти Макса)

Пример (Найти мин)

Сортировка массивов объектов

Пример

Пример

Пример

Стабильный массив sort()

Пример

Полная ссылка на массив

Использование `Math.max()` в массиве

Использование `Math.min()` в массиве

Стабильный массив `sort()`