Metode de matrice JavaScript. Utilizarea funcției de ștergere pentru a elimina un element de matrice

23.06.2020 Photoshop

Metoda splice() modifică conținutul unei matrice prin eliminarea sau înlocuirea elementelor existente și/sau adăugând elemente noi la locul lor.

Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă doriți să contribui la proiectul de exemple interactive, clonează https://github.com/mdn/interactive-examples și trimite-ne o cerere de extragere.

Sintaxă let arrDeletedItems = array .splice(start [, deleteCount [, item1 [, item2 [, ...]]]]) Parametrii start Indexul la care se începe modificarea matricei.

Dacă este mai mare decât lungimea matricei, start va fi setat la lungimea matricei.

Dacă este negativ, va începe atât de multe elemente de la sfârșitul matricei. (În acest caz, originea -1, adică - n este indicele ultimului element al n-lea și, prin urmare, este echivalentă cu indicele matricei .length - n .) Dacă tabloul .length + start este mai mic decât 0, aceasta va începe de la indicele 0 .

deleteCount Opțional Un număr întreg care indică numărul de elemente din matrice de eliminat de la început.

Dacă deleteCount este omis sau dacă valoarea sa este egală sau mai mare decât array .length - start (adică dacă este egal sau mai mare decât numărul de elemente rămase în matrice, începând de la început), atunci toate elementele de la începutul până la sfârșitul matricei va fi șters.

Notă: În IE8, nu va șterge totul atunci când deleteCount este omis.

Dacă deleteCount este 0 sau negativ, niciun element nu este eliminat. În acest caz, ar trebui să specificați cel puțin un element nou (vezi mai jos).

item1 , item2 , ... Opțional Elementele de adăugat la matrice, începând de la început. Dacă nu specificați niciun element, splice() va elimina doar elemente din matrice.

Valoarea returnată

Exemple Eliminați 0 (zero) elemente din indexul 2 și introduceți „tobă” let myFish = [„înger”, „clov”, „mandarin”, „sturion”] let removed = myFish.splice(2, 0, „tobă” ) // myFish este ["înger", "clovn", "tobă", "mandarin", "sturion"] // eliminat este , niciun element eliminat Eliminați 0 (zero) elemente din indexul 2 și introduceți "tobă" și "chitară" let myFish = ["înger", "clovn", "mandarin", "sturion"] let removed = myFish.splice(2, 0, "tobă", "chitară") // myFish este ["înger" , „clovn”, „tobă”, „chitară”, „mandarin”, „sturion”] // eliminat este , niciun element eliminat Eliminați 1 element din indexul 3 let myFish = [„înger”, „clov”, „tobă” , "mandarin", "sturion"] let removed = myFish.splice(3, 1) // eliminat este ["mandarin"] // myFish este ["înger", "clovn", "tobă", "sturion"] Eliminați 1 element din indexul 2 și introduceți „trâmbiță” let myFish = [„înger”, „clovn”, „tobă”, „sturion”] let removed = myFish.splice(2, 1, „trompet”) // myFish este ["înger", "clovn", "trâmbiță", "sturion"] // eliminat este ["tobă"] Eliminați 2 elemente din indexul 0 și introduceți "papagal", "anemonă" și "albastru" lasă myFish = ["înger", "clovn", "trâmbiță", "sturion"] let removed = myFish.splice(0, 2, "papagal", "anemonă", "albastru") // myFish este ["papagal", " anemonă", "albastru", "trâmbiță", "sturion"] // eliminat este ["înger", "clovn"] Eliminați 2 elemente din indexul 2 let myFish = ["papagal", "anemonă", "albastru", "trompet", "sturgeon"] let removed = myFish.splice(2, 2) // myFish este ["papagal", "anemonă", "sturion"] // eliminat este ["albastru", "trâmbiță"] Eliminare 1 element din indexul -2 let myFish = ["înger", "clovn", "mandarin", "sturion"] let removed = myFish.splice(-2, 1) // myFish este ["înger", "clovn" , "sturion"] // eliminat este ["mandarin"] Eliminați toate elementele după indexul 2 (incl.) let myFish = ["înger", "clown", "mandarin", "sturgeon"] let removed = myFish.splice (2) // myFish este ["înger", "clovn"] // eliminat este ["mandarin", "sturion"] Specificații Comentariu privind starea specificației
Ultima versiune ECMAScript (ECMA-262)
Proiect
ECMAScript 2015 (ediția a 6-a, ECMA-262)
Definiția „Array.prototype.splice” din specificația respectivă.
Standard
ECMAScript 5.1 (ECMA-262)
Definiția „Array.prototype.splice” din specificația respectivă.
Standard
ECMAScript ediția a treia (ECMA-262) Standard Definiție inițială. Implementat în JavaScript 1.2.
Compatibilitate browser

