const product = {
    name: 'Coke',
    price: 10,
    provider: {
      name: 'Wailkk',
      address: 'Fake Street',
      state: {
        id: 1,
        name: 'Florida',
        country: {
          code: 'US',
          name: 'United States',
        },
      },
      orders: null,
      fPrice: (x) => 100,
    },
  };

  //Old way
  const providerCountry = product.provider
    ? product.provider.name
      ? product.provider.name
      : null
    : null;

  //Nullish Coalsencing Operator Way
  //If the value is null then this option it will not works.
  const _providerCountry = product.provider.name ?? undefined;

  //Not work if the value is null
  const providerOrders = product.provider.orders ?? 1;
  // Should be null.  [Error]

  // Nullish not defined.
  const providerNotDefined = product.provider.notDefined ?? null;

  //Trick: chaining Operator
  const providerAddress = product?.provider?.address;

  //It works with Dynamic properties.
  const propertyName = 'price';
  const productPrice = product?.[propertyName]?.explore;  

Kettenbetreiber Weg

Wenn eine Eigenschaft nicht existiert oder der Wert undefiniert ist, wird undefiniert zurückgegeben, wodurch Ihr Code sauber bleibt. Wenn eine Eigenschaft nicht existiert, wird undefined zurückgegeben. Sehen wir uns an, wie dieser Operator mit demselben Beispielobjekt aussieht:

      //Trick: chaining Operator
  const providerAddress = product?.provider?.address;

  //It works with Dynamic properties.
  const propertyName = 'price';
  const productPrice = product?.[propertyName]?.explore;

  //Works with Functions too.
  const productProviderPrice = product?.provider?.fPrice?.('x');
  //Result: 100;

  const _productProviderPrice = product?.provider?.fPricex?.('x');
  //Result: undefined
    

>NICHT kompatibel mit: Internet Explorer, Firefox für Android, Opera für Android und Samsung Internet Browser.

---

IIFE: Sofort aufgerufener Funktionsausdruck

Es ist eine Funktion, die unmittelbar nach ihrer Definition aufgerufen wird (wie der Name schon sagt).

    let hi = (() => {
  return 'Hello Dear World';
})();
//Define function and parenthesis before the semicolon.

console.log(hi); 
// Result = 'Hello Dear World'
    

---

Funktionsverschlüsse

Kombination von Funktionen gestapelt oder gebündelt mit Zugriff über äußere Schichten oder den Umfang der äußeren Funktionen.

    
    const functionLevelOne = () => {
  let day = 23;

  const functionLevelTwo = () => {
    day += 1;
    return day;
  }

  return functionLevelTwo;
}

console.log(functionLevelOne());
// Result: 24;
// It's calling the return function on level one.

Wann werden Spread-Operatoren verwendet?

Das Zusammenführen von zwei Arrays mithilfe von Spreads kann sich auf die Leistung auswirken, wenn es sich um einen sich wiederholenden Aufruf handelt. Und wenn wir eine Funktion aufrufen, die Argumente wie Spread übergibt, und dieser Aufruf ist häufig. Verwenden Sie ...spread nur, wenn es sich nicht um einen sich wiederholenden Aufruf oder für den Aufruf einer Funktion handelt, aber nicht als Argument-Spread-Definition.

Ich werde diesem Artikel regelmäßig Tricks hinzufügen und aktualisieren.

Suchen und Filtern

• Suchen Sie einen Datensatz für den Schlüsselwert:

    let colors = [
  { id: 0, color: 'Red' },
  { id: 1, color: 'Green' },
  { id: 2, color: 'Blue' }
];
let greenColor = colors.find(color => color.color === 'Green');
    

Datensätze nach ID-Wert filtern

    
    let users = [
  { id: 0, name: 'John Smith' },
  { id: 1, name: 'Mary Smith' },
  { id: 2, name: 'Jane Foster' }
];

let filteredData = data.filter(path => path.includes('Smith'));

Gibt den Namen von Benutzern mit dem Nachnamen 'Smith' zurück.

Iterationen

Iteriere zwischen Schlüssel,Werten für ein Objekt.

    let myObject = { one: 1, two: 2, three: 3 };
Object.keys(myObject).forEach((key, value) => {
  //...do something
  console.log(key, value);
});
    

Grundlegendes zur Ereignisschleife.

Eine Aufgabenwarteschlange wird von Javascript verwendet. Javascript-Aufgaben haben die höchste Priorität. Mikroaufgaben wie Versprechen haben die zweite Prioritätsposition; Dritter Platz für Makroaufgaben, die vor (requestAnimationFrame) oder nach (setTimeout) zum Rendern ausgeführt wurden.

   console.log(1);
Promise.resolve().then(() => console.log(2));
setTimeout(() => console.log(3), 100);
console.log(4);
// 1 -> 4 -> 2 -> 3 
    

Es gibt drei Möglichkeiten, Ihre Callback-Funktion(en) als Ereignis-Callback zum DOM-Element hinzuzufügen.

• InLine (höhere Priorität)

      
  Hello
      
  

• Rückruf binden (mittlere Priorität)

      div.onclick = () => console.log('div');
  

• Ereignis-Listener hinzufügen/entfernen: Unterstützt mehrere Rückrufe, die demselben Ereignis zugeordnet sind. Unterstützt Event-Bubbling und -Erfassung.

      div.addEventListener('click', callbackOne);
  div.removeEventListener(callbackOne);
  

Sprudeln

    

  

    
    
  

//span ? p ? div

Sprudeln: Das innerste Element ? das zweitinnerste Element ? … ? das äußerste Element
Erfassen: Das äußerste Element ? das zweitäußerste Element ? … ? das innerste Element

Die Aufnahme wird früher ausgelöst als das Sprudeln

    div.addEventListener('click', () => console.log('div'));
p.addEventListener('click', () => console.log('p'), { capture: true });
span.addEventListener('click', () => console.log('span'));
//Result: p ? span ? div

div und span verwenden Bubbling und p verwendet Capture.

Veranstaltungsdelegation

Wenn Sie eine Schleifenfunktion mit mehreren Callbacks haben, die sich auf die Leistung auswirkt:

    const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
  const li = document.createElement('li');
  li.textContent = `li-${i}`;
  li.id = `li-${i}`;
  li.addEventListener('click', e => console.log(e.target.id));
  ul.appendChild(li);
}

Delegieren Sie einen Rückruf für alle.

    const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
  const li = document.createElement('li');
  li.textContent = `li-${i}`;
  li.id = `li-${i}`;
  ul.appendChild(li);
}
ul.addEventListener('click', e => console.log(e.target.id));

Ereignisausbreitung

Stop-Propagation stoppt die Propagation, die durch Bubbling oder Capture verwendet wird.

    div.addEventListener('click', () => console.log('div'), true);
p.addEventListener('click', e => {
  e.stopPropagation();
  console.log('p');
});
span.addEventListener('click', () => console.log('span'), true);

Wenn der Benutzer klickt

wird nur 'p' protokolliert.

XMLHttpRequest

Älteste Daten asynchron abrufen

    const oReq = new XMLHttpRequest();
oReq.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
oReq.send();
oReq.addEventListener('load', function () {
  console.log(this.responeText);
});

Bringen

Neuer Weg mit mehr Optionen als XMLHttpRequest, gibt ein Versprechen zurück

    // Promise
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data));
// async & await
const res = await fetch(url);
const data = await res.json();
console.log(data);

Axios

Es braucht das Beste aus XMLHttpRequest und fetch.

    // Promise 
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
// async & await
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}