Почему не корректно работает функция sort?

Всем привет.

В 21 задании (последнем) курса Jscript стоит задача сменить тип события в уже написанный код (все очень просто).

Но, код сложный (отталкиваясь от приобретенных знаний из курса)!

Сам код перенес себе на Sublime, чтобы разобраться что и почему.

Некоторые вещи остались непонятны.

Так например, в этой части кода

var array = ['Яблоко', 'Груша', 'Банан', 'Апельсин', 'Арбуз'];
var anchor = 0;

var say = function(){

$('#result').html('');

if(anchor === 0) {
array.reverse();
} else {
anchor = 1;
array.sort();
}

for(var i = 0; i < array.length; i++) {
$('#result').append('<p>'+array[i]+'</p>');
}

}

test.addEventListener('click', say);

должны отрабатывать две функции: реверс и сорт. В данном коде это работает.

Но, вместо Апельсин я написал Пельсин. И, как оказалось, сортировка вывела следующий результат:

Арбуз

Пельсин

Банан

Груша

Яблоко

Куки в браузере удалил, это работа кода, а не кеша.

Сложилось впечатление, что сортируются сами "ячейки с фруктами" по ключам, но не по содержанию.

Это пример стандартной сортировки с мануала:

var fruit = ['арбузы', 'бананы', 'Вишня'];
fruit.sort(); // ['Вишня', 'арбузы', 'бананы']

Подскажите, пожалуйста, почему так работает код?

Возможно, кто-то сталкивался с хорошими источниками, где очень хорошо и наглядно описаны примеры по созданию подобных функций? а также циклов? (ps: с циклами тоже что-то не очень, у меня).

СПАСИБО!

javascript

2 ответов

Sort и reverse работают если запустить код например так:

var array = ["Яблоко", "Груша", "Банан", "Апельсин", "Арбуз"];

array.sort();
(5) ["Апельсин", "Арбуз", "Банан", "Груша", "Яблоко"]

array.reverse();
(5) ["Яблоко", "Груша", "Банан", "Арбуз", "Апельсин"]

Что касается ['арбузы', 'бананы', 'Вишня'] - это хороший вопрос. Дело в том, что данная функция сортировки в javascript работает корректно (ожидаемо), если использовать все слова написанные в низком регистре (без заглавных букв) и не работает если будут заглавные буквы или не ASCII символы, например символ ö.

Чтобы сортировка работала корректно с вашим примером, нужно перевести все символы в нижний регистр, а уже потом сортировать. Для этого можно расширить sort функцию и написать:

var fruits = ['арбузы', 'бананы', 'Вишня'];

fruits.sort(function(a, b) {
    a = a.toLowerCase();
    b = b.toLowerCase();
    if( a == b) return 0;
    return a < b ? -1 : 1;
});

И результат сортировки будет таким:

(3) ["арбузы", "бананы", "Вишня"]

Или можно расширить функцию sort более простым способом, использовав функцию localeCompare():

var fruits = ['арбузы', 'бананы', 'Вишня'];

fruits.sort(function (a, b) {
    return a.localeCompare(b);
});

Результат сортировки будет таким же:

(3) ["арбузы", "бананы", "Вишня"]

Неплохой источник по теории javascript можно найти по этой ссылке:

https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide

Мой мини курс Javascript/jQuery - дает только начальное представление о javascript и jQuery. После него стоит пройти Modern Javascript. Потом можно начать изучать VueJS или React. Курсы Modern Javascript и VueJS будут дополнятся.

Спасибо, Сергей, за дополнение.

С регистром при сортировке было понятно, но вот пример кода с расширенными функция по сортировке - это хороший наглядный пример (с ним еще нужно будет разобраться)! Также, спасибо за рекомендации по изучению и ссылку на ресурс по js.

с Пельсином так и не разобрался.

в этом коде все адекватно работает

var array = ["Яблоко", "Груша", "Банан", "Пельсин", "Арбуз"];
array.sort();
    for(var i = 0; i < array.length; i++) {
      $('#result2').append('<p>'+array[i]+'</p>');
    } 
// Арбуз

Банан

Груша

Пельсин

Яблоко

А этот код

var fruits = ['Яблоко', 'Груша', 'Банан', 'Пельсин', 'Арбуз'];
var anchor = 0;

var say = function(){
    
    $('#result').html('');
    
    if(anchor === 0) {
        fruits.reverse();
    } else {
        anchor = 1;
        fruits.sort();
    }

    for(var i = 0; i < fruits.length; i++) {
      $('#result').append('<p>'+fruits[i]+'</p>');
    }
    
}

выводит при сортировке

Арбуз

Пельсин

Банан

Груша

Яблоко

Вместо Пельсина указывал аааа, все равно позиция остается №2 при сортировке.

Внешние признаки работы кода - сортировка по ключам...