¿Có moipular arreglos en JavaScript không?

Artículo original escrito bởi: Bolaji Ayodeji
Bản gốc Artículo: Cách thao tác mảng trong JavaScript
Traducido và Adaptado bởi: Cristian Sulbaran

Một phần quan trọng của ngôn ngữ lập trình. La mayoría de la veces necesitamos hacer varias operaciones en arreglos, de ahí este artículo.

Trong bài viết này, hầu hết các phương thức hiếm khác nhau để thao tác với các tập lệnh JavaScript

¿Qué con las ma trận trong JavaScript?

Trước khi tiếp tục, debemos comprender qué realisticanente los arreglos.

Trong JavaScript, một mảng là một biến sẽ được sử dụng để tạo ra các loại dữ liệu khác nhau. Básicamente almacena các yếu tố khác nhau en una caja y luego se puede evaluar con la variable.

Declarando un arreglo:

let miCaja = [];   // Declaración inicial de arreglo en JS

Các gói dữ liệu có thể chứa nhiều loại dữ liệu

let miCaja = ['hola', 1, 2, 3, true, 'hey'];

Los arreglos se pueden manipular usando varias acciones conocidas como phương pháp. Các phương thức của phương pháp này không cho phép tổng hợp, loại bỏ, sửa đổi và có nhiều hơn nữa trong các danh mục.

Te estaremos mostrando algunos en este artículo, continuemos 🙂

Lưu ý: người sử dụng chức năng của flecha en esta publicación. Si no sabes lo que esto significa, puedes leerlo en español dando clic aquí o acá. La función de flecha es una đặc tính ES6.

toString()

Phương thức JavaScript toString() convierte un arreglo en una cadena separada por una hôn mê.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.toString()); // verde,amarillo,azul

tham gia()

Phương thức JavaScript join() kết hợp tất cả các yếu tố của mảng trong một cadena.

Phương pháp tương tự toString()pero aquí se puede especar el splitor en lugar de la hôn mê predeterminada.

let colores = ['verde', 'amarillo', 'azul'];

console.log(colores.join('-')); // verde-amarillo-azul

concat

Phương pháp này kết hợp các mảng hoặc các yếu tố tổng hợp khác thành một mảng và luôn được phát triển một cách mới nhất.

let primerosNumeros = [1, 2, 3];
let segundosNumeros = [4, 5, 6];
let combinado = primerosNumeros.concat(segundosNumeros);
console.log(combinado); // [1, 2, 3, 4, 5, 6]

đẩy()

Đây là phương pháp tổng hợp các yếu tố cuối cùng của một hợp đồng cambia el arreglo bản gốc.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.push('safari', 'opera mini');
console.log(buscadores); 
// ["chrome", "firefox", "edge", "safari", "opera mini"]

nhạc pop()

Phương pháp này loại bỏ yếu tố cuối cùng của một dàn xếp y lo biến mất.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.pop(); // "edge"
console.log(buscadores); // ["chrome", "firefox"]

sự thay đổi()

Phương pháp này loại bỏ yếu tố cơ bản của một dàn ý biến mất.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.shift(); // "chrome"
console.log(buscadores); // ["firefox", "edge"]

bỏ dịch ()

Este method agrega un elemento al comienzo de un arreglo y cambia el arreglo bản gốc.

let buscadores = ['chrome', 'firefox', 'edge'];
buscadores.unshift('safari');
console.log(buscadores); //  ["safari", "chrome", "firefox", "edge"]

También podemos agregar varios elementos a la vez

nối()

Phương pháp này có thể tạo ra một bảng tổng hợp, loại bỏ và chèn các phần tử.

Sintaxis là:

arreglo.splice(índice[, cantidadDeElementosPorRemover, elemento1, ..., elementoN])

• índice aquí está el punto de partida để loại bỏ các yếu tố trong ma trận
• cantidadDeElementosPorRemover đó là số thứ tự các phần tử mà bạn đã loại bỏ chỉ số này
• elemento1, …, elementoN es el (los) elemento(s) a agregar

nguyên tố từ bỏ

giải phóng máy bay nối() phát triển phần còn lại của phần tử bị loại bỏ và loại bỏ phần còn lại của bản gốc.

