Kopiowanie tablicy

Załóżmy, że mam taki przykład:

const original = [1, 2, 3, 4, 5];
const copy = original;

copy[0] = 7;

console.log('original: ', original); // [7, 2, 3, 4, 5]
console.log('copy: ', copy); // [7, 2, 3, 4, 5]

Stworzyliśmy kopię tablicy, a następnie zmieniliśmy jej pierwszy element. Niestety zmienił się także oryginał. Jest tak dlatego, że w ten sposób skopiowaliśmy także referencje z macierzystej tablicy.

Jak temu zapobiec?

Operator spread: ...

const original = [1, 2, 3, 4, 5];
const copyArray = [...original];

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Funkcja slice

const original = [1, 2, 3, 4, 5];
const copyArray = original.slice();

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Funkcja concat

const original = [1, 2, 3, 4, 5];
const copyArray = [].concat(original);

copyArray[0] = 7;

console.log('original: ', original); // [1, 2, 3, 4, 5]
console.log('copyArray: ', copyArray); // [7, 2, 3, 4, 5]

Jak zapobiec zmianie w tablicy?

Jeśli zależy nam na stworzeniu tablicy, której zawartości nie chcemy zmieniać w ogóle, możemy użyć: Object.freeze. Pisałem już o niej w tym wpisie.

Przykład:

const array = Object.freeze([1, 2, 3]);

array[0] = 7; // Błąd!
array.push(12); // Błąd!
array.pop(); // Błąd!

Jak widać każda próba modyfikacji tablicy, powoduje błąd w kodzie.

Jeśli masz problem z próbą nawiązania połączenia między słuchawkami a Bluetooth Twojego komputera, to wykonaj te kroki:

1. Edytuj następujący plik:

sudo nano /etc/bluetooth/main.conf

Znajdź: ControllerMode. Jeśli nie ma, to dodaj taki wpis:

ControllerMode = bredr

2. Zrestartuj Bluetooth:

sudo /etc/init.d/bluetooth restart

3. Teraz przejdź do ustawień systemów. Dokładnie do sekcji: Bluetooth. Znajdź na liście swoje słuchawki i nawiąż połączenie.

Martwy kod zaśmieca projekt. Skoro go nie używamy to warto go skasować prawda?

Problem pojawia się kiedy pracujemy w dużym projekcie i trzeba sprawdzić wiele plików. Na szczęście Webstorm udostępnia funkcjonalność, która wskazuje miejsca, gdzie znajduje się nieużywany kod.

Jak zlokalizować martwy kod?

Więc po krok po kroku:

1. Przejdź do: ustawień (skrót: CTRL + ALT + S): File -> Settings -> Inspections.
2. Znajdź: JavaScript and TypeScript. W drzewku znajdź: Unused symbols.

Domyślnie powinny być zaznaczone wszystkie opcje dla tej kategorii. Jeśli tak nie jest, zaznacz wszystko.

Własny profil inspekcji kodu

Ponieważ jak zauważysz, zaznaczonych jest wiele opcji a Tobie, zależy tylko na znalezieniu martwego kodu, możesz stworzyć specjalny profil dla tej operacji. Zlokalizuj na górze: Profile. Obok znajduje się lista z profilami. Żeby dodać własny, kliknij ikonkę z prawej strony listy. Wybierz opcję Duplicate.... Stworzy nowy profil. Ustaw w nim nazwę na przykład: Dead code. Jest wiele opcji do odznaczenia, ale głowa do góry! Jest szybki sposób na odznaczenie wszystkich opcji. Poniżej listy z profilami jest ikonka: minus w kwadracie kiedy na nią najedziesz kursorem, wyświetli się tooltip z tekstem: Reset to Empty. Kliknij to. Wszystkie opcje są niezaznaczone. Teraz znajdź znowu: Unused symbols. Zaznacz to. Wszystkie opcje dla tej kategorii także zostaną wybrane. Zapisz swoje ustawienia.

Dobra mamy wszystko czas odpalić inspekcję kodu.

Uruchomienie inspekcji kodu

Zamknij okno z ustawieniami. Przejdź do: Code -> Inspect Code....

Wyświetli się okienko. Możesz ustawić sobie lokalizację, w jakim miejscu inspekcja kodu ma się uruchomić. Domyślnie to: Whole project, czyli: cały projekt.

Na koniec wybierz swój profil w Inspection profile.

Kliknij Analyze.

Po chwili wygeneruje się raport z zaznaczonymi miejscami, gdzie znajduje się martwy kod. O ile jakiś istnieje :)

Operator filter służy do przefiltrowania danych z Observable.

Sami określamy warunki filtracji.

Przykłady

Przykład 1

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const observable = from([1, 2, 3, 4,  5, 6]).pipe(
    filter(value => value > 3)
);

observable.subscribe(console.log);
// Wyświetli:
// 4
// 5
// 6

Przykład 2

import { from } from 'rxjs';
import { filter } from 'rxjs/operators';

const data = [
    {
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'service'
        title: 'Service 1'
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
];

const observable = from(data).pipe(
    filter(item => item.type  === 'product')
);

observable.subscribe(console.log);

// Wyświetli:
[
	{
        type: 'product',
        title: 'Product 1' 
    },
    {
        type: 'product',
        title: 'Product 2' 
    }
]

Przykład 3

Załóżmy, że chcemy odbierać zdarzenie na wciśnięcie tylko klawisza: Enter lub spacji, a inne należy ignorować.

import { fromEvent } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const observable = fromEvent(document, 'keydown').pipe(
    map(event => event.code),
    filter(code => code === 'Enter' || code === 'Space')
);

observable.subscribe(console.log);

Wyświetli Enter po wciśnięciu klawisza Enter. Lub Space po wciśnięci spacji. Dla innych klawiszy nic się nie wyświetli.