Tabelul de compatibilitate din această pagină este generat din date structurate. Dacă doriți să contribuiți la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

Actualizați datele de compatibilitate pe GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Vizualizare web Android Chrome pentru Android Firefox pentru Android Opera pentru Android Safari pe iOS Samsung Internet Node.jslipitură
Suport complet Chrome 1Edge Suport complet 12Suport complet pentru Firefox 1IE Suport complet 5.5

Note

Suport complet 5.5

Note

Note De la Internet Explorer 5.5 până la 8, toate elementele matricei nu vor fi șterse dacă deleteCount este omis. Acest comportament a fost remediat în Internet Explorer 9.
Opera Suport complet DaSuport complet Safari 1WebView Android Suport complet DaChrome Android Suport complet 18Firefox Android Suport complet 4Opera Android Suport complet DaSafari iOS Suport complet 1Samsung Internet Android Suport complet Danodejs Suport complet Da
Legendă Suport complet Suport complet Vezi notele de implementare. Vezi notele de implementare.

În JavaScript, precum și în alte limbaje de programare, sunt folosite diferite metode pentru a lucra cu matrice.

Metodele simplifică construcția logicii și implementarea acesteia într-un script.

Mai jos sunt metodele de bază pentru lucrul cu matrice în JS.

Apăsaţi

Metoda push() adaugă o valoare la sfârșitul matricei.

Fie arr = ; arr.push(312); console.log(arr); // →

pop

Metoda pop() elimină ultimul element din matrice sau returnează valoarea acestuia.

Fie arr = ; arr.pop(); console.log(arr); // →

Folosind capacitatea de a obține valoarea ultimului element al unui tablou ca exemplu, putem obține formatul imaginii:

Let img = "https://example.com/img/name.png"; let format = img.split(".").pop(); console.log(format); // → png console.log(img.split(".")); // → ["https://example", "com/img/name", "png"]

unshift

Metoda unshift() adaugă un element la începutul matricei.

Fie arr = ; arr.unshift(312); console.log(arr); // →

schimbare

Metoda shift() elimină primul element din matrice.

Fie arr = ; arr.shift(); console.log(arr); // → ;

Trebuie să înțelegeți că atunci când utilizați metodele shift și unshift, fiecare element al matricei își schimbă indexul. Acest lucru poate încetini execuția programului dacă matricea este mare.

Despică

Metoda split() este folosită pentru a transforma un șir într-o matrice. Split împarte un șir în funcție de parametrul specificat.

Let str = „Anya, Masha, Sasha, Dasha”; // acesta este un șir let arr = str.split(", "); console.log(arr); // → ["Anya", "Masha", "Sasha", "Dasha"] este o matrice

alăturați-vă

Metoda join() combină elemente de matrice într-un șir folosind delimitatorul specificat în parametru.

Fie arr = ["Notpad++", "Sublime", "VSCode"]; // acesta este un tablou let str = arr.join(", "); console.log("Editori pentru cod: " + str); // → „Editori pentru cod: Notpad++, Sublime, VSCode”

felie

Metoda slice() creează o nouă matrice în care copiază elemente din sursă, începând de la elementul cu indicele primului parametru trecut la metodă, până la elementul cu indicele celui de-al doilea parametru.

De exemplu: slice(3, 7) va returna elemente cu indexurile 3, 4, 5, 6. Elementul cu indexul 7 nu va fi inclus în tablou.

Dacă un parametru cu o valoare negativă este trecut la slice(), atunci returnează o nouă matrice cu numărul de elemente specificat în parametru, dar luate deja de la sfârșitul matricei originale.

Metoda slice nu modifică matricea originală.

Iată câteva exemple de metoda slice() în acțiune:

Fie arr = ["A", "B", "C", "D", "E", "F", "G"]; // Returnează un tablou care conține elemente cu indecși de la 2 la 5 console.log(arr.slice(2, 5)); // → ["C", "D", "E"] // Returnează o nouă matrice care conține elemente cu indici de la 3 la arr.length console.log(arr.slice(3)); // → ["D", "E", "F", "G"] // Returnează o copie a matricei originale console.log(arr.slice()); // → ["A", "B", "C", "D", "E", "F", "G"] // Returnează o nouă matrice formată din ultimele trei elemente ale console.log original (arr.slice (-3)); // → ["E", "F", "G"]

