logo
  • Proces
  • Case studies
  • Blog
  • O nas
Napisz do nas
  1. Strona główna

  2. /

    Blog

  3. /

    Metody tablicowe w JavaScript

Metody tablicowe w JavaScript

fullstack

4 minuty czytania

Sebastian Świtoń

5 cze 2022

javascript

Metody tablicowe w JavaScript to specjalne funkcje, które pozwalają na wykonywanie różnych operacji na tablicach danych. Dzięki nim możemy m.in. sortować, filtrować.

Spis treści

Metody tablicowe:

Metody tablicowe w JavaScript

Powiązane oferty pracy

CTO - React/Next.js and Python/Node

B2B:

15000 - 25000 PLN netto +VAT

FullStack Developer ( Node.js + Vue.js/React.js)

UOP:

8000 - 14000 PLN brutto

B2B:

13000 - 20000 PLN netto +VAT

Pokaż wszystkie oferty

Powiązane case studies

Strony internetowe CeeCam

UX/UI, Web development

PolandBuild

Web development

Pokaż wszystkie case study

Tablice w języku JavaScript to struktury danych zawierające zbiór wielu wartości w jednej zmiennej. Tablice są skalowalne i mogą zawierać mieszankę różnych typów danych. Tablice zawierają metody, które są funkcjami wbudowanymi w JavaScript, każda metoda dokonuje zmiany lub obliczenia w tablicy i oszczędza nam pisania typowych funkcji od zera. Elementy tablicy są ponumerowane za pomocą indeksów, zaczynając od 0, pierwszy element tablicy ma indeks 0, drugi ma indeks 1 itd. a ostatni element ma wartość właściwości length tablicy pomniejszoną o 1.

 

Tworzenie tablicy:

W JavaScript tablicę tworzymy za pomocą nawiasów kwadratowych. Wartości umieszczamy wewnątrz nawiasów, oddzielając je przecinkami.

const arr = [1, 2, 3];
const arr2 = ['string', 'string2', 'string3'];
const arr3 = [1, 'string', true];

 

Właściwość length:

Tablica udostępnia właściwość length, która określa ilość jej elementów.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log9arr.lenght); //9

 

Właściwość length:

Do elementów tablicy odwołujemy się za pomocą nazwy tablicy i indeksu.

const arr = ['value1', 'value2', 'value3'];
console.log(arr[0]); // value1
console.log(arr[1]); // value2
console.log(arr[2]); // value3

 

Metody tablicowe:

at()

Przyjmuje wartość całkowitą i zwraca element pod tym indeksem, dopuszczając dodatnie i ujemne liczby całkowite. Ujemne liczby całkowite liczą wstecz od ostatniego elementu w tablicy.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.at(0)); // value1
console.log(arr.at(-1)); // value3

 

push( )

Dodaje jeden lub więcej elementów na końcu tablicy.

const arr = ['value1', 'value2'];
arr.push('value3');
console.log(arr); // ['value1', 'value2', 'value3']

 

pop()

Usuwa ostatni element z końca tablicy i zwraca ten element.

const arr = ['value1', 'value2'];
const pop = arr.pop();
console.log(pop); // value2
console.log(arr); // ['value1']

 

shift( )

Usuwa pierwszy element z tablicy i zwraca ten element.

const arr = ['value1', 'value2'];
const shift = arr.shift();
console.log(shift); // value1
console.log(arr); // ['value2']

 

unshift( )

Dodaje jeden lub więcej elementów na początek tablicy

const arr = ['value1', 'value2'];
arr.unshift('value3');
console.log(arr); // ['value3', 'value1', 'value2']

 

reverse( )

Odwraca tablicę. Element o ostatnim indeksie będzie pierwszym, a element o indeksie 0 ostatnim.

const arr = [1, 2, 3, 4, 5];
arr.reverse()
console.log(arr); // [5,4,3,2,1]

 

indexOf( )

Zwraca indeks pierwszego wyszukiwanego elementu w tablicy lub -1, jeśli nie został znaleziony.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.indexOf('value3')); // 2
console.log(arr.indexOf('value4')); // -1

 