let colores = ["verde", "amarillo", "azul", "púrpura"];
const menosColores = colores.splice(0, 3);

console.log(colores, menosColores); 
// ["púrpura"]
// ["verde", "amarillo", "azul"]

NB: cantidadDeElementosPorRemover không bao gồm último índice en el rango.

Nếu không có tuyên bố thứ hai, tất cả các yếu tố đều trở thành một phần của chỉ số dado sẽ loại bỏ hợp đồng.

let colores = ['verde', 'amarillo', 'azul', 'púrpura'];
const menosColores = colores.splice(3);

console.log(colores, menosColores); 
// ["verde", "amarillo", "azul"]
// ['púrpura']

Trong một ví dụ khác, loại bỏ 3 yếu tố trong mảng và làm lại các yếu tố còn lại:

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'mañana'];
// elimina los 4 primeros elementos y los reemplaza con otros

agenda.splice(0, 4, 'nosotros', 'vamos', 'a', 'nadar');

console.log(agenda); 
// ['nosotros', 'vamos', 'a', 'nadar', 'mañana']

Yếu tố Añadiendo

Para agregar elementos, debemos establecer deleteCount en cero

let agenda = ['Yo', 'tengo', 'una', 'reunión', 'con'];
// añade 3 elementos al arreglo

agenda.splice(5, 0, 'algunos', 'clientes', 'mañana');

console.log(agenda); 
// ['Yo', 'tengo', 'una', 'reunión', 'con', 'algunos', 'clientes', 'mañana']

lát cắt()

Este phương pháp es tương tự như một splice() pero muy khác nhau. Devuelve subarreglos en lugar de subcadenas

phương pháp Este sao chép una parte dada de un arreglo, y biến mất esa parte copy como un nuevo arreglo. Không có cambia el arreglo gốc.

Sintaxis là:

arreglo.slice(inicio, fin)

Một ví dụ quảng cáo:

let numeros = [1, 2, 3, 4]

console.log(numeros.slice(0, 3)) // regresa [1, 2, 3]

console.log(numeros) // regresa el array original

La mejor manera de usar slice() nó được gán cho một biến mới.

let mensaje="Felicitaciones en tu día"
const msjCorto = mensaje.slice(0, 14) + '!';

console.log(msjCorto) // returns "Felicitaciones!"

tách ra()

Este method se utiliza para cadenas. Chia una cadena en subcadenas y las devuelve como un arreglo.

Aquí la sintaxi:

cadena.split(separador, límite)

• El separador định nghĩa cómo dividir una cadena ya sea por una hôn mê
• El límite xác định số thứ tự phân tách để thực hiện

let primerNombre="Bolaji";

// Regresa la cadena dentro de un arreglo
primerNombre.split() // ["Bolaji"]

ví dụ khác:

let primerNombre="Hola, mi nombre es Bolaji, soy un dev.";

primerNombre.split(',', 2); // ["Hola", " mi nombre es Bolaji"]

Lưu ý: Si declaramos con una cadena vacía, como primerNombre.split('')entonces nguyên tố cada de la cadena será dividido como subcadenas:

let primerNombre="Bolaji";

primerNombre.split('') // ["B", "o", "l", "a", "j", "i"]

Chỉ số()

Este method busca un elemento en un arreglo y devuelve el índice donde se encontró; de lo contrario, devuelve -1

let frutas = ['manzana', 'naranja', false, 3]

frutas.indexOf('naranja'); // devuelve 1
frutas.indexOf(3); // devuelve 3
frutas.indexOf(null); // devuelve -1 (no fue encontrado)

lastIndexOf()

Este method funciona de la misma manera que Chỉ số() ngoại trừ chức năng của derecha và izquierda. Devuelve el último índice donde se encontró el elemento.

let frutas = ['manzana', 'naranja', false, 3, 'manzana']

frutas.lastIndexOf('manzana'); // devuelve 4

lọc()

Đây là phương pháp tạo ra một mảng mới cho các yếu tố của một ma trận ba chiều với một điều kiện xác định.

Sintaxis là:

