Рубрики
Без рубрики

Как работает метод сортировки в JavaScript?

Метод базового понимания метода сортировки (), как следует из его названия, сортирует каждый EL … с меткой JavaScript, Codenewbie, начинающих.

Основное понимание метода

sort () Метод, как следует из названия, сортирует каждый элемент в массиве.

По умолчанию элементы преобразуются в строки и сортируются в порядке возрастания на основе UTF-16 Кодовые значения Анкет

Если массив содержит различные типы символов, такие как знаки, числа и буквы с разными случаями, порядок был бы таким; Знаки * > Числа> буквы верхнего регистра> буквы нижних регистра. *За исключением

const array = ["lettuce", 6, 10, "cabbege", "/", "tomato", "Cucumber", "onion", "Squash", 3, "!"];

array.sort();

console.log(array);

// --> ["!", "/", 10, 3, 6, "Cucumber", "Squash", "cabbege", "lettuce", "onion", "tomato"]

Настройка заказа сортировки – сравнение функции

При сортировке массива, в котором есть только цифры, как вы думаете, как элементы будут заказаны?

Давайте посмотрим на то, что произошло с примером ниже.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort();

console.log(array);

// --> [-14, -23, 1, 1000, 200, 421, 55]

Я считаю, что это было не то, что вы ожидали.

Как описано выше, sort () Метод преобразует каждый элемент в строку, поэтому он не сортирует их по численному порядку.

Однако с Сравнение функции Вы можете настроить заказ сортировки по мере того, как вы хотите, чтобы вы могли решить эту проблему. См. Пример ниже.

const array = [1, 200, 55, 421, -14, -23, 1000];

array.sort(function compareFunction(a, b){
  return a - b;
});
//arrow function ver.
//array.sort((a, b) => a - b);

console.log(array);

// --> [-23, -14, 1, 55, 200, 421, 1000]

Установив два аргумента A и b и возвращает определенную ценность, вы можете манипулировать, как сортировать. В этом примере A Представляет элемент, который sort () Метод сравнивается со следующим элементом, пока беременный представляет следующий элемент, который A сравнивается с.

Сравнение функции имеет два типа форм.

Когда массив содержит только числа в качестве последнего примера, форма может быть похожа на следующее. Предполагается, что массив не содержит Бесконечность а также НАН ! Пожалуйста, удалите их, если они существуют!

const array = [1, 0, 4, 3, -1, -3, 2];

array.sort((a, b) => b - a); //descending order

console.log(array);

// --> [4, 3, 2, 1, 0, -1, -3]

Если это не так, форма может быть похожа на следующее.

const array = ["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

array.sort(function compareFunction(a, b){ //descending order
  if(a > b){
    return -1;
  } else if(b > a){
    return 1;
  }
});

console.log(array);

// --> ["tomato", "squash", "onion", "lettuce", "cucumber", "cabbege"]

sort () Метод, показанный в приведенном выше примере, действует по -разному в зависимости от его возвращаемого значения. (В последнем примере он возвращает 1 или -1 ) Также Сравнение функции Должен иметь возвратное значение или вызывает ошибку.

  • Если Сравнение функции (a, b) Возвращает меньше, чем 0 , оставить A и b без изменений.

  • Если Сравнение функции (a, b) Возвращает 0 , оставить A и b неизменно по отношению друг к другу, но сортируется по всем различным элементам. ПРИМЕЧАНИЕ. Стандарт ECMASCRIPT начал гарантировать это поведение только в 2019 году, таким образом, более старые браузеры могут не уважать это.

  • Если Сравнение функции (a, b) Возвращает больше, чем 0 , сортировать беременный до a .

Давайте разберем то, что здесь происходит с последним примером.

Во -первых, A представляет "Салат" и b представляет "cabbege" Анкет Сравнение этих двух элементов, условие a> б это правда и возвращает –1 Анкет Здесь ничего не меняется.

["lettuce", "cabbege", "tomato", "cucumber", "onion", "squash"];

Теперь, A это "cabbege" и b это "Томат" Анкет Функция возвращает 1 На этот раз, так "Томат" приходит раньше "cabbege" Анкет

["lettuce", "tomato", "cabbege", "cucumber", "onion", "squash"];

На этот раз сравнение "Салат" как A с "Томат" как b , он возвращается 1 опять таки. Порядок меняется как следующее.

["tomato", "lettuce", "cabbege", "cucumber", "onion", "squash"];

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

Спасибо Сравнение функции , sort () Метод может работать с ассоциативным массивом, что означает, что он сортирует значения, доступ к каждому с ключами (свойства). В следующем примере сортируется возраст каждого Диснейленда от самых старых до самых молодых.

const array = [
  { name: 'Disneyland Park', location: 'California', open: 1955 },
  { name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
  { name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 },
  { name: 'Disneyland Paris', location: 'Coupvray', open: 1992 }
];

array.sort((a, b) => { //sort old to young
  const now = new Date();
  const thisYear = now.getFullYear();
  return (thisYear - b.open) - (thisYear - a.open);
}); 

console.log(array);

// -->
//[
//{ name: 'Disneyland Park', location: 'California', open: 1955 },
//{ name: 'Tokyo Disneyland', location: 'Chiba', open: 1983 },
//{ name: 'Disneyland Paris', location: 'Coupvray', open: 1992 },
//{ name: 'Hong Kong Disneyland', location: 'Lantau Island', open: 2005 }
//]

Берегись!

И последнее, но не менее важное, этот метод действует на существующий массив в отличие от map () или Filter () Анкет

Если вам нужно сохранить исходный массив, объявите новую переменную и назначите копию исходного массива, используя slice () метод Затем сортируйте копию.

const array = [1, 0, 4, 3, -1, -3, 2];
const sorted = array.slice();

sorted.sort((a, b) => b - a);

console.log(`Original array: [${array}]`);
console.log(`Sorted array; [${sorted}]`);

// -->
//"Original array: [1,0,4,3,-1,-3,2]"
//"Sorted array; [4,3,2,1,0,-1,-3]"

Ссылка: Array.prototype.sort () – JavaScript | Mdn 【Javascript 入門】 sort () による 配列 ・ 文字 列 ・ オブジェクト ソート 方法 方法 | 侍 エンジニア ブログ

Оригинал: “https://dev.to/shivchan/how-does-sort-method-work-in-javascript-5bk5”

Читайте ещё по теме: