1. Operator trójskładnikowy

// Below is the example of ternary operator (?) being used in a conditional 
// expression
condition ? (if condtion is true, run this ):(if condition is false, run this);

Zasadniczo działanie tego wyrażenia polega na tym, że najpierw sprawdzany jest warunek, jeśli warunek jest prawdziwy, wówczas zostanie wykonana instrukcja po operatorze trójskładnikowym (?), a jeśli tak nie jest, zostanie wykonana instrukcja po dwukropku (:).

2. Niszczenie

const objects = ['table', 'iPhone', 'apple']
const [furniture, mobile, fruit] = objects

Jeszcze jeden przykład:

const vehicleOne = {
  brand: 'Ford',
  model: 'Mustang',
  type: 'car',
  year: 2021, 
  color: 'red'
}

myVehicle(vehicleOne);

function myVehicle({type, color, brand, model}) {
  const message = 'My ' + type + ' is a ' + color + ' ' + brand + ' ' + model + '.';
}

const numbersOne = [1, 2, 3];
const numbersTwo = [4, 5, 6];
const numbersCombined = [...numbersOne, ...numbersTwo];

Oto kolejny przykład:

const myVehicle = {
  brand: 'Ford',
  model: 'Mustang',
  color: 'red'
}

const updateMyVehicle = {
  type: 'car',
  year: 2021, 
  color: 'yellow'
}

const myUpdatedVehicle = {...myVehicle, ...updateMyVehicle}

Metoda .map():

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(myFunction)

function myFunction(num) {
  return num * 10;
} 
//this function is called by the .map() method where the numbers array 
 //each element is taken as parameter

.pop() usuwa element na końcu tablicy, a .push() dodaje element na końcu tablicy:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon"); // adds Kiwi and Lemon after Mango
fruits.pop(); // removes Lemon at the end of an array

5. Funkcje strzałek

Pomaga nam tworzyć funkcje w prostszy sposób:

let hello = () => 'hello' //here we created an arrow function 
                          // assigned it to hello 
                           // this function returns 'hello'

let square = num => num * num // we can ignore bracketts 
                              //if we only have one parameter
                              // num in this case

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

1. Rozwiązany — Jeśli zakończy swoją funkcję
2. Odrzucony — jeśli funkcja, którą próbuje wykonać, nie powiedzie się
3. Oczekujące — Gdy wynik funkcji nie jest jeszcze określony

Funkcja .catch () służy do obsługi błędów w obietnicy.

7. Interfejs API pobierania

fetch('http://example.com/books.json') // fetching the resource URL
  .then(response => response.json()); // calling .json() method on the promise
  .then(data => setState(data)); // updating the state with the JSON data

Metoda fetch()zwraca Obietnicę, która jest rozpoznawana jako obiekt Response.

8. Asynchronizacja/oczekiwanie

Funkcja Async/Await zapewnia lepszy i bardziej przejrzysty sposób radzenia sobie z obietnicami. JavaScript ma charakter synchroniczny, a async/await pomaga nam pisać funkcje oparte na obietnicach w taki sposób, jakby były synchroniczne, zatrzymując wykonywanie dalszego kodu, dopóki obietnica nie zostanie rozwiązana lub odrzucona.

Aby to zadziałało, musisz najpierw użyć słowa kluczowego async przed zadeklarowaniem funkcji. na przykład async function promise() {}. Umieszczenie asynchronizacji przed funkcją oznacza, że ​​funkcja zawsze zwróci obietnicę.

Wewnątrz funkcji asynchronicznej możesz użyć słowa kluczowego, awaitaby zawiesić dalsze wykonywanie kodu, dopóki ta obietnica nie zostanie rozwiązana lub odrzucona. Możesz używać await tylko wewnątrz funkcji asynchronicznej .

Teraz szybko zakończmy tę sekcję przykładem:

async function asyncFunction() {
    let promise = new Promise(resolve => {
        resolve();
    });
    let response = await promise; // further execution will be stopped until the promise is resolved or rejected
    return console.log(response);

function Component() {
    return(
        <div>This is a component</div>
    )
}

export default Component

import Component from './Component'

function App() {
    return (
        <Component />
    )
}

W powyższym przykładzie stworzyliśmy komponent o nazwie Component i wyeksportowaliśmy go z naszym kodem export default Component. Następnie przechodzimy do App.js i importujemy Component z następującym kodem: import Component from './Component'.

Przyjął pomoc stąd . na freecodecampie.