findIndex( )

Zwraca indeks pierwszego elementu w tablicy, który pomyślnie spełnił warunki w funkcji testującej.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.findIndex(item => item > 5)); // 5
console.log(arr[5]); //6

 

find( )

Zwraca wartość pierwszego elementu w tablicy, który pomyślnie spełnił warunki w funkcji testującej.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.find(item => item > 5)); // 6

 

reduce( )

Wykonuje funkcję callback na każdym elemencie tablicy, w podanej kolejności, przekazując wartość zwracaną z obliczeń na poprzedzającym elemencie. 

Końcowym wynikiem jest pojedyncza wartość.

const arr = [10, 10, 10, 10, 10];
console.log(arr.reduce((acc, cur) => acc + cur)); // 50

 

slice( )

Zwraca nową tablicę z określonymi elementami. Pierwszy parametr wskazuje na początkowy indeks, a drugi na indeks końcowego elementu.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.slice(0, 5)); // [1, 2, 3, 4, 5]

 

splice()

Zmienia zawartość tablicy, usuwając lub zastępując istniejące elementy i/lub dodając nowe elementy. 

const arr = ['value1', 'value2', 'value3'];
arr.splice(0, 2);
console.log(arr); // ['value3']

 

map( )

Tworzy nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.map(item => item * 2)); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

 

filter( )

Tworzy nową tablicę zawierającą elementy, które spełniają warunek wewnątrz podanej funkcji.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.filter(item => item %2 === 0)); // [2, 4, 6, 8, 10]

 

sort( )

Metoda służy do sortowania elementów tablicy w porządku rosnącym lub malejącym.

const arr = ['c', 'b', 'e', 'a', 'd'];
console.log(arr.sort((a, b) => (a > b ? 1 : -1))); // ['a', 'b', 'c', 'd', 'e']
console.log(arr.sort((a, b) => (a > b ? -1 : 1))); // ['e', 'd', 'c', 'b', 'a']

 

every( )

Sprawdza każdy element w tablicy, który spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr2 = [2, 4, 6, 8, 10];
console.log(arr.every(item => item % 2 === 0)); // false
console.log(arr2.every(item => item % 2 === 0)); // true

 

some( )

Sprawdza, czy co najmniej jeden element w tablicy spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr.some(item => item >= 10)); // true
console.log(arr.some(item => item > 10)); // false

 

includes( )

Sprawdza, czy tablica zawiera element, który spełnia warunek, zwracając odpowiednio wartość true lub false.

const arr = ['value1', 'value2', 'value3'];
console.log(arr.includes('value1')); // true
console.log(arr.includes('value4')); // false

 

concat( )

Służy do łączenia dwóch lub więcej tablic i zwraca nową tablicę.

const arr = [1, 2, 3, 4, 5];
const arr2 = [6, 7, 8, 9, 10];
console.log(arr.concat(arr2)); // [1,2,3,4,5,6,7,8,9,10]

 

join( )

Zwraca nowy ciąg znaków, łącząc wszystkie elementy tablicy oddzielone określonym separatorem.

