O parte importantă a oricărui limbaj de programare. De cele mai multe ori trebuie să facem mai multe operații pe tablouri, de unde și acest articol.

În acest articol, v-aș arăta diverse metode de manipulare a matricelor în JavaScript [^^]

Ce sunt matricile în JavaScript?

Înainte de a continua, trebuie să înțelegeți ce înseamnă cu adevărat matricile.

În JavaScript, o matrice este o variabilă care este utilizată pentru a stoca diferite tipuri de date. Practic stochează diferite elemente într-o singură cutie și poate fi evaluat ulterior cu variabila.

Declararea unei matrice:

let myBox = [];   // Initial Array declaration in JS

Tablourile pot conține mai multe tipuri de date

let myBox = ['hello', 1, 2, 3, true, 'hi'];

Tablourile pot fi manipulate folosind mai multe acțiuni cunoscute sub numele de metode. Unele dintre aceste metode ne permit să adăugăm, să eliminăm, să modificăm și să facem multe altele la matrice.

V-aș arăta câteva în acest articol, hai să rulăm 🙂

NB: Am folosit Funcții săgeată în această postare, dacă nu știți ce înseamnă acest lucru, ar trebui să citiți aici. Funcția săgeată este un Caracteristica ES6.

toString ()

Metoda JavaScript toString() convertește un tablou într-un șir separat printr-o virgulă.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.toString()); // green,yellow,blue

a te alatura()

JavaScript join() metoda combină toate elementele matrice într-un șir.

Este similar cu toString() , dar aici puteți specifica separatorul în loc de virgula implicită.

let colors = ['green', 'yellow', 'blue'];

console.log(colors.join('-')); // green-yellow-blue

concat

Această metodă combină două matrice împreună sau adaugă mai multe elemente la o matrice și apoi returnează o matrice nouă.

let firstNumbers = [1, 2, 3];
let secondNumbers = [4, 5, 6];
let merged = firstNumbers.concat(secondNumbers);
console.log(merged); // [1, 2, 3, 4, 5, 6]

Apăsați()

Această metodă adaugă elemente la sfârșitul unui tablou și schimbări matricea originală.

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

pop ()

Această metodă elimină ultimul element al unui tablou și se intoarce aceasta.

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

schimb()

Această metodă elimină primul element al unui tablou și se intoarce aceasta.

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

unshift ()

Această metodă adaugă un element (e) la începutul unui tablou și schimbări matricea originală.

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

De asemenea, puteți adăuga mai multe articole simultan

lipitură()

Acest metodă schimbări o matrice, prin adăugarea, eliminarea și inserarea elementelor.

Sintaxa este:

array.splice(index[, deleteCount, element1, ..., elementN])
  • Index aici este punctul de plecare pentru eliminarea elementelor din matrice
  • deleteCount este numărul de elemente care trebuie șterse din acel index
  • element1, …, elementN este elementul (elementele) care trebuie adăugat (e)

Eliminarea articolelor

după alergare lipitură() , returnează tabloul cu elementul (elementele) eliminat (e) și îl elimină din tabloul original.

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(0, 3);
console.log(colors); // ["purple"]
// deletes ["green", "yellow", "blue"]

NB: DeleteCount nu include ultimul index din interval.

Dacă al doilea parametru nu este declarat, fiecare element care începe de la indexul dat va fi eliminat din matrice:

let colors = ['green', 'yellow', 'blue', 'purple'];
colors.splice(3);
console.log(colors); // ["green", "yellow", "blue"]
// deletes ['purple']

În exemplul următor vom elimina 3 elemente din matrice și le vom înlocui cu mai multe elemente:

let schedule = ['I', 'have', 'a', 'meeting', 'tommorrow'];
// removes 4 first elements and replace them with another
schedule.splice(0, 4, 'we', 'are', 'going', 'to', 'swim');
console.log(schedule); 
// ["we", "are", "going", "to", "swim", "tommorrow"]

Adăugarea articolelor

Pentru a adăuga articole, trebuie să setăm deleteCount la zero

let schedule = ['I', 'have', 'a', 'meeting', 'with'];
// adds 3 new elements to the array
schedule.splice(5, 0, 'some', 'clients', 'tommorrow');
console.log(schedule); 
// ["I", "have", "a", "meeting", "with", "some", "clients", "tommorrow"]

felie()

Această metodă este similară cu splice() dar foarte diferit. Returnează subarrays în loc de substrings.

Aceasta metoda copii o parte dată dintr-o matrice și returnează partea copiată ca o matrice nouă. Nu modifică matricea originală.

Sintaxa este:

array.slice(start, end)

Iată un exemplu de bază:

let numbers = [1, 2, 3, 4]
numbers.slice(0, 3)
// returns [1, 2, 3]
console.log(numbers) // returns the original array

