1

Есть строка:

  'foo.bar18=7c447b740acd8213a90808a7949b22b6&boo.foo=10&foo.id=3'

, которую пропустил сквозь reduce и получил:

  { foo: { bar18: { '7c447b740acd8213a90808a7949b22b6': [Object] } } }

, а потом сквозь JSON.stringify и получил:

{
  "foo": {
    "bar18": {
      "7c447b740acd8213a90808a7949b22b6": {
        "boo": {
          "foo": {
            "10": {
              "foo": {
                "id": "3"
              }
            }
          }
        }
      }
    }
  }
}

Как я могу убрать повторяющиеся элементы(foo, boo и т.д)?

Есть такая вещь, как Object.assign, но я верно что-то не так делаю, ибо не происходит ничего.

И офф-топ: почему так много вложений получается?

1 ответ 1

4

Будем считать, что исходная строка - это query_string, то есть состоит из ряда пар имя и значение, которые разделены знаком равенства, а сами пары разделяются символом амперсант или точка с запятой.

console.log(

    't=q&foo.bar18=7c447b740acd&boo.foo=10&foo.id=3'

        // разделяет исходную строку на пары имя и значение
        // (сплитим по разделителю пар, получаем массив строк вида ["a.z=b", "c=d"])
        .split(/[&;]/)

        // каждый элемент массива пар разделяем по "=",
        // т.о. каждый элемент массива превращаем в массив вида [имя, значение]
        // в этой точке данные имеют вид [["a.z", "b"], ["c", "d"]]
        .map(x => x.split('='))

        // мы помним, что у нас массив массивов,
        // в 0вом элементе массива у нас имя (параметра),
        // имя может представлять собой последовательность ключей
        // разделённых символом точка. привычно делаем из этой строки массив.
        // в этой точке данные имеют вид [[["a", "z"], "b"], [["c"], "d"]]
        .map(x => (x[0] = x[0].split('.')) && x)

        //
        .reduce((map, x) => {
            // в x[0] у нас хранится последовательность ключей сверху вниз
            // наша задача пройти по ней и присвоить ключу на последнем уровне значение из x[1]

            // откусываем имя ключа последнего уровня
            let lastKey = x[0].pop();

            // внутри аккумулятора map проходимся по последовательности ключей
            // и возвращаем значение по ключу
            // (либо инициализируем его в объект и возвращаем)
            // в итоге мы получим "предпоследний" уровень - в него и пишем данные
            x[0].reduce((xmap, k) => (xmap[k] || (xmap[k] = {})), map)[lastKey] = x[1];
            return map;
        }, {})
    
);

Должен сказать, что этот же код можно сделать эффективнее перенеся в reduce обработку подстрок (логику двух map-ов, которые следуют после первого split), но цель этих map-ов в том чтобы достичь большей наглядности, более явно показать этапы обработки строки.

Это, скорее, демонстрационный вариант решения и для того чтобы использовать его на проекте нужно разобраться с несколькими недостатками (впрочем, их легко исправить):

  • строка вида foo.bar=1&foo.bar=2 должна в результате быть такой {foo: {bar: [1,2]}}, но будет такой {foo: {bar: 2}}. это исправляется проверкой наличия lastKey на "предпоследнем уровне"
  • обработка строки вида foo=1&foo.bar=2 породит исключение. нужно следить за типом данных в xmap[k]
  • результатом обработки строки вида foo.0.z=1&foo.1.bar=2 должен быть массив. наверное :)
6
  • В итоге должно получиться вот как-то вот так: {"foo": {"bar18": "7c447b740acd8213a90808a7949b22b6","id":"3"},"boo": {"foo":10}}
    – HegoJune
    22 мая 2018 в 14:19
  • это и получается :) нажми на "Выполнить код" 22 мая 2018 в 14:20
  • Господи! Никогда не совмещайте несколько разноплановых деятельностей головой в короткий промежуток времени (js и университет), а то будете позориться из-за невнимательности. Прошу у Вас прощения и приношу огромную благодарность!
    – HegoJune
    22 мая 2018 в 14:26
  • Можно не скромную просьбу? Вы не могли бы оставить комментарии внутри кода? Я его до конца не понимаю :(
    – HegoJune
    22 мая 2018 в 15:49
  • прокомментировал 22 мая 2018 в 16:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.