Продвинутый Javascript 02

Заметки для облегчения изучения JS.

Быстрый совет |
🔹Найдите ⚡ для каждой темы
🔹Найдите мем😆 в конце каждой темы

☘️Directory

• ES2019 - общие методы
• ES2019 - циклы For и многое другое
• ES2020-globalThis
• ES2021-replaceAll
• ES2022-at

Добрый resources🌳
ZeroToMastery | Javascript - продвинутая концепция
Все коды в моем Github | Advanced JS

Перед началом,

Чтобы понять ECMAScript.
Проверьте это | StackOverflow

Версия Javascript

Загляните сюда | W3Schools

⚡ES10

Также известен как ES2019.

🔸 плоский

Метод flat() создает новый массив со всеми элементами подмассива, конкатенированными в него рекурсивно до заданной глубины. - MDN

• Подробнее о flat | MDN
• Подробнее | W3Schools

Но если в массиве есть вложенные массивы,

Поэтому, чтобы сгладить все вложенные массивы, нужно сделать следующее.

Чем больше число(параметр), тем больше массивов сплющивается. Уплощается ужасно вложенный вложенный массив.

const a = [['A', ['B', ['C', ['D', ['E']]]], 'F'], 'G', 'H', [[[[['I'], 'J'], 'K'], ['L']], ['M']], 'N']

print(a.flat(50))

🔸flatmap

= flat + map, что означает, что этот метод может расплющить массив и отобразить результат на каждый элемент массива.

/* Example from MDN */
const arr1 = [1, 2, 1];

const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));

console.info(result);

🔸trimStart() & trimEnd()

🔸Object.fromEntries()

Больше в MDN

🔸Object.entries()

Подробнее об этом | MDN

🔸try & catch

Оператор try-catch сначала выполняется в блоке try, а если он выбрасывает исключение, то выполняется в блоке catch.

Больше в MDN
Больше в W3Schools

Существует также блок под названием "наконец-то".

🔸Finally

Блок finally всегда будет выполняться до того, как поток управления выйдет из конструкции try...catch...finally. Он выполняется всегда, независимо от того, было ли выброшено или поймано исключение. - MDN

• try...catch
• try...finally
• try...catch...finally

⚡For Loops

Разберитесь в различных типах циклов For Loop.

Больше примеров в | W3Schools

🔸Базовый цикл for

const a = ['A', 'B', 'C']

for (let i = 0; i < a.length; i++) {
  console.info(a[i])
}

🔹Basic for loop of nested array

const a = [['A', ['B', ['C', ['D', ['E']]]], 'F'], 
            'G', 'H', [[[[['I'], 'J'], 'K'], ['L']], 
            ['M']], 'N']

for (let i = 0; i < a.length; i++) {
  console.info(a[i])
}

🔸foreach

const ba = ['A', 'B', 'C', 'D', 'E', 'F', 'G',
            'H', 'I', 'J', 'K', 'L', 'M', 'N']


// foreach
ba.forEach(item => {
  console.info(item);
})

🔸for of

Больше об итерациях | JS info

Мы можем итерировать - массивы, строки (итерабельные) 🤯

const a = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']

for (i of a) {
  console.info(i)
}

🔸for in

Оператор for...in полезен для итерации по свойствам объектов, но для итерации по итерируемым объектам, таким как массивы и строки , мы можем использовать оператор for...of.  - Digital Ocean .

const a = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N']

for (i in a) {
  console.info(i)
}

Почему на этот раз он показывает мне индексы?

Больше в DigitalOcean | For Loops, For...Of Loops и For...In Loops в JavaScript

Если мы дадим для... в цикле объект,

a = { fname: "John", lname: "Doe", age: 25 };

for (i in a) {
  console.info(i)
}

Он даст нам свойства.

Если мы попытаемся "итерировать объект" с помощью for...цикла,

a = { fname: "Alice", lname: "Bingum", age: 18 };

for (i of a) {
  console.info(i)
}

Он выдаст нам ошибку ❗

Потому что объект a не является итерируемым.

🔸Подведем итоги

🔹Используйте цикл for...in для перечисления объектов в Javascript.

🔹Используйте цикл for...if для перебора итераций (массив, строка).

Хотя мы можем использовать foreach или Object.keys() для перечисления объектов, все же полезно понимать разницу между ними.

⚡ES2020

Мы собираемся обсудить

🔹BigInt

🔹Nullish coalescing operator (??)

🔹Опциональный оператор цепочки

🔹Promise.allSettled

🔹globalThis

Приступаем!

🔸BigInt

Переменные JavaScript BigInt используются для хранения больших целых значений, которые слишком велики, чтобы быть представленными обычным JavaScript числом. - W3Schools

🔹Для упрощения, значение больше, чем Number.MAX_SAFE_INTEGER (9007199254740991).

🔹Целые числа в JavaScript имеют точность только до 15 цифр.  - W3Schools

const a = 9999999999999999;
const b = BigInt("9999999999999999");

