Argomenti Javascript che dovresti conoscere prima di imparare React.

In questo articolo esploreremo i principali concetti fondamentali di Javascript necessari da conoscere per avere un primo ciclo di apprendimento efficace di React / React Native

Sommario

map() & filter()
slice() & splice()
concat()
find() & findIndex()
destructuring
rest & spread operator
promises

map and filter

Entrambi sono metodi di array ed entrambi restituiscono un nuovo array, quando si applica il filtro rimuove gli elementi che non corrispondono.

map


1const Data =[
2    {id: '1',title: "car"},
3    {id: '1',title: "car"},
4    {id: '2',title: "bus"},
5    {id: '3',title: "plane"},
6    {id: '4',title: "train"},
7    {id: '5',title: "ship"},
8]
9
10const upperData = Data.map(element => element.title.toUpperCase());
11console.log(upperData)

Output:


1['CAR', 'BUS', 'PLANE', 'TRAIN', 'SHIP']

filter


1const Data =[
2    {id: '1',title: "car"},
3    {id: '2',title: "bus"},
4    {id: '3',title: "plane"},
5    {id: '4',title: "train"},
6    {id: '5',title: "ship"},
7]
8
9const filterData = Data.filter(element => element.id %2 === 0);
10console.log(filterData)

Output:


1[ 
2    { id: '2', title: 'bus' }, 
3    { id: '4', title: 'train' } 
4]

slice and splice

Il metodo slice restituisce un nuovo array con gli elementi selezionati, mentre il metodo splice modifica il contenuto di un array esistente

splice:


1const data = [
2    'Car',
3    'Bus',
4    'Helicopter',
5    'Train'
6]
7
8const copyArray = [...data]
9
10const newArray = copyArray.slice(0,2)
11console.log(newArray)
12console.log(data)

Output:


1['Car', 'Bus'] // newArray
2['Car', 'Bus', 'Helicopter', 'Train'] // data

splice:


1const data =[
2    'Car',
3    'Bus',
4    'Helicopter',
5    'Train'
6]
7
8data.splice(0,1)
9console.log(data)

Output:


1['Bus', 'Helicopter', 'Train'] // data

Sostituisci / aggiungi nuovo elemento nell'array


1const data =[
2    'Car',
3    'Bus',
4    'Helicopter',
5    'Train'
6]
7
8const copyArray = [...data]
9
10copyArray.splice(copyArray.length,1,"Plane")
11console.log(copyArray)

Output:


1['Car', 'Bus', 'Helicopter', 'Train', 'Plane'] // copyArray

concat

Questo metodo restituisce un nuovo array unendo due o più array


1const array1 = [1, 2, 3];
2const array2 = [4, 5, 6];
3const array3 = [7, 8, 9, 10];
4
5const mergeArray = array1.concat(array2, array3);
6console.log(mergeArray);

Output:


1[1, 2, 3, 4, 5, 6, 7, 8, 9, 10] // mergeArray

find and findIndex

Il metodo find restituisce il primo elemento che soddisfa la condizione, mentre findIndex restituisce l'indice di quell'elemento

find


1const data = [
2  { id: 1, title: "first" },
3  { id: 2, title: "second" },
4  { id: 3, title: "third" },
5  { id: 4, title: "fourth" },
6];
7
8const item = data.find((element) => element.id === 3);
9console.log(item);

Output:


1{ id: 3, title: 'third' }

findIndex


1const data = [
2  { id: 1, title: "first" },
3  { id: 2, title: "second" },
4  { id: 3, title: "third" },
5  { id: 4, title: "fourth" },
6];
7
8const itemIndex = data.findIndex((element) => element.id === 3);
9console.log(itemIndex);

Output:

destructuring

L'assegnazione di destrutturazione è una sintassi speciale che consente di decomprimere (assegnare) il valore da array o proprietà dell'oggetto direttamente nelle variabili

array


1const name = ["khurram", "bashir"];
2
3const [firstName, lastName] = name;
4
5console.log(firstName, lastName);

Output:


1khurram bashir

JSON object


1const data = {
2  id: 1,
3  name: "khurram bashir",
4  loveMusic: true,
5  species: "human",
6};
7
8const { name: dataName, species, ...rest } = data;
9
10console.log(dataName);
11console.group(species);
12console.group(rest);

Output:


1khurram bashir
2human
3{ id: 1, loveMusic: true }

rest & spread operator

Il parametro Rest ci consente di passare un numero non specificato di parametri a una funzione che verrà inserita nell'array, mentre l'operatore spread ci consente di diffondere il contenuto di un iterabile (cioè un array) in singoli elementi

rest


1const getSize = (...args) => {
2  return args.length;
3};
4
5console.log(getSize(1, 2, 3));
6console.log(getSize(10, 20, 30, 100));

Output:


13
24

spread


1const introduction = ["my", "name", "is", "jack"];
2
3const copyArr = [...introduction];
4console.log(copyArr);
5console.log(...copyArr);

Output:


1[ 'my', 'name', 'is', 'jack' ]
2my name is jack

promises

In termini semplici, le promises vengono utilizzate per gestire operazioni asincrone. Ogni promise può concludersi con un successo o un fallimento con 3 possibili stati: in sospeso, soddisfatto o rifiutato. Nell'esempio seguente gestiamo la promise con la sintassi di attesa asincrona durante il recupero dei dati dall'API


1const fetchData = async () => {
2  try {
3    const response = await fetch("https://jsonplaceholder.typicode.com/todos/");
4
5    if (!response.ok) throw new Error(response.status);
6    const result = await response.json();
7    return result;
8  } catch (e) {
9    console.log(e);
10  }
11};
12