let resultados = arreglo.filter(function(elemento, índice, arreglo) {
  // devuelve true si el elemento pasa el filtro
});

Ví dụ:

Comprueba a Los usuarios de Nigeria.

const codigoPais = ['+234', '+144', '+233', '+234'];

const nigeriano = codigoPais.filter( codigo => codigo === '+234');

console.log(nigeriano); // ["+234", "+234"]

bản đồ()

Đây là phương pháp tạo ra một mảng mới để thao tác với giá trị của một mảng.

Ví dụ:

Muestra los nombres de usuario en una página. (Visualización básica de una lista de amigos)

const usuarios = ['tina', 'danny', 'mark', 'bolaji'];
const lista = usuarios.map(elem => {
	return '<li>' + elem + '</li>';
});

const render="<ul>" + lista.join('') + '</ul>';

document.write(render);

ví dụ khác:

// agrega el signo de dólar a los números
const numeros = [10, 3, 4, 6];
const dolares = numeros.map( numero => '$' + numero);

console.log(dolares); // ['$10', '$3', '$4', '$6'];

giảm()

Este method es bueno para Calculator Totales..

giảm() se utiliza para Calculator un valor único base en un a a reglo.

let valor = arreglo.reduce(function(acumulador, valorActual, índice, arreglo) {
  // ...
}, valorInicial);

ví dụ:

Para recorrer un arreglo y sumar todos los numbereros de la matriz, podemos usar el bucle for of.

const numeros = [100, 300, 500, 70];
let suma = 0;

for (let n of numeros) {
	suma += n;
}

console.log(suma);

He aquí cómo hacer lo mismo con reduce()

const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) =>
	acumulador + valorActual
, 0);

console.log(suma); // 970

Si omitimos valorInicialel total comenzará pordefecto desde el primer elemento del arreglo.

const numeros = [100, 300, 500, 70];
const suma = numeros.reduce((acumulador, valorActual) => acumulador + valorActual);

console.log(suma); // todavía devuelve 970

El siguiente fragmento lửa lò sưởi muestra cómo funciona el methodo giảm() con thua cuatro tranh luận.

nguồn: Tài liệu MDN

Puedes encontrar more informationación sobre el phương pháp giảm() y varias formas de usarlo aquí(lửa lò sưởi)y aquí.

cho mỗi()

Este method is bueno para iterar a través de un arreglo. Ứng dụng một chức năng trên tất cả các thành phần của hai mảng.

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento, índice) => console.log(elemento, índice));
// devuelve el índice y todos los elementos del arreglo
// "verde" 0
// "amarillo" 1
// "azul" 2

la iteración se puede hacer sin pasar el argumento de índice

const colores = ['verde', 'amarillo', 'azul'];

colores.forEach((elemento) => console.log(elemento));
// devuelve cada elemento del arreglo
// "verde"
// "amarillo"
// "azul"

mọi()

Este phương pháp xác minh si việc cần làm các yếu tố trong một hợp đồng pasan la condición cụ thể và devuelve true si pasa, de lo contrario, false.

comprueba si todos los numbereros son positivos

const numeros = [1, -1, 2, 3];
let todosPositivos = numeros.every((valor) => {
	return valor >= 0;
})

console.log(todosPositivos); // devolvería false

một số()

Este phương pháp xác minh si al menos un nguyên tố (uno o más) en un a arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario, devuelve false.

comprueba si al menos un numberero es positivo

const numeros = [1, -1, 2, 3];
let alMenosUnoPositivo = numeros.every((valor) => {
	return valor >= 0;
})

console.log(alMenosUnoPositivo); // devolvería true

bao gồm()

Đây là phương pháp xác minh cho một mảng liên kết với một yếu tố xác định. Tương tự như vậy .some()pero en lugar de busa one condición específica parasar, verify si el arreglo contiene un elemento específico.

let usuarios = ['paddy', 'zaddy', 'faddy', 'baddy'];
usuarios.includes('baddy'); // devuelve true

Si el elemento no se encuentra, regresa false

Hay hơn phương pháp để dàn xếp, đó là con trai độc tấu của bạn. Ngoài ra, hay các tài khoản khác của chúng tôi sẽ phát hiện ra các hợp đồng, cố ý tư vấn tài liệu của MDN và thông tin cho người nhận thông tin chi tiết hơn

