Języki obok siebie · lekcja 02

Listy i słowniki w trzech językach

Lista wartości: jedna nazwa, wiele wartości po kolei
Para klucz i wartość: wartość znajdujemy po nazwie, nie po numerze
Lista słowników, czyli tabela trzymana w pamięci
Ćwiczenie: przetłumacz program z listą produktów

Rozgrzewka · 3 minuty

Co zostało z poprzedniej lekcji?

Czym w PHP sklejamy dwa napisy?
Co wypisze pętla for i in range(1, 4) z print(i) w środku?
Po co funkcji słowo return?

Część 1 · Lista

Jedna nazwa, wiele wartości

PHP

$items = ["chleb", "mleko", "jajka"];
echo $items[0];

Python

items = ["chleb", "mleko", "jajka"]
print(items[0])

JavaScript

let items = ["chleb", "mleko", "jajka"];
console.log(items[0]);

Zapis listy jest w trzech językach taki sam: wartości w nawiasach kwadratowych, oddzielone przecinkiem. Numerowanie też: zaczyna się od zera, więc pierwsza wartość to items[0], a ostatnia z trzech to items[2].

php.net: Language Reference › Types › Arrays (sekcja „Accessing array elements with square bracket syntax”) · docs.python.org: tutorial 3.1.3 „Lists” · MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Accessing and modifying array items”)

Część 1 · Długość i dopisanie

Ile mam wartości i jak dołożyć kolejną?

PHP

echo count($items);
$items[] = "masło";
echo count($items);

Python

print(len(items))
items.append("masło")
print(len(items))

JavaScript

console.log(items.length);
items.push("masło");
console.log(items.length);

Każdy z tych trzech programów wypisze najpierw 3, potem 4. Różni się sam zapis: PHP i Python liczą funkcją (count, len), a JavaScript czyta gotową wartość length, dlatego tam nie ma nawiasów. Nowa wartość zawsze ląduje na końcu.

php.net: Language Reference › Types › Arrays (sekcja „Creating/modifying with square bracket syntax”) · Function Reference › Array Functions › count · docs.python.org: tutorial 5.1 „More on Lists” (list.append) · MDN: Learn_web_development/Core/Scripting/Arrays (sekcje „Finding the length of an array”, „Adding items”)

Część 1 · Pętla po elementach

Weź po kolei każdą wartość

PHP

foreach ($items as $item) {
  echo $item;
}

Python

for item in items:
    print(item)

JavaScript

for (const item of items) {
  console.log(item);
}

Ta pętla jest wygodniejsza od liczenia od zera do końca: nie podajemy żadnych numerów, a mimo to zmienna item dostaje po kolei każdą wartość z listy. Pętla kończy się sama, gdy wartości się skończą.

Pułapka w JavaScripcie: słowo of daje wartości, a słowo in daje numery. Zapis for (const item of items) wypisze "chleb", a for (const item in items) wypisze 0. W Pythonie słowo in od razu daje wartości.

php.net: Language Reference › Control Structures › foreach · docs.python.org: tutorial 4.2 „for Statements” · MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Accessing every item”) · Web/JavaScript/Reference/Statements/for...of

Część 2 · Klucz i wartość

Wartość po nazwie, nie po numerze

PHP

$product = [
  "name" => "chleb",
  "price" => 4.5,
];
echo $product["name"];
$product["quantity"] = 2;

Python

product = {
    "name": "chleb",
    "price": 4.5,
}
print(product["name"])
product["quantity"] = 2

JavaScript

const product = {
  name: "chleb",
  price: 4.5,
};
console.log(product.name);
product.quantity = 2;

php.net: Language Reference › Types › Arrays (sekcja „Specifying with key => value”) · docs.python.org: tutorial 5.5 „Dictionaries” · MDN: Learn_web_development/Core/Scripting/Object_basics (sekcje „Dot notation”, „Bracket notation”)

Część 2 · Pętla po kluczach

Przejdź po wszystkich polach naraz

PHP

foreach ($product as $key => $value) {
  echo $key . ": " . $value;
}

Python

for key, value in product.items():
    print(key, value)

JavaScript

const entries = Object.entries(product);
for (const [key, value] of entries) {
  console.log(key, value);
}

Wszystkie trzy wypiszą to samo: name chleb, price 4.5, quantity 2. Pomysł jest wspólny: jeden obrót pętli daje parę, czyli klucz i wartość. Różni się tylko sposób, w jaki prosimy o tę parę.

php.net: Language Reference › Control Structures › foreach (forma as $key => $value) · docs.python.org: tutorial 5.6 „Looping Techniques” (dict.items) · MDN: Web/JavaScript/Reference/Global_Objects/Object/entries

