consdata.com
Blog techniczny Blog biznesowy Dział HR
EN
javascript

Czy wiesz, jak używać slice w JavaScript?

author Dorian Mejer
25 listopada 2024

Slice zwraca płytką kopię obiektów w Array. Płytka kopia obiektu to kopia, która posiada te same referencje na wartości. Zmiana w skopiowanym obiekcie spowoduje zmianę pierwotnego obiektu.

Slice można sparametryzować, podając indeks startu oraz końca.

slice()
slice(start)
slice(start, end)

Przykład na liczbach:

const listA = [1, 2, 3, 4];
 
const listB = listA.slice(1, 3);
// listB: [2, 3]
 
listB.push(5);
// listA: [1, 2, 3, 4]
// listB: [2, 3, 5]
 
const listC = listA.slice(2);
// listC: [3, 4]

Przykład ze złożonym obiektem:

const books = [
  {
    name: 'Frankenstein',
    author: 'Mary Shelley',
  },
  {
    name: 'Dracula',
    author: 'Bram Stoker',
  },
  {
    name: 'The War of the Worlds',
    author: 'Herbert George Wells',
  },
];  const booksSliced = books.slice(1, 2);
// booksSliced: [{author: "Bram Stoker", name: "Dracula"]
 
booksSliced[0].name = 'The Mystery of the Sea';
// booksSliced: [{author: "Bram Stoker", name: "The Mystery of the Sea"]
// boooks: [{author: "Mary Shelley", name: "Frankenstein",
//          {author: "Bram Stoker", name: "The Mystery of the Sea"},
//          {author: "Herbert George Wells", name: "The War of the Worlds"}]

W przypadku obiektów należy pamiętać, że slice tworzy płytką kopię obiektów. Modyfikacja obiektu spowoduje zmianę również na pierwotnej liście.

Przydatne linki

  • Wykonywalny kod: https://js-k8u73q.stackblitz.io
Najnowsze wpisy

  • Dostępność w PDF - dokumenty bez barier
  • Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?
  • Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

newsletter

techniczny

Zapisz się

Podobne wpisy

post-image
WCAG

Dostępność w PDF - dokumenty bez barier

author
Kacper Hoffman 28 kwi 2025
post-image
angular

Czy wiesz, że z pomocą @starting-style można animować elementy z display: none za pomocą samego CSS?

author
Piotr Tatarski 7 kwi 2025
post-image
angular

Czy wiesz, że w Angular 17 została wprowadzona alternatywa dla *ngSwitch?

author
Dorian Mejer 10 mar 2025
Dołącz do nas

  • SENIOR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 14 900 - 20 590 PLN brutto
    B2B 19 680 - 27 220 PLN netto
  • REGULAR FULLSTACK DEVELOPER (JAVA + ANGULAR) Poznań (hybrydowo) lub zdalnie UoP 11 300 - 15 900 PLN brutto
    B2B 14 950 - 21 000 PLN netto
  • ZOBACZ WSZYSTKIE OGŁOSZENIA

Zapisz się na

newsletter

techniczny

consdata.com
  • Kontakt

    • sales@consdata.com
    • +48 61 41 51 000

  • Biuro

    • K9Office
      Krysiewicza 9/14
      61-825 Poznań
      Polska

  • Rozwiązania

    • Eximee
    • Kouncil
  • Blog Dołącz do nas
Copyright © 2024 Consdata. All rights reserved. Privacy Policy & Cookies
Chcemy używać plików cookie oraz skryptów podmiotów trzecich do polepszania funkcjonowania tej strony Zgadzam się