lipitură

Metoda splice() modifică conținutul unui tablou prin eliminarea elementelor existente și/sau adăugarea altora noi.

Sintaxă:

Array.splice(start, deleteCount[, item1[, item2[, ...]]])

Parametri:

  • start - Indexul la care se începe schimbarea matricei. Dacă este mai mare decât lungimea matricei, indexul real va fi setat la lungimea matricei. Dacă este negativ, specifică indicele elementului de la sfârșit.
  • deleteCount - Un număr întreg care indică numărul de elemente vechi care trebuie șterse din matrice. Dacă deleteCount este 0, nu se șterge niciun element. În acest caz, trebuie să specificați cel puțin un element nou. Dacă deleteCount este mai mare decât numărul de elemente rămase în matrice începând cu index start , atunci toate elementele până la sfârșitul matricei vor fi șterse.
  • itemN - Parametri opționali. Elemente de adăugat la matrice. Dacă nu specificați niciun element, splice() va elimina pur și simplu elemente din matrice.
Valoare returnată Descriere

Dacă numărul de elemente specificat pentru a fi inserate este diferit de numărul de elemente care trebuie eliminate, matricea se va schimba lungimea după apel.

Fie arr = ["Barca", "Shakhtar", "Manchester United", "Milan", "Real", "Ajax", "Juventus"]; lat nax = arr.splice(2, 3); arr.splice(2, 3); console.log(nax); // → ["Manchester United", "Milan", "Real"] console.log(arr); // → ["Barca", "Shakhtar"] arr.splice(1, 0, "Zenit", "CSKA", "Spartak"); console.log(arr); // → [Barça, Zenit, CSKA, Spartak, Shakhtar]

verso

Metoda reverse() inversează ordinea elementelor matricei. Ca rezultat, primul element al matricei devine ultimul, iar ultimul element devine primul.

Fie arr = ; console.log(arr.reverse()); // → console.log(["Alice", "BG", "GO", "DDT"].reverce()); // → ["DDT", "GO", "BG", "Alice"]

hartă

Metoda map() trece prin elementele matricei, efectuând acțiuni specificate asupra acestora și returnează o copie a matricei cu elementele modificate.

În exemplul de mai jos, la fiecare element de matrice adăugăm valoarea indexului acestui element (7 + 0, 2 + 1, 15 + 2, 4 + 3, 31 + 4):

Fie arr = ; let testMap = arr.map((element, index) => element + index); console.log(testMap); //

sau înmulțiți fiecare valoare a matricei, de exemplu, cu 12

Fie arr = ; let testMap = arr.map(a => a * 12); console.log(testMap); // →

filtra

Metoda filter() este folosită pentru a filtra matrice. Iterează prin matrice, returnând doar acele elemente care trec o anumită condiție.

De exemplu, să filtram valorile unei matrice de numere, lăsând doar pe cele mai mari de 21

Fie arr = ; let testFilter = arr.filter(element => element > 21); console.log(testFilter); // →

Vă rugăm să rețineți că 21 nu a fost inclus în rezultatul matricei, deoarece condiția era să returneze ceva mai mare decât 21. Pentru ca 21 să fie inclus în matrice, am setat condiția ca mai mare sau egală cu: element >= 21

Metoda splice() din tablourile Javascript modifică conținutul matricei prin adăugarea de elemente noi și eliminarea celor vechi

Sintaxa sa este următoarea:

Array.splice(index, howMany, [, ..., elementN]);

Detalii parametri
  • index – indexul la care matricea începe să se schimbe.
  • howMany – Un număr întreg care indică numărul de elemente vechi ale matricei de eliminat. Dacă howMany este 0, niciun element nu este eliminat.
  • element1, ..., elementN – Elemente adăugate la matrice. Dacă nu specificați niciun element, splice pur și simplu elimină elementele din matrice.
Valoarea returnată

Returnează matricea extrasă pe baza parametrilor trecuți.

Exemplu

Încercați următorul exemplu.

JavaScript - Arrays. Metoda splice var arr = ["portocale", "pepene", "lapte", "zahăr", ​​"cafea"];
eliminat: " + eliminat); eliminat = arr.splice(3, 1); document.write("
După adăugarea 1: " + arr); document.write("
eliminat: " + eliminat);

