Refleja el método de matriz nativo.Pensemos en qué son los métodos de matriz … | Autor: Selahattindemir | Diciembre de 2021
AumentoConsideremos qué es un método de matriz.En pocas palabras, los métodos react array, estos son los métodos que se pueden utilizar como prototipos de array en la nueva versión de Javascript, a través de ellos podemos utilizar la función callback para navegar por los elementos del array uno por uno y realizar determinadas comprobaciones.
En primer lugar, recuerde que es probable que este artículo se aplique a otros lenguajes de programación y marcos que utilice, porque estos conceptos existen en muchos otros lenguajes y marcos.
Que sean esos datos de muestra.
const products = [
{ id: 1, name: "Pencil", price: 5 },
{ id: 2, name: "Notebook", price: 10 },
{ id: 3, name: "Eraser", price: 2 },
{ id: 4, name: "Sharpener", price: 7 },
];
Solía encontrar Un elemento de la matriz. Una vez que se encuentra el elemento, la búsqueda se detendrá y devolverá el elemento encontrado. Si hay otro elemento que cumple las mismas condiciones, se devuelve el primer elemento encontrado.
products.find((product) => product.price > 5); // {id: 2, name: "Notebook", price: 10}
Devuelve si al menos un elemento de la matriz verdadero / falso satisface la condición dada.
products.some((product) => product.price < 2); // false, There isn't a single one in the array that costs less than 2
products.some((product) => product.price > 9); // true, There is at least one price greater than 9 in the array
Si todos los elementos de la matriz cumplen las condiciones de entrada, devuelve verdadero / falso.
products.every((product) => product.price > 1); // true, All product prices are greater than 1
products.every((product) => product.price < 10); // false, All item prices NOT less than 10
Compruebe si la expresión dada existe en la cadena y devuelva un valor booleano (verdadero o falso). Incluya la distinción entre mayúsculas y minúsculas.
products.some((product) => product.name.includes("Pencil")); // true, Some product names contain Pencil
products.every((product) => product.name.includes("Pencil")); // false, All product names do not contain Pencil
Aplica la función de devolución de llamada de entrada al elemento de matriz dado y usa el resultado obtenido para crear una nueva matriz. En resumen, nos ayuda a crear un nuevo conjunto de matrices basadas en matrices existentes.
Recuerde que la matriz resultante siempre tendrá la misma longitud que la matriz original.
products.map((product) => `${product.name} price ${product.price} was dollars.`);
// ["The price of the pencil is $5.", "The price of the notebook is $10.", "The price of the eraser is $2.", "The price of the sharpener is $7."]
En React Native:
function ShowProducts({ productList }) {
return productList.map((product) => {product.name} );
}
Como suena, funciona como .map()El método es efectivo. Aplicar la función de devolución de llamada de entrada al elemento de matriz dado. Elimine los resultados que devuelvan falso y cree una nueva matriz que devuelva verdadero.
products.filter((product) => product.name.includes("Pencil")); // [{id: 1, name: "Pencil", price: 5}, {id: 4, name: "Sharpener", price: 7}]
💡Porque .filter() y.map() Ambos devuelven una nueva matriz y se pueden agregar para usarlos en una fila.
products
.filter((product) => product.name.includes("Pencil")) // Find products with Pencil first
.map((product) => `${product.name} price ${product.price} was dollars.`); // Then apply the given callback function to the found elements// ["The price of the pencil is $5.", "The price of the sharpener is $7."]
Aplica la función de devolución de llamada dada como reductor en los elementos de la matriz dada. El resultado devuelto por esta función se recuerda en cada ciclo y el siguiente resultado devuelto se agrega al anterior. La función reductora tiene cuatro parámetros: el acumulador (la suma de los resultados de cada ciclo), el valor actual (el valor del siguiente valor en la matriz), el índice actual (la posición del siguiente valor en la matriz) y la matriz de origen (la matriz se aplica para reducir).
.reduce() También puede tomar el valor inicial como segundo parámetro. Para operaciones matemáticas, se ingresará un número ya que también se puede ingresar el inicio, cadena, matriz, etc.
El precio total de los productos de la lista:
products.reduce((total, product) => total + product.price, 0); // 24
Escriba el nombre del producto en una línea:
products.reduce((names, product) => names + " " + product.name, "Product Names:"); // "Product Names: Pencil Notebook Eraser Sharpener"
Cree una cadena a partir del nombre y precio del producto y créelo como una nueva matriz:
products.reduce(
(newProductList, product) => [
...newProductList,
`${product.name} ${product.fiyat} was dollars.`,
],
[] // Initial value is empty array
);
// ["The price of the pencil is $5.", "The price of the notebook is $10.", "The price of the eraser is $2.", "The price of the sharpener is $7."]
Si encuentra este artículo interesante, utilice el icono de aplaudir para aplaudir.
¡Sigue codificando!
