Sé cómo verificar si existe una propiedad ( hasOwnProperty , in , !== undefined , etc.).
Pero no sé cómo evitar realizar una acción en esta propiedad si no existe.
¿Hay alguna solución para evitar la verificación if ( property && action en mi caso) cada vez?
Pregunta similar: Javascript: ¿cómo evitar múltiples comprobaciones de condición al verificar si el objeto tiene una propiedad? No es realmente relevante en mi caso.
const myFunction1 = myFunction2 = () => {}; const generateElement = (p) => { let div = document.createElement(p.tag); p.classes && (div.className = p.classes); p.style && (div.style.cssText = p.style); p.content && (div.innerHTML = p.content); p.appendIn && p.appendIn.appendChild(div); p.attribs && Object.entries(p.attribs).forEach((y) => { div.setAttribute(y[0], y[1]); }); p.events && Object.entries(p.events).forEach((y) => { div.addEventListener(y[0], y[1], false); }); return div } var newElem = generateElement({ tag: 'div', classes: 'mydiv', id: 'id42', content: 'Hello world!', style: 'background:#ccc', attribs: { 'tabindex': 0, 'title': 'Title #1' }, events: { 'click': myFunction1, 'mouseout': myFunction2 }, appendIn: document.body });Si tiene la versión correcta de JS, puede establecer los valores predeterminados y usar el operador coalescente nulo https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
//Empty strings as default will keep the functionality the same div.className = p.classes ?? ''; //use empty objects where needed Object.entries(p.events ?? {}).forEach(...)Puede considerar usar Object.keys de manera similar a como usó Object.entries y crear una función addProp para manejar cada tipo de propiedad y valor usando switch , de esa manera solo maneja las propiedades que existen en el objeto p y puede ignorar propiedades desconocidas también, por ejemplo
const generateElement = (p) => { if (!p.tag) return; let node = document.createElement(p.tag); if (!node) return; let props = Object.keys(p); props.forEach(prop => addProp(node, prop, p[prop])); } function addProp(el, prop, value) { switch (prop) { case 'appendIn': value.appendChild(el); break; case 'attribs': Object.entries(value).forEach(([p, v]) => el.setAttribute(p, v)); break; case 'classes': el.className = value; break; case 'content': el.innerHTML = value; break; case 'events': Object.entries(value).forEach(([p, v]) => el.addEventListener(p, v, false)); break; case 'id' : el.id = value; break; case 'style': el.style.cssText = value; break; case 'tag' : // Already done break; default : console.log(`Unexpected property: ${prop}`); } return el; } var newElem = generateElement({ tag: 'div', classes: 'mydiv', id: 'id42', content: 'Hello world!', style: 'background:#ccc;color:red', attribs: { 'tabindex': 0, 'title': 'Title #1' }, events: { 'click': () => console.log('click'), 'mouseout': () => console.log('mouseout') }, appendIn: document.body, foo: 'bar' });Podría hacer algo similar con Object.entries usando forEach o for..of :
let node = document.createElement(p.tag); for (let [prop, value] of Object.entries(p)) { addProp(node, prop, value); }lo que sea.