One place for hosting & domains

      matriz

      Método de matriz filter() en JavaScript


      Introducción

      El método de matriz filter() crea una nueva matriz con elementos que caen bajo un criterio dado a partir de una matriz existente:

      var numbers = [1, 3, 6, 8, 11];
      
      var lucky = numbers.filter(function(number) {
        return number > 7;
      });
      
      // [ 8, 11 ]
      

      El ejemplo anterior toma la matriz numbers y devuelve una nueva matriz filtrada con solo los valores que son mayores a siete.

      Sintaxis del filtro

      var newArray = array.filter(function(item) {
        return condition;
      });
      

      El argumento item es una referencia al elemento actual en la matriz, ya que filter() lo comprueba contra condition. Esto es útil para acceder a propiedades, en el caso de objetos.

      Si el item actual pasa la condición, se envía a una nueva matriz.

      Filtrar una matriz de objetos

      .filter() se suele usar frecuentemente con una matriz de objetos mediante sus propiedades:

      var heroes = [
          {name: “Batman”, franchise: “DC”},
          {name: “Ironman”, franchise: “Marvel”},
          {name: “Thor”, franchise: “Marvel”},
          {name: “Superman”, franchise: “DC”}
      ];
      
      var marvelHeroes =  heroes.filter(function(hero) {
          return hero.franchise == “Marvel”;
      });
      
      // [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]
      

      Otros recursos

      Para obtener más información sobre filter(), consulte las referencias de MDN.

      El filtro es uno de los varios métodos de iteración en matrices en JavaScript; lea Cómo usar los métodos de iteración con matrices en JavaScript para obtener más información sobre los otros métodos como map() y reduce().



      Source link

      Método de matriz filter() no JavaScript


      Introdução

      O método de matriz filter() cria uma nova matriz com elementos que se enquadram em um determinado critério a partir de uma matriz existente:

      var numbers = [1, 3, 6, 8, 11];
      
      var lucky = numbers.filter(function(number) {
        return number > 7;
      });
      
      // [ 8, 11 ]
      

      O exemplo acima recebe a matriz numbers e retorna uma nova matriz filtrada com apenas os valores que são maiores que sete.

      Sintaxe do filtro

      var newArray = array.filter(function(item) {
        return condition;
      });
      

      O argumento item é uma referência ao elemento atual na matriz enquanto o filter() compara-o com a condition. Isso é útil para acessar as propriedades, no caso de objetos.

      Se o item atual passa pela condição, é enviado para a nova matriz.

      Filtrando uma matriz de objetos

      Um caso de uso comum do .filter() é com uma matriz de objetos através de suas propriedades:

      var heroes = [
          {name: “Batman”, franchise: “DC”},
          {name: “Ironman”, franchise: “Marvel”},
          {name: “Thor”, franchise: “Marvel”},
          {name: “Superman”, franchise: “DC”}
      ];
      
      var marvelHeroes =  heroes.filter(function(hero) {
          return hero.franchise == “Marvel”;
      });
      
      // [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]
      

      Recursos adicionais

      Para mais detalhes sobre o filter(), consule a referência na MDN.

      O filter é apenas um dos vários métodos de iteração para matrizes no JavaScript. Leia Como usar métodos de iteração em matrizes no JavaScript para aprender mais sobre outros métodos como o map() e reduce().



      Source link

      Cómo usar .map() para iterar elementos de matriz en JavaScript


      Introducción

      Desde el método clásico forloop al método forEach(), se utilizan varias técnicas y métodos para iterar a través de conjuntos de datos en JavaScript. Uno de los métodos más populares es el método .map(). ,map() crea una matriz a partir de la invocación de una función específica sobre cada elemento de la matriz principal. .map() es un método sin mutación que crea una nueva matriz en vez de los métodos con mutación, que solo realizan cambios a la matriz que invoca.

      Este método puede tener muchos usos cuando se trabaja con matrices. En este tutorial, verá cuatro usos notales de .map() en JavaScript: invocar una función de elementos de matriz, convertir cadenas a matrices, renderizar listas en bibliotecas y cambiar el formato de los objetos de una matriz.

      Requisitos previos

      Este tutorial no requiere codificación, pero si está interesado en seguir los ejemplos, puede usar el Node.js REPL o las herramientas del desarrollador del navegador.

      Paso 1: Invocar una función en cada elemento en una matriz

      .map() acepta una función de invocación como uno de sus argumentos, y un parámetro importante de esa función es el valor actual del elemento que procesa la función. Este es un parámetro requerido. Con este parámetro, puede modificar cada elemento en una matriz y crear una nueva función.

      Aquí tiene un ejemplo:

      const sweetArray = [2, 3, 4, 5, 35]
      const sweeterArray = sweetArray.map(sweetItem => {
          return sweetItem * 2
      })
      
      console.log(sweeterArray)
      

      Este resultado se registra en la consola:

      Output

      [ 4, 6, 8, 10, 70 ]

      Esto se puede simplificar algo más para que esté más limpio con:

      // create a function to use
      const makeSweeter = sweetItem => sweetItem * 2;
      
      // we have an array
      const sweetArray = [2, 3, 4, 5, 35];
      
      // call the function we made. more readable
      const sweeterArray = sweetArray.map(makeSweeter);
      
      console.log(sweeterArray);
      

      Este resultado se registra en la consola:

      Output

      [ 4, 6, 8, 10, 70 ]

      Tener un código como sweetArray.map(makeSweeter) hace que su código sea un poco más legible..

      Paso 2: Convertir una cadena en una matriz

      .map() se conoce como que pertenece al prototipo de matriz. En este paso, lo usará para convertir una cadena a una matriz. No está desarrollando el método para trabajar para cadenas aquí. En vez de eso usará el método especial .call().

      Todo en JavaScript es un objeto, y los métodos son funciones asociadas con estos objetos. .call() permite usar el contexto de un objeto sobre otro. Por tanto, estaría copiando el contexto de .map() en una matriz sobre una cadena.

      Es posible pasar argumentos a .call() del contexto que se va a utilizar y los parámetros de los argumentos de la función original.

      Aquí tiene un ejemplo:

      const name = "Sammy"
      const map = Array.prototype.map
      
      const newName = map.call(name, eachLetter => {
          return `${eachLetter}a`
      })
      
      console.log(newName)
      

      Este resultado se registra en la consola:

      Output

      • [ "Sa", "aa", "ma", "ma", "ya" ]

      Aquí utilizó el contexto de .map() de una cadena y pasó un argumento de la función que .map() espera.

      Esto funciona como el método .split() de una cadena, solo que cada carácter individual de la cadena puede modificarse antes de ser devuelto en una matriz.

      Paso 3: Renderizar listas en bibliotecas JavaScript

      Las bibliotecas JavaScript como React utilizan .map() para renderizar elementos en una lista. Esto requiere sintaxis JSX ya que el método .map() está envuelto en la sintaxis JSX.

      Aquí tiene un ejemplo de un componente de React:

      import React from "react";
      import ReactDOM from "react-dom";
      
      const names = ["whale", "squid", "turtle", "coral", "starfish"];
      
      const NamesList = () => (
        <div>
          <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
        </div>
      );
      
      const rootElement = document.getElementById("root");
      ReactDOM.render(<NamesList />, rootElement);
      

      Este es un componente sin estado en React, que renderiza un div con una lista. Los elementos individuales de la lista se renderizan usando .map() para iterar sobre la matriz de nombres creada inicialmente. Este componente se renderiza usando ReactDOM en el elemento DOM con Id de root.

      Paso 4: Reformatear los objetos de la matriz

      .map() puede usarse para iterar en objetos en una matriz y, de forma similar a las matrices tradicionales, modificar el contenido de cada objeto individual y devolver una nueva matriz. Esta modificación se realiza según lo que se devuelve en la función de callback.

      Aquí tiene un ejemplo:

      const myUsers = [
          { name: 'shark', likes: 'ocean' },
          { name: 'turtle', likes: 'pond' },
          { name: 'otter', likes: 'fish biscuits' }
      ]
      
      const usersByLikes = myUsers.map(item => {
          const container = {};
      
          container[item.name] = item.likes;
          container.age = item.name.length * 10;
      
          return container;
      })
      
      console.log(usersByLikes);
      

      Este resultado se registra en la consola:

      Output

      [ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

      Aquí ha modificado cada objeto en la matriz usando la notación paréntesis y punto. Este caso de uso puede emplearse para procesar o condensar los datos recibidos antes de guardarlos o analizarlos en una aplicación frontend.

      Conclusión

      En este tutorial hemos visto cuatro usos del método .map() en JavaScript. En combinación con otros métodos, la funcionalidad de .map() puede ampliarse. Para obtener más información, consulte el artículo Cómo usar métodos de matriz en métodos de iteración de JavaScript.



      Source link