Część 3 · Tabela w pamięci

Lista słowników: tabela bez bazy danych

PHP

$products = [
  ["name" => "chleb", "price" => 4.5],
  ["name" => "mleko", "price" => 3.2],
  ["name" => "jajka", "price" => 9.9],
];
$total = 0;
foreach ($products as $product) {
  $total = $total + $product["price"];
}
echo $total;

Python

products = [
    {"name": "chleb", "price": 4.5},
    {"name": "mleko", "price": 3.2},
    {"name": "jajka", "price": 9.9},
]
total = 0
for product in products:
    total = total + product["price"]
print(total)

JavaScript

const products = [
  { name: "chleb", price: 4.5 },
  { name: "mleko", price: 3.2 },
  { name: "jajka", price: 9.9 },
];
let total = 0;
for (const product of products) {
  total = total + product.price;
}
console.log(total);

Wszystkie trzy wypisują 17.6. Wewnątrz są dwa klocki z tej lekcji: lista trzyma wiersze, a każdy wiersz to para klucz i wartość. Tak właśnie wygląda tabela, zanim trafi do bazy albo na stronę.

php.net: Language Reference › Types › Arrays (sekcja „Examples”) · docs.python.org: tutorial 5.1 „More on Lists” i 5.5 „Dictionaries” · MDN: Learn_web_development/Core/Scripting/Arrays (sekcja „Printing those products”)

Ściąga · do zeszytu

Listy i słowniki na jednej kartce

Co	PHP	Python	JavaScript
lista wartości	`$items = ["a", "b"];`	`items = ["a", "b"]`	`let items = ["a", "b"];`
pierwszy element	`$items[0]`	`items[0]`	`items[0]`
ile elementów	`count($items)`	`len(items)`	`items.length`
dopisanie na koniec	`$items[] = "c";`	`items.append("c")`	`items.push("c");`
pętla po elementach	`foreach ($items as $item)`	`for item in items:`	`for (const item of items)`
klucz i wartość	`["name" => "Ala"]`	`{"name": "Ala"}`	`{ name: "Ala" }`
odczyt po kluczu	`$product["name"]`	`product["name"]`	`product.name`
dodanie pola	`$product["price"] = 5;`	`product["price"] = 5`	`product.price = 5;`
pętla po kluczach	`foreach ($p as $key => $value)`	`for key, value in p.items():`	`Object.entries(p)`

php.net: Language Reference › Types › Arrays · Control Structures › foreach · docs.python.org: tutorial 3.1.3, 5.1, 5.5, 5.6 · MDN: Learn_web_development/Core/Scripting (Arrays, Object_basics)

Ćwiczenie · na kartce · 12 minut

Przetłumacz program z listą produktów

Po prawej masz program w Pythonie: liczy sumę cen i szuka najdroższego produktu. Wypisuje sumę 18 oraz nazwę jajka. Przepisz go linijka po linijce, nazw nie zmieniaj.

Przepisz ten program na JavaScript.
Dla chętnych: przepisz ten sam program na PHP.
Dla chętnych: dołóż czwarty produkt droższy od jajek. Co wypisze program?

Program w Pythonie

products = [
    {"name": "chleb", "price": 5},
    {"name": "mleko", "price": 3},
    {"name": "jajka", "price": 10},
]

total = 0
best = products[0]

for product in products:
    total = total + product["price"]
    if product["price"] > best["price"]:
        best = product

print("Razem:", total)
print("Najdroższy:", best["name"])

Sprawdzenie

Trzy pytania na koniec

Od jakiej liczby zaczyna się numerowanie wartości w liście?
Czym para klucz i wartość różni się od zwykłej listy?
Jak dopisujemy wartość na koniec listy w każdym z trzech języków?

Podsumowanie

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
lista wartości	Koszyk w sklepie, wyniki wyszukiwania, kolejka zadań do wykonania	codziennie
para klucz i wartość	Jeden wiersz z bazy danych, ustawienia programu, dane wysłane z formularza	codziennie
lista słowników	Odpowiedź serwera: lista rekordów, z których strona buduje tabelę	codziennie
suma w pętli	Podsumowanie zamówienia, raport sprzedaży, statystyki na panelu	codziennie

Ciekawostka: format JSON, którym programy wymieniają dziś dane przez internet, zbudowany jest dokładnie z tych dwóch klocków: listy i pary klucz z wartością. Zapis wzięto ze składni obiektu JavaScriptu, ale czytają go wszystkie języki.

ciekawostka: MDN: Web/JavaScript/Reference/Global_Objects/JSON