• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

277
Views
Coma inesperada usando map()

Tengo una matriz con una lista de elementos y estoy tratando de agregar esta lista a un elemento HTML usando cadenas de plantilla:

 var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${description.map( function(work) { return `<li>${work}</li>` } )}</ul> </div> ` )
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Como resultado, aparece una coma inesperada entre cada elemento de la lista. (Puede ver esto cuando ejecuta el fragmento de código anterior).

¿Cómo puedo evitar esto?

about 3 years ago · Santiago Trujillo
3 answers
Answer question

0

Explicación

los literales de plantilla usan el método toString() que, de manera predeterminada, une la matriz devuelta por map con , .
Para evitar este "problema" puedes usar join('')

Código

 var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${ description.map(function(work) { return `<li>${work}</li>` }).join('') } </ul> </div> ` )
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

about 3 years ago · Santiago Trujillo Report

0

.map() devuelve una matriz . Probablemente desee devolver una cadena que contenga los elementos de la matriz concatenados. Puedes hacer eso con .join('') :

 var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${description.map( function(work) { return `<li>${work}</li>` } ).join('') /* added .join('') here */}</ul> </div> ` )
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

about 3 years ago · Santiago Trujillo Report

0

Como han señalado otros (que voy a repetir para completar), Array.prototype.map devuelve una nueva matriz que contiene los elementos que se modifican en la función que se le pasa.

Cuando concatena una matriz en una cadena (que es lo que está sucediendo aquí), también convertirá la matriz en una cadena. Y cuando una matriz se convierte en una cadena, se une automáticamente mediante comas.

 const arr = ['<a>', '<b>']; console.log(arr + ""); // <a>,<b>

Además de usar .join() para pasar explícitamente una cadena vacía como separador, también puede reemplazar .map() con Array.prototype.reduce para reducir la matriz a un solo valor.

 description.reduce((acc, work) => acc + `<li>${work}</li>`, '')

Así que el código completo se vería así:

 var description = [ 'HTML & CSS', 'Javascript object-oriented programming', 'Progressive Web apps (PWAs)', 'Website Performance Optimization', 'Webpack and Gulp workflows', 'Fullstack React.js', 'Web Components', 'Responsive web design', 'Sketch design', 'GraphQL and Relay' ] $('body').append( ` <div class="description"> <ul> ${ description.reduce((acc, work) => acc + `<li>${work}</li>`, '') } </ul> </div> ` )
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

about 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error