Cel mai bun mod de utilizare slice() este să o atribuiți unei noi variabile.

let message="congratulations"
const abbrv = message.slice(0, 7) + 's!'; 
console.log(abbrv) // returns "congrats!"

Despică()

Această metodă este utilizată pentru siruri de caractere. Împarte un șir în șiruri de caractere și le returnează ca o matrice.

Iată sintaxa: string.split (separator, limit);

  • separator aici se definește cum se împarte un șir fie printr-o virgulă.
  • limit determină numărul de scindări care trebuie efectuate
let firstName="Bolaji";
// return the string as an array
firstName.split() // ["Bolaji"]

alt exemplu:

let firstName="hello, my name is bolaji, I am a dev.";
firstName.split(',', 2); // ["hello", " my name is bolaji"]

NB: Dacă declarăm o matrice goală, așa firstName.split(''); atunci fiecare element din șir va fi împărțit ca șiruri de caractere:

let firstName="Bolaji";
firstName.split('') // ["B", "o", "l", "a", "j", "i"]

Index de()

Această metodă caută un element dintr-o matrice și se întoarce indicele unde a fost găsit altfel se întoarce -1

let fruits = ['apple', 'orange', false, 3]
fruits.indexOf('orange'); // returns 1
fruits.indexOf(3); // returns 3
friuts.indexOf(null); // returns -1 (not found)

lastIndexOf ()

Această metodă funcționează în același mod Index de() face cu excepția faptului că funcționează de la dreapta la stânga. Returnează ultimul index în care a fost găsit elementul

let fruits = ['apple', 'orange', false, 3, 'apple']
fruits.lastIndexOf('apple'); // returns 4

filtru()

Această metodă creează o nouă matrice dacă elementele unei matrice trec o anumită condiție.

Sintaxa este:

let results = array.filter(function(item, index, array) {
  // returns true if the item passes the filter
});

Exemplu:

Verifică utilizatorii din Nigeria

const countryCode = ['+234', '+144', '+233', '+234'];
const nigerian = countryCode.filter( code => code === '+234');
console.log(nigerian); // ["+234", "+234"]

Hartă()

Această metodă creează o nouă matrice prin manipularea valorilor dintr-o matrice.

Exemplu:

Afișează numele de utilizator pe o pagină. (Afișarea listei de prieteni de bază)

const userNames = ['tina', 'danny', 'mark', 'bolaji'];
const display = userNames.map(item => {
return '<li>' + item + '</li>';
})
const render="<ul>" + display.join('') + '</ul>';
document.write(render);
Cum se manipuleaza matricele in JavaScript

alt exemplu:

// adds dollar sign to numbers
const numbers = [10, 3, 4, 6];
const dollars = numbers.map( number => '$' + number);
console.log(dollars);
// ['$10', '$3', '$4', '$6'];

reduce()

Această metodă este bună pentru calcularea totalelor.

reduce() este folosit pentru a calcula o singură valoare bazată pe o matrice.

let value = array.reduce(function(previousValue, item, index, array) {
  // ...
}, initial);

exemplu:

Pentru a parcurge o matrice și a însuma toate numerele din matrice, putem folosi bucla for of.

const numbers = [100, 300, 500, 70];
let sum = 0;
for (let n of numbers) {
sum += n;
}
console.log(sum);

Iată cum puteți face același lucru cu reduce()

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) =>
accummulator + value
, 0);
console.log(sum); // 970

Dacă omiteți valoarea inițială, fișierul total va începe în mod implicit de la primul element din matrice.

const numbers = [100, 300, 500, 70];
const sum = numbers.reduce((accummulator, value) => accummulator + value);
console.log(sum); // still returns 970

Fragmentul de mai jos arată cum reduce() metoda funcționează cu toate cele patru argumente.

sursă: MDN Docs

1611872347 619 Cum se manipuleaza matricele in JavaScript

Mai multe informații despre reduce() metoda și diverse moduri de utilizare pot fi găsite aici și aici.

pentru fiecare()

Această metodă este bună pentru iterarea printr-o matrice.

Aplică o funcție pentru toate elementele dintr-o matrice

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item, index) => console.log(index, item));
// returns the index and the every item in the array
// 0 "green"
// 1 "yellow"
// 2 "blue"

iterația se poate face fără a trece argumentul index

const colors = ['green', 'yellow', 'blue'];
colors.forEach((item) => console.log(item));
// returns every item in the array
// "green"
// "yellow"
// "blue"

fiecare()

Această metodă verifică dacă toate articolele dintr-o matrice trec condiția specificată și returneazătrue dacă este trecut, altfel false.

verificați dacă toate numerele sunt pozitive

const numbers = [1, -1, 2, 3];
let allPositive = numbers.every((value) => {
return value >= 0;
})
console.log(allPositive); // would return false