sơ yếu lý lịch

• toString() convierte un arreglo en una cadena separada por una hôn mê.
• tham gia() kết hợp tất cả các yếu tố của một dàn dựng và một cadena.
• concat() kết hợp các mảng juntos hoặc agrega more elementos a un aarreglo y luego devuelve un nuevo argeglo.
• đẩy() agrega elementos al final de un arreglo y cambia bản gốc.
• nhạc pop() loại bỏ yếu tố cuối cùng của một arreglo y lo lắng
• sự thay đổi() loại bỏ phần tử mồi của một mảng lo lắng
• bỏ dịch () agrega un elemento(s) al comienzo de un arreglo y cambia bản gốc.
• nối() cambia một mảng, tập hợp, loại bỏ và chèn các phần tử.
• lát cắt() copy una parte dada de un arreglo y devuelve esa parte copy como un nuevo arreglo. Không có cambia el arreglo gốc.
• tách ra() chia una cadena en subcadenas y las devuelve como un arreglo.
• Chỉ số() busca un elemento en un arreglo y devuelve el índice donde se encontró, de lo contrario, devuelve -1
• lastIndexOf() busca un elemento derecha a izquierda en an arreglo y devuelve el último índice donde se encontró el elemento.
• lọc() tạo một mảng mới cho các yếu tố của một mảng có điều kiện xác định.
• bản đồ() crea un nuevo arreglo manipulando los valores en un arreglo.
• giảm() tính toán giá trị của một nền tảng trong một dàn xếp.
• cho mỗi() itera a través de un arreglo, aplica una función en todos los elementos del arreglo
• mọi() comprueba si todos los elementos en a a arreglo pasan la condición especificada y devuelve true si pasa, de lo contrario false.
• một số() comprueba si un elemento (uno o más) en un arreglo pasa la condición especificada y devuelve true si pasa, de lo contrario false.
• bao gồm() comprueba si un a arreglo contiene un definado elemento.

Và cuối cùng là một lần nữa; Các arreglos son poderosos y el use the method for manipularlos crea los algoritmos que utilizan las alicaciones del mundo real.

Hagamos una chức năng đặc biệt, una que convierta el titleulo de una publicación en un url slug.

sên URL là hướng dẫn chính xác của một trang công khai cụ thể trên trang web của bạn.

Cuando escribimos un artículo en freecodecamp Tin tức o en Cualquier otraplataforma de scritura, the titleulo de su publicación se convierte automáticamente en un slug sin espacios en blanco, loscarteres en minúsculas and cada palabra del titleulo por un guion.

Aquí hay una función básica que hace eso usando algunos de los methododos que aprendimos hace un momento.

const url="https://bolajiayodeji.com/"

const urlSlug = (titulo) => {

	let urlPublicacion = titulo.toLowerCase().split(' ');
  
	return url + urlPublicacion.join('-')
}

let titulo = 'Introducción a Chrome Lighthouse'

console.log(urlSlug(titulo));
// https://bolajiayodeji.com/introducción-a-chrome-lighthouse

vi urlPublicacionconvertimos la cadena a minúsculas y luego usamos el method tách ra() para convertir la cadena en subcadenas y devolverla en un arreglo

["introducción", "a", "chrome", "lighthouse"]

Unimos en una cadena a urlPublicacion con guiones usando nuevamente .join('-') y estamos listos para devolver la url hoàn thành.

return url + urlPublicacion.join('-')

// urlPublicacion.join('-') -> introducción-a-chrome-lighthouse

Eso es todo, bastante đơn giản, ¿verdad? 🙂

Nếu tôi nhận được nó đến từ JavaScript và sabes tiếng Anh, người tư vấn về kho lưu trữ này đã được viết, Bolaji là người biên soạn một danh sách các đoạn quảng cáo JavaScript mà tôi đã viết:

• Arreglos
• Flujo de kiểm soát
• chức năng
• phản đối
• người điều hành

¡Không có đối tác nào! 🙂
PD: Este artículo fue publicado por originalmente en inglés en el blog de Bolaji