const arr = ['a', 'b', 'c', 'd', 'e'];
console.log(arr.join(' - '); // a - b - c - d - e

 

fill( )

Wypełnia elementy w tabli.

const arr = new Array(5);
console.log(arr); // [ <5 empty items> ]
console.log(arr.fill(10)); // [10, 10, 10, 10, 10]

 

forEach( )

Wykonuje podaną funkcję callback dla każdego elementu w tablicy.

const arr = ['value1', 'value2', 'value3'];
arr.forEach(value => {
     console.log(value);
});
// 'value1'
// 'value2'
// 'value3'

 

flat()

Tworzy nową tablicę ze wszystkich zagnieżdżonych tablic.

const arr = ['value1', 'value2', ['value3', ['value4', 'value5']]];
console.log(arr.flat(1));; // ['value1', 'value2', 'value3', ['value4', 'value5']
console.log(arr.flat(2));; // ['value1', 'value2', 'value3', 'value4', 'value5']

 

flatMap()

Zwraca nową tablicę utworzoną przez zastosowanie danej funkcji callback dla każdego elementu tablicy, a następnie spłaszczenie wyniku o jeden poziom.

const arr = [
     [1, 2, 3]'
     [4, 5, 6],
     [ 7, 8, 9]
];
console.log(arr.flatMap(item => item)); // [1,2,3,4,5,6,7,8,9]

Powiązane artykuły

Customowe template tags w Django

13 lip 2023

Template tags to świetne narzędzie pozwalające na manipulację danymi z poziomu template'ów w aplikacjach opartych o framework Django. Dużo z nich jest już wbudowanych we framework i gotowych do użytku, jednak czasem potrzebna jest customowa funkcjonalność.

Dawid Kruk

#fullstack

related-article-image-null

DOM: jak skutecznie manipulować modelem obiektowym dokumentu?

5 wrz 2023

Zapraszam do artykułu poświęconego tajnikom skutecznej manipulacji DOM - Modelem Obiektowym Dokumentu. DOM jest nieodłączny w świecie web developmentu, a właściwe jego zrozumienie może dać programiście ogromne możliwości w tworzeniu interaktywnych i responsywnych stron internetowych. Zanurzmy się w podróż po strukturze, właściwościach i metodach DOM, aby jeszcze lepiej zrozumieć, jak działa nasz kod.

Tomasz Kozon

Rewalidacja w Next.js 13

29 sie 2023

Next.js to fullstackowy framework służący do budowy aplikacji webowych. Jedną z zalet Next.js jest statyczne generowanie stron, co pozwala na serwowanie gotowego HTMLa, kiedy użytkownik wchodzi na stronę. Czyni to ten framework niezwykle szybkim. Co jednak, kiedy strona nie jest do końca statyczna - dane w CMSie lub API zmieniają się raz na tydzień, miesiąc lub kwartał?

Dawid Kruk

#fullstack

Pierwsze kroki z Firebase Storage: Wprowadzenie i przewodnik

29 sie 2023

Zarządzanie danymi wymaga nie tylko kompetencji, ale także odpowiednich narzędzi. Firebase Storage, udostępniane przez Google, jest jednym z najbardziej efektywnych rozwiązań do przechowywania i udostępniania plików użytkownikom. W tym artykule, pomożemy Ci zrobić pierwsze kroki z Firebase Storage, omówimy jego podstawy oraz pokierujemy Cię przez proces jego szybkiej i łatwej konfiguracji.

Kamil Nahotko

#fullstack

Tworzenie nowoczesnych aplikacji internetowych z wykorzystaniem Ext JS

25 sie 2023

Tworzenie nowoczesnych aplikacji webowych jest często wyzwaniem dla programistów. Jednym z pomocnych narzędzi jest Ext JS - silne, zorientowane obiektowo środowisko JavaScript, które pozwala tworzyć bogate i skalowalne aplikacje internetowe. Pozwala on szybko i efektywnie kreować interfejsy użytkownika, a także zarządzać danymi i logiką biznesową.

Tomasz Kozon

#front-end

Mocha: Co to jest i jak z niego korzystać w testowaniu oprogramowania?

25 sie 2023

W świecie oprogramowania, testowanie stanowi kluczowy element w procesie tworzenia aplikacji. Wśród wielu dostępnych narzędzi do testowania, Mocha wyróżnia się swoją wszechstronnością i niezawodnością.

Tomasz Kozon

#testing

Debugger w VSCode: Przewodnik po narzędziach do debugowania kodu

24 sie 2023

Debugger w VSCode, potężne narzędzie dla każdego programisty, może być potężnym sojusznikiem w celu lepszego zrozumienia i rozwiązania problemów związanych z kodem. W tym artykule, stworzymy kompleksowy przewodnik, który pomoże ci maksymalnie wykorzystać ten niezbędny zasób. Od podstawowej konfiguracji, poprzez użyteczne skróty, po zaawansowane techniki, zbadamy wszystkie aspekty debugowania w VSCode.

Dawid Jażdżewski

#fullstack

Zobacz wszystkie artykuły powiązane z #fullstack

Napisz do nas

hello@boringowl.io

Zadzwoń

+48 509 280 539

Znajdź nas

Newsletter
social iconsocial iconsocial iconsocial iconsocial icon
logo

Oferta

  • Web Development

  • Mobile Development

  • UI/UX Design

  • E-commerce

  • Team Extension

  • Body Leasing

Menu

  • O nas

  • Case studies

  • FAQ

  • Blog

  • Kariera

  • Kontakt

© 2023 - Boring Owl - Software House Warszawa

adobexd

adobexd

algolia

algolia

amazon-s3

amazon-s3

android

android

angular

angular

api

api

apscheduler

apscheduler

aws-amplify

aws-amplify

aws-lambda

aws-lambda

axios

axios

bash

bash

bootstrap

bootstrap

bulma

bulma

cakephp

cakephp

celery

celery

chartjs

chartjs

clojure

clojure

cloudinary

cloudinary

cms

cms

cobol

cobol

contentful

contentful

cpython

cpython

css3

css3

django

django

django-rest

django-rest

docker

docker

drupal

drupal

dynamodb

dynamodb

electron

electron

expo-io

expo-io

express-js

express-js

fakerjs

fakerjs

fastapi

fastapi

fastify

fastify

figma

figma

firebase

firebase

flask

flask

flutter

flutter

gatsbyjs

gatsbyjs

ghost-cms

ghost-cms

google-cloud

google-cloud

graphcms

graphcms

graphql

graphql

groovy

groovy

gulpjs

gulpjs

hasura

hasura

headless-cms

headless-cms

heroku

heroku

html5

html5

httpie

httpie

immutablejs

immutablejs

ios

ios

java

java

javascript

javascript

jekyll

jekyll

jekyll-admin

jekyll-admin

jenkins

jenkins

jquery

jquery

json

json

keras

keras

keystone5

keystone5

kotlin

kotlin

kubernetes

kubernetes

laravel

laravel

lodash

lodash

magento

magento

mailchimp

mailchimp

material-ui

material-ui

matlab

matlab

maven

maven

miro

miro

mockup

mockup

momentjs

momentjs

mongodb

mongodb

mysql

mysql

nestjs

nestjs

net

net

netlify

netlify

next-js

next-js

nodejs

nodejs

npm

npm

nuxtjs

nuxtjs

oracle

oracle

pandas

pandas

php

php

postgresql

postgresql

postman

postman

prestashop

prestashop

prettier

prettier

prisma

prisma

prismic

prismic

prose

prose

pwa

pwa

python

python

python-scheduler

python-scheduler

rabbitmq

rabbitmq

react-js

react-js

react-native

react-native

react-static

react-static

redis

redis

redux

redux

redux-saga

redux-saga

redux-thunk

redux-thunk

restful

restful

ruby-on-rails

ruby-on-rails

rust

rust

rxjs

rxjs

saleor

saleor

sanity

sanity

scala

scala

scikit-learn

scikit-learn

scrapy

scrapy

scrum

scrum

selenium

selenium

sentry

sentry

shodan

shodan

slack

slack

sms-api

sms-api

socket-io

socket-io

solidity

solidity

spring

spring

sql

sql

sql-alchemy

sql-alchemy

storyblok

storyblok

storybook

storybook

strapi

strapi

stripe

stripe

structured-data

structured-data

struts

struts

svelte

svelte

swagger

swagger

swift

swift

symfony

symfony

tensorflow

tensorflow

terraform

terraform

threejs

threejs

twig

twig

typescript

typescript

vercel

vercel

vue-js

vue-js

webpack

webpack

websocket

websocket

woocommerce

woocommerce

wordpress

wordpress

yarn

yarn

yii

yii

zend

zend

zeplin

zeplin

Zobacz więcej