niste()

Această metodă verifică dacă un element (unul sau mai multe) dintr-un tablou trece condiția specificată și returnează true dacă este trecut, altfel fals.

cverifică dacă cel puțin un număr este pozitiv

const numbers = [1, -1, 2, 3];
let atLeastOnePositive = numbers.some((value) => {
return value >= 0;
})
console.log(atLeastOnePositive); // would return true

include ()

Această metodă verifică dacă un tablou conține un anumit element. Este similar cu .some(), dar în loc să caute o anumită condiție de trecut, verifică dacă matricea conține un anumit element.

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

Dacă elementul nu este găsit, acesta revine false


Există mai multe metode de matrice, acestea sunt doar câteva dintre ele. De asemenea, există o mulțime de alte acțiuni care pot fi efectuate pe tablouri, încercați să verificați documentele MDN aicipentru informații mai profunde.

rezumat

  • toString () convertește un tablou într-un șir separat printr-o virgulă.
  • a te alatura() combină toate elementele matricei într-un șir.
  • concat combină două matrice împreună sau adaugă mai multe elemente la o matrice și apoi returnează o matrice nouă.
  • Apăsați() adaugă element (e) la sfârșitul unui tablou și schimbări matricea originală.
  • pop () elimină ultimul element al unui tablou și se intoarce aceasta
  • schimb() elimină primul element al unui tablou și se intoarce aceasta
  • unshift () adaugă un element (e) la începutul unui tablou și schimbări matricea originală.
  • lipitură() changes o matrice, prin adăugarea, eliminarea și inserarea elementelor.
  • felie() copii o parte dată dintr-o matrice și returnează partea copiată ca o matrice nouă. Nu modifică matricea originală.
  • Despică() împarte un șir în șiruri de caractere și le returnează ca matrice.
  • Index de() caută un articol într-o matrice și se întoarce indicele unde a fost găsit altfel se întoarce -1
  • lastIndexOf () caută un articol de la dreapta la stânga și returnează ultimul index în care a fost găsit articolul.
  • filtru() creează o nouă matrice dacă elementele unei matrice trec o anumită condiție.
  • Hartă() creează o nouă matrice prin manipularea valorilor dintr-o matrice.
  • reduce() calculează o singură valoare pe baza unui tablou.
  • pentru fiecare() itera printr-o matrice, aplică o funcție pe toate elementele dintr-o matrice
  • fiecare() verifică dacă toate articolele dintr-o matrice trec condiția specificată și returnează true dacă este trecut, altfel fals.
  • niste() verifică dacă un articol (unul sau mai multe) dintr-un tablou trece condiția specificată și returnează true dacă este trecut, altfel fals.
  • include () verifică dacă un tablou conține un anumit element.

Să-l înfășurăm aici; Tablourile sunt puternice și folosirea metodelor pentru a le manipula creează algoritmii aplicațiilor din lumea reală.

Să facem o mică funcție, una care transformă un titlu de postare într-un urlSlug.

URL slug este adresa exactă a unei anumite pagini sau postări pe site-ul dvs.

Când scrieți un articol pe Știri Freecodecamp sau orice altă platformă de scriere, titlul postării dvs. este convertit automat într-un slug cu spații albe eliminate, caractere transformate în minuscule și fiecare cuvânt din titlu separat printr-o cratimă.

Iată o funcție de bază care face asta folosind unele dintre metodele pe care le-am învățat chiar acum.

const url="https://bolajiayodeji.com/"
const urlSlug = (postTitle) => {
let postUrl = postTitle.toLowerCase().split(' ');
let postSlug = `${url}` + postUrl.join('-');
return postSlug;
}
let postTitle="Introduction to Chrome Lighthouse"
console.log(urlSlug(postTitle));
// https://bolajiayodeji.com/introduction-to-chrome-lighthouse

în postUrl, convertim șirul cu litere mici, apoi folosim Despică()metoda de a converti șirul în șiruri de caractere și îl returnează într-o matrice

["introduction", "to", "chrome", "lighthouse"]

în post slug alăturăm matricea returnată cu o cratimă și apoi o concatenăm în șirul de categorii și principal url.

let postSlug = `${url}` + postUrl.join('-');
postUrl.join('-') // introduction-to-chrome-lighthouse

Gata, destul de simplu, nu? 🙂


Dacă tocmai începeți cu JavaScript, ar trebui să verificați acest depozit aici, Compilez o listă de fragmente de bază JavaScript de la

  • Matrice
  • Controlul fluxului
  • Funcții
  • Obiecte
  • Operatori

Nu uitați să jucați în Star și să distribuiți 🙂

PS: Acest articol a fost publicat pentru prima dată pe blogul meu aici