Многократная сортировка массива объектов приводит к странной ошибке в консоли браузера |Javascript

Question

У меня есть массив объектов, подобный этому:

let guests = [{name: 'a'},{name: 'c'},{name: 'b'}]

Я экспериментирую, чтобы отсортировать его по убыванию, а затем по возрастанию:

let guests = [{
  name: 'a'
}, {
  name: 'c'
}, {
  name: 'b'
}]
console.log(guests)

var var1 = guests.sort((a, b) => a.name < b.name)
console.log(var1)

var var2 = guests.sort((a, b) => a.name > b.name)
console.log(var2)

Результат для всех трех консолей таков:

[{name: 'a'}, {name: 'b'}, {name: 'c'}]

Чего я не понимаю, так это того, почему все три console.log покажут мне отсортированный в порядке возрастания. Два файла console.log происходят до сортировки.

Теперь я понимаю, что с массивом манипулируют после сортировки. Но что я не понимаю, так это почему будет console.log перед сортировкой. Чтобы сравнить с нормальным поведением, которое я ожидаю, я использовал массив строк.

let guests = ['a','c','b']

jsfiddle пример: пример Здесь console.log имеет больше смысла для меня.

Answer 1

Вы модифицируете один массив, поэтому затрагиваются все журналы консоли.

То, что вы делаете, это просто устанавливаете var1 и var2 как ссылку для гостей.

Если вы хотите увидеть отдельные результаты, вам нужна новая копия этого массива. Вы можете сделать .slice (0) исходного массива.

let guests = [{name: 'a'},{name: 'c'},{name: 'b'}]
console.log(guests)

var var1 = guests.slice(0).sort((a,b)=> a.name<b.name ? 1:-1)
console.log(var1)

var var2 = guests.slice(0).sort((a,b)=> a.name>b.name ? 1:-1)
console.log(var2)

Answer 2

Вы можете использовать JSON.stringify для консоли.В консоли нет функции сброса, поэтому вы не можете изменить это без изменения ссылок.

Answer 3

Это не ошибка, несмотря на то, что Array.sort () возвращает массив, он является только ссылкой, поэтому он влияет на исходный массив, а не на копию (алгоритм на месте). Чтобы получить новый массив, вы должны клонировать массив (slice, lodash deepClone и т. Д.) Перед сортировкой.

ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Важная строка в документе:

отсортированный массив. Обратите внимание, что массив отсортирован по месту, и копия не создается.

Рабочий пример:

let guests = [{
  name: 'a'
}, {
  name: 'c'
}, {
  name: 'b'
}]
console.log(guests)

var var1 = guests.slice(0).sort((a, b) => a.name < b.name)
console.log(var1)

var var2 = guests.slice(0).sort((a, b) => a.name > b.name)
console.log(var2)

Примечание

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

Примечание 2

Также var оператор является частью проблемы из-за подъема:

Объявления var, где бы они ни находились, обрабатываются перед выполнением любого кода. Это называется подъемом и обсуждается ниже.

Ссылка: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Description