uncaught typeError при использовании деструктуризации в аргументах

Question

У меня есть этот код функции, который я использую для создания фрагмента кода в javascript. Я хочу знать, смогу ли я сделать его лучше, потому что я думаю, что этот код не выглядит профессионально.

Я попытался использовать деструктуризацию, но по какой-то причине мой браузер показал мне это сообщение Uncaught TypeError: Не могу прочитать свойство 'appendChild' с неопределенным значением

Я хотел бы знать, есть ли лучший способ передачи нескольких параметров в функцию в javascript, отправляющую аргументы как литерал объекта? И почему говорится, что строка содержит недопустимый символ?

Большое спасибо.

const create = function ({t, v, p}) {
        let n = document.createElement(t);
        n.innerHTML = v;
        p.appendChild(n);
        return n;
    };
    // create the list for reference
    let ul = create({
        t: 'ul',
        v: null,
        p: document.body
    });

Вот полный JS код.

const createsnippets = function (e) {
    // the reference node -- we atually have one ID for headlines 
    let headlines = document.getElementById('headlines');
    // utility function to add new HTML DOM element 


    const create = function ({t, v, p}) {
        let n = document.createElement(t);
        n.innerHTML = v;
        p.appendChild(n);
        return n;
    };
    // create the list for reference
    let ul = create({
        t: 'ul',
        v: null,
        p: document.body
    });

    // find all newsarticle classess and add then to snippet in sequence
    Array.from(document.querySelectorAll('article.newsarticle > h4')).forEach(function (h4) {
        create('li', h4.textContent + ' ... ' + h4.nextElementSibling.innerText, ul);
    });

    // insertion re-factors HTMl to ensure the layout (markup and CSS) when displaed
    headlines.parentNode.insertBefore(ul, headlines.nextSibling)
}

// once prepared, we can display the loaded content as snippet/collection 
document.addEventListener('DOMContentLoaded', createsnippets);

Answer 1

Деструктуризация вашего параметра в порядке, но вы вызываете create двумя разными способами. Этот вызов в порядке:

let ul = create({
  t: 'ul',
  v: null,
  p: document.body
});

... но это не так:

create('li', h4.textContent + ' ... ' + h4.nextElementSibling.innerText, ul);

Это приведет к тому, что ваша функция создания попытается уничтожить t, v и p свойство из строки 'li'. Код деструктуризации примерно соответствует этому, и вот что произойдет с этим вторым вызовом:

function(param) {                          // param = 'li'
  let t = param.t;                         // t = 'li'.t -> t = undefined
  let v = param.v;                         // v = 'li'.v -> v = undefined
  let p = param.p;                         // p = 'li'.p -> p = undefined
  let n = document.createElement(t);       // n = document.createElement(undefined)
  n.innerHTML = v;                         
  p.appendChild(n);                        // undefined.appendChild(n)
  return n;
}

Возможно, вы хотели сделать:

create({
  t: 'li', 
  v: `${h4.textContent} ... ${h4.nextElementSibling.innerText}`,
  p: ul
});