console.info(a)
console.info(b)

🔸BigInt операторы n

Вы также можете использовать обычное число с n, чтобы выразить его как BigInt.

1n + 2n

🔸Оператор цепочки .?

Больше в MDN

🔹Синтаксис - MDN

Obj.val?.prop

Obj.val?.[expr]

Obj.func?.(args)

🔹 Базовое использование

const Alice = {
    pet: {
      'name':'Cindy'
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

  const c = Alice.pet?.name;
  console.info(c)

Вы также можете использовать его для функции.

const Alice = {
  pet: 'Cat',
  call() {
    console.info('Meowwww!')
  }
}

const Bob = {
  pet: 'Dog',
  greet() {
    console.info('Woooof!!')
  }
}

a = Alice.pet
console.info(a)

b = Bob.pet
console.info(b)

c= Alice.call?.name
console.info(c)

Зачем нам нужен оператор цепочки ❔❓

Посмотрите на приведенный ниже пример.

Обычно для оператора if-else мы должны использовать такой код.

const Alice = {
    pet: {
      'name':'Cindy'
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

if (Bob.pet && Bob.pet.name){
  let petName = Bob.pet.name;
  console.info(petName)
} else{
  let petName = undefined
  console.info(petName)
}

Если мы используем оператор цепочки, это будет проще.

const Alice = {
    pet: {
      'name':'Cindy'
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

let petName = Bob?.pet?.name

console.info(petName)

🔸Nullish coalescing operator ??

Подробнее в MDN | Nullish coalescing operator (??)

Нулевой или неопределенный

Не ложный или истинный

(null || undefined) ?? "foo"; // returns "foo"

Мы можем сравнить Nullish coalescing operator с Logical OR (||).

🔹Логический оператор OR

Оператор OR возвращает булево значение или значение, если одно из выражений истинно.

const a = 5;
const b = -3;

console.info(a < 0 || b < 0); # True

const Alice = {
    pet: {
      'name':'' // Notice empty string here ❗
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

let a = Alice?.pet?.name || 'No Name'
console.info(a)

Левое выражение возвращает пустую строку, которая оценивается как FALSE.❌

Таким образом, в итоге a возвращает правое выражение.

🔹 Нулевой оператор коалесценции

const Alice = {
    pet: {
      'name':''
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

let a = Alice?.pet?.name ?? 'No Name'
console.info(a)

const Alice = {
    pet: {
      'name':'Molly'
    },
    call() {
      console.info('Meowwww!')
    }
  }
  
  const Bob = {
    pet:{ 'name':'Elliot '},
    greet() {
      console.info('Woooof!!')
    }
  }

let a = Alice?.pet?.name ?? 'No Name'
console.info(a)

Он возвращает все, что есть, даже пустую строку.

Другой пример из MDN

const nullValue = null;
const emptyText=""; // falsy
const someNumber = 42;
let foo; // never set value = undefined

const a = nullValue ?? "default for A";
const b = emptyText ?? "default for B";
const c = someNumber ?? 0;

const d = foo || "Hello!";

console.info(a); 
console.info(b); 
console.info(c); 
console.info(d);

Комбинация логического оператора и нулевого коалесцирующего оператора недействительна ❌

Примеры из MDN.

// ❌❌❌❌❌
null || undefined ?? "foo"; // raises a SyntaxError
true && undefined ?? "foo"; // raises a SyntaxError

// ✅✅✅
(null || undefined) ?? "foo"; // returns "foo"

🔸globalThis

Больше в StackOverflow

В веб вы можете использовать window, self или frames - но в Web Workers будет работать только self. В Node.js ни один из них не работает, и вы должны вместо этого использовать global.  - StackOverflow

В node.js(> v.14), window не определено, мы получим ошибку.

В ES2020 хотят унифицировать разные платформы вне браузера, поэтому выходит globalThis для каждой из них может получить доступ.

⚡ES2021

🔸replaceAll

🔹 Синтаксис - replaceAll(pattern, replacement)

const a = 'Solitude is a silent storm that breaks down all out dead branches.
           Raging storm outside my window, there will be storm at last, storm,
           glorious storm … storm at last, storm, glorious storm’, 
           but really the whole thing is wildly turbulent.'

const b = a.replaceAll('storm', 'typhoon')
console.info(b)

В нем может быть использовано регулярное выражение.

🔹 Шпаргалка по регексам

const a = 'Solitude is a silent storm that breaks down all out dead branches.
           Raging storm outside my window, there will be storm at last, storm,
           glorious storm … storm at last, storm, glorious storm', 
           but really the whole thing is wildly turbulent.'

const regex = /storm/ig;
console.info(a.replaceAll(regex, 'typhoon'));

🔸at

Пример в LogRocket

Используйте индекс для поиска элемента в массиве.

const a = [1, 2, "three", 4, 5, true, false];

console.info(a.at(3))
console.info(a.at(-3))
console.info(a.at(a.length - 1))