Rezultat După adăugarea 1: portocale, pepene galben, apă, lapte, zahăr, cafea eliminat: După adăugarea 1: portocale, pepene galben, apă, zahăr, cafea eliminat: lapte

Există mai multe metode de a elimina un element de matrice din JavaScript. Acestea includ metodele pop și shift. Metoda pop elimină primul element din tabloul dat. Metoda shift elimină ultimul element din matricea dată.

Puteți seta lungimea matricei la 0 dacă doriți să eliminați toate elementele din matricea dată. Dar ce, trebuie să eliminați un anumit element?

De exemplu:

Array_name.splice(index);

Array_name.delete

Puteți utiliza metoda de îmbinare. Returnează o nouă matrice de elemente eliminate. Și matricea originală conține elementele rămase.

Consultați demonstrația de mai jos pentru a afla cum să utilizați metoda de îmbinare JavaScript și alte modalități de a elimina anumite elemente.

Demonstrarea îndepărtării unui element specific folosind metoda splice

Această demonstrație creează o serie de numere. Inițial, cinci elemente sunt adăugate la matrice. După aceasta, metoda de îmbinare este utilizată pentru a elimina al treilea element. În același mod, puteți elimina primul element al unui tablou din JavaScript.

Elementele unei matrice numerice sunt afișate înainte și după utilizarea metodei JavaScript splice astfel:

Cod JavaScript cu metoda de îmbinare:


"; pentru (i=0; i< Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; ) document.getElementById("p1").innerHTML = the_arr_before_after; Arrretrun = Arr_Numbers.splice(2,1); var the_arr_before_after = "Elemente matrice după metoda de îmbinare:
"; pentru (i=0; i< Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "

Veți observa că am folosit doi parametri pentru JavaScript pentru a elimina un element de matrice. Prima specifică indexul elementului de eliminat. Al doilea este câte elemente trebuie eliminate după cheia specificată.

Următoarea demonstrație arată un caz în care folosim al doilea parametru.

Ce se întâmplă dacă al doilea parametru nu este specificat în metoda JavaScript splice?

Folosind același cod, dar fără al doilea parametru în metoda de îmbinare:

Arr_Numbers.splice(2);

Cod și rezultat:

Vedeți demonstrația și codul online

După cum puteți vedea, toate elementele dinaintea numărului de index specificat au fost, de asemenea, eliminate. În plus, metoda splice returnează o serie de elemente eliminate.

Cod JavaScript:

var Numere_Arr = ; var i; var the_arr_before_after = "Matricea originală:
"; pentru (i=0; i< Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; ) document.getElementById("p1").innerHTML = the_arr_before_after; Arrretrun = Arr_Numbers.splice(2); var the_arr_before_after = "Elemente matrice după metoda de îmbinare:
"; pentru (i=0; i< Arr_Numbers.length; i++){ the_arr_before_after += Arr_Numbers[i] + "
"; ) document.getElementById("p2").innerHTML = the_arr_before_after; //Elementele matricei eliminate din matricea returnată var the_arr_before_after = "Elementele matricei eliminate:
"; pentru (i=0; i< Arrretrun.length; i++){ the_arr_before_after += Arrretrun[i] + "
"; ) document.getElementById("p3").innerHTML = the_arr_before_after;

Utilizarea funcției de ștergere pentru a elimina un element de matrice

De asemenea, puteți utiliza funcția de ștergere pentru a șterge un element de matrice din JavaScript. Dar economisește spațiu gol și dacă returnați acea matrice după ce utilizați funcția, elementul eliminat va fi redat ca nedefinit.

Să ne uităm la o demonstrație care folosește funcția de ștergere:

Vedeți demonstrația și codul online

Cod JavaScript:

var Arr_Strings = ["The","JavaScript","Array","Totorial"]; var i; var the_arr_before_after = "Elementele matricei de șiruri originale:

"; pentru (i=0; i< Arr_Strings.length; i++){ the_arr_before_after += Arr_Strings[i] + "
"; ) document.getElementById("p1").innerHTML = the_arr_before_after; //Folosind funcția de ștergere delete Arr_Strings; var the_arr_before_after = "Elemente matrice după metoda de îmbinare:

"; pentru (i=0; i< Arr_Strings.length; i++){ the_arr_before_after += Arr_Strings[i] + "
"; ) document.getElementById("p2").innerHTML = the_arr_before_after;

Puteți vedea că al treilea element arată nedefinit după ce a fost șters folosind funcția de ștergere.