gpt4 book ai didi

javascript - 在参数中使用解构时未捕获类型错误

转载 作者:行者123 更新时间:2023-12-02 21:00:04 24 4
gpt4 key购买 nike

我有这个函数代码,我正在使用它在 JavaScript 中创建代码片段。我想知道是否可以让它看起来更好,因为我认为我所做的这段代码看起来不太专业。

我尝试使用解构,但由于某种原因,我的浏览器向我显示此消息 Uncaught TypeError: Cannot read property 'appendChild' of undefined

我想知道是否有更好的方法将多个参数传递给 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);

最佳答案

您的参数解构没问题,但您以两种不同的方式调用create。这个调用没问题:

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

...但这一个不是:

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

这将导致您的 create 函数尝试从字符串 解构 tvp 属性>'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
});

关于javascript - 在参数中使用解构时未捕获类型错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61377668/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com