Мой ответ в значительной степени основан на ответе с самым высоким рейтингом, и, надеюсь, все это понимают (тоже самое объяснение на моем GitHub). Вот почему его имплементация с картой работает:
Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +
')');
Назначение функции - взять объект и изменить исходное содержимое объекта, используя метод, доступный для всех объектов (как объектов, так и массивов) без возврата массива. Почти все в JS является объектом, и по этой причине элементы, расположенные ниже по конвейеру наследования, могут технически использовать те, которые доступны для тех, кто находится на линии вверх (и наоборот).
Причина этого заключается в том, что функции .map возвращают массив, ТРЕБУЮЩИЙ, что вы предоставляете явный или неявный ВОЗВРАТ массива вместо простой модификации существующего объекта. По сути, вы заставляете программу думать, что объект является массивом, используя Object.keys, который позволит вам использовать функцию map, воздействуя на значения, с которыми связаны отдельные ключи (я фактически случайно возвратил массивы, но исправил это). Пока нет возврата в обычном смысле, не будет никакого массива, созданного с оригинальным объектом, все еще целым и измененным как запрограммированный.
Эта конкретная программа принимает объект с именем images, принимает значения его ключей и добавляет URL-теги для использования в другой функции. Оригинал это:
var images = {
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305',
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-
Matanzas-city- Cuba-20170131-1080.jpg',
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };
... и модифицировано это:
var images = {
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-
east-Matanzas-city- Cuba-20170131-1080.jpg'),
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg')
};
Первоначальная структура объекта остается неизменной, что обеспечивает нормальный доступ к свойству, если нет возврата. НЕ возвращайте массив, как обычно, и все будет хорошо. Цель - переназначить исходные значения (изображения [ключ]) на то, что нужно, а не на что-либо еще. Насколько я знаю, для предотвращения вывода массива ДОЛЖНА быть ПЕРЕОБРАЗОВАНИЕ изображений [ключ] и неявный или неявный запрос на возврат массива (назначение переменных делает это и дает сбой мне и обратно).
РЕДАКТИРОВАТЬ:
Собираюсь обратиться к своему другому методу относительно создания нового объекта, чтобы избежать изменения исходного объекта (и переназначение, по-видимому, все еще необходимо, чтобы избежать случайного создания массива в качестве вывода). Эти функции используют синтаксис стрелки и, если вы просто хотите создать новый объект для будущего использования.
const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
result[key] = mapFn(obj)[key];
return result;
}, {});
var newImages = mapper(images, (value) => value);
Принцип работы этих функций выглядит следующим образом:
mapFn берет функцию, которая будет добавлена позже (в этом случае (value) => value), и просто возвращает все, что там хранится, в качестве значения для этого ключа (или умножается на два, если вы измените возвращаемое значение, как он сделал) в mapFn ( объект) [ключ],
а затем переопределяет исходное значение, связанное с ключом, в результате [ключ] = mapFn (obj) [ключ]
и возвращает операцию, выполненную с результатом (аккумулятор, расположенный в скобках, инициированный в конце функции .reduce).
Все это выполняется на выбранном объекте, и ЕЩЕ НЕ МОЖЕТ быть неявный запрос возвращаемого массива, и он работает только при переназначении значений, насколько я могу судить. Это требует некоторой умственной гимнастики, но сокращает количество необходимых строк кода, как видно выше. Вывод точно такой же, как видно ниже:
{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain:
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}
Имейте в виду, что это работает с NUMNUMERS. Вы МОЖЕТЕ Дублировать ЛЮБОЙ объект, ПРОСТО ВОЗВРАЩАЯ ЗНАЧЕНИЕ в функции mapFN.
Object.keys
, которые не имеют четко определенного порядка. Это может быть проблематично, я предлагаю использоватьObject.getOwnPropertyNames
вместо этого.