Объект по умолчанию сортируется по алфавиту?

Question

[glem1337]

Если формирую массив

ColumnsFilter.prototype.getColumnsList = function() { // Получаем список столбцов, имена, и их состояния по умолчанию исходя из html-разметки
	let columns = [];
	$('.table-light__head [data-column]').each( function() {
		columns.push({
			'column': $(this).data('column'),
			'state': $(this).data('default-state'),
			'name': $(this).find('.table-light__head-text').text()
		});
	});
	return columns;
};

Он не сортируется, и элементы в нем отображены в порядке добавления.

0: {column: "campaign", state: true, name: "Кампания "}
1: {column: "state", state: true, name: "Состояние"}
2: {column: "position_indicator", state: true, name: "Клики по позициям за вчерашний день																								"}
3: {column: "campaign_ads_regions", state: false, name: "Регионы показов"}
4: {column: "bid_modifiers", state: false, name: "Корректировки ставок"}
5: {column: "strategy_in_direct", state: false, name: "Стратегия в Директе"}
6: {column: "relevant_keywords", state: false, name: "Дополнительные релевантные фразы"}
7: {column: "metrica_counters", state: false, name: "Счетчики метрики"}
8: {column: "vCards", state: false, name: "Виртуальные визитки"}
9: {column: "network_images", state: false, name: "Картинки РСЯ"}
10: {column: "site_links", state: false, name: "Быстрые ссылки"}
11: {column: "time_targeting", state: true, name: "Временной таргетинг"}
12: {column: "first_special", state: true, name: "1спец, кол‑во"}
13: {column: "total_special", state: true, name: "Спец, кол‑во"}
14: {column: "total_guarantee", state: true, name: "Гарантия, кол‑во"}
15: {column: "total_dynamic", state: true, name: "Динамика, кол‑во"}
16: {column: "average_bid", state: true, name: "Средняя ставка"}
17: {column: "rest", state: true, name: "Бюджет осталось"}
18: {column: "days_rest", state: true, name: "Дней осталось"}
19: {column: "spent", state: true, name: "Расход сегодня"}

Если же я формирую объект, то элементы автоматически сортируются в алфавитном порядке, а мне этого не надо.

ColumnsFilter.prototype.getColumnsList = function() { // Получаем список столбцов, имена, и их состояния по умолчанию исходя из html-разметки
	let columns = {};
	$('.table-light__head [data-column]').each( function() {
		columns[$(this).data('column')] = {
			'state': $(this).data('default-state'),
			'name': $(this).find('.table-light__head-text').text()
		};
	});
	console.log(columns);
	//return columns;
};

Получается такой объект:

average_bid: {state: true, name: "Средняя ставка"}
bid_modifiers: {state: false, name: "Корректировки ставок"}
campaign: {state: true, name: "Кампания "}
campaign_ads_regions: {state: false, name: "Регионы показов"}
days_rest: {state: true, name: "Дней осталось"}
first_special: {state: true, name: "1спец, кол‑во"}
metrica_counters: {state: false, name: "Счетчики метрики"}
network_images: {state: false, name: "Картинки РСЯ"}
position_indicator: {state: true, name: "Клики по позициям за вчерашний день																								"}
relevant_keywords: {state: false, name: "Дополнительные релевантные фразы"}
rest: {state: true, name: "Бюджет осталось"}
site_links: {state: false, name: "Быстрые ссылки"}
spent: {state: true, name: "Расход сегодня"}
state: {state: true, name: "Состояние"}
strategy_in_direct: {state: false, name: "Стратегия в Директе"}
time_targeting: {state: true, name: "Временной таргетинг"}
total_dynamic: {state: true, name: "Динамика, кол‑во"}
total_guarantee: {state: true, name: "Гарантия, кол‑во"}
total_special: {state: true, name: "Спец, кол‑во"}
vCards: {state: false, name: "Виртуальные визитки"}

Как сохранить порядок элементов как при формировании массива?

Comments

[alex]

то элементы автоматически сортируются в алфавитном порядке

как вы это узнали?

[glem1337]

Alex, ну по объекту вроде видно, что отсортирован по первому уровню ключей в алфавитном порядке.

average_bid: {state: true, name: "Средняя ставка"} A
bid_modifiers: {state: false, name: "Корректировки ставок"} B
campaign: {state: true, name: "Кампания "} C
campaign_ads_regions: {state: false, name: "Регионы показов"}
days_rest: {state: true, name: "Дней осталось"} D
first_special: {state: true, name: "1спец, кол‑во"} F 
metrica_counters: {state: false, name: "Счетчики метрики"}
network_images: {state: false, name: "Картинки РСЯ"}
position_indicator: {state: true, name: "Клики по позициям за вчерашний день																								"}
relevant_keywords: {state: false, name: "Дополнительные релевантные фразы"}
rest: {state: true, name: "Бюджет осталось"}
site_links: {state: false, name: "Быстрые ссылки"}
spent: {state: true, name: "Расход сегодня"}
state: {state: true, name: "Состояние"}
strategy_in_direct: {state: false, name: "Стратегия в Директе"}
time_targeting: {state: true, name: "Временной таргетинг"}
total_dynamic: {state: true, name: "Динамика, кол‑во"}
total_guarantee: {state: true, name: "Гарантия, кол‑во"}
total_special: {state: true, name: "Спец, кол‑во"}
vCards: {state: false, name: "Виртуальные визитки"}

[alex]

Евгений Григорьев, вам кажется) это консоль сортирует. сделайте console.log(Object.keys(columns)). тем не менее лучше объекты не использовать для хранения упорядоченных данных

[Павел Корнилов]

Alex, некоторые броузеры так и сортируют. Но в спецификации ничего подобного нет.

[alex]

Павел Корнилов, в этом и соль, что явно не говорится об этом в спеке, т.е. сегодня так, а завтра уже по-другому

[Павел Корнилов]

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

Answer 1

[alex]

объект не гарантирует порядок ключей

const obj = {}

obj['z'] = {}
obj['a'] = {}
obj['b'] = {}

for (var property in obj) {
    if (obj.hasOwnProperty(property)) {
        console.log(property) // "z" "a" "b"
    }
}

obj['1'] = {}
obj['0'] = {}
for (var property in obj) {
    if (obj.hasOwnProperty(property)) {
        console.log(property) // "0" "1" "z" "a" "b"
    }
}

если вам важна упорядоченность, используйте массивы или Map

const map = new Map()

map.set('z', {})
map.set('a', {})
map.set('b', {})
map.forEach((val, key) => {
  console.log(key) // "z" "a" "b"
})

map.set('1', {})
map.set('0', {})
map.forEach((val, key) => {
  console.log(key) // "z" "a" "b" "1" "0"
})

Answer 2

[Павел Корнилов]

Можно и в алфавитном порядке ключи объекта перебирать, но сам он их сортировать не обязан по спецификации. Хотя некоторые броузеры и сортируют.

var o = {a:1, d:4, b:2, c:3};
Object.keys(o);
// Array(4) [ "a", "d", "b", "c" ]

var o = {a:1, d:4, b:2, c:3};
Object.keys(o).sort();
// Array(4) [ "a", "b", "c", "d" ]