Ось нові вбудовані методи та функції в JavaScript

За останні кілька років JavaScript вийшов з багатьма новими версіями. Вони внесли нові функції, особливо в синтаксис та його суть. Ці оновлення зробили JavaScript більш читабельним та розумним. Я познайомлю нас з новими методами для масивів, об’єктів та рядків. Ці нові методи можуть обробляти дані елегантно та ефективно, вводячи менше коду. Це те, що ми збираємося пояснити в цій статті.

Методи нових об'єктів

Об’єкт - це те, що робить JavaScript потужною мовою програмування. Об'єкти дозволяють групувати різні типи даних. Якщо ви хочете вивчити будь-який новий фреймворк JavaScript, такий як React, Vue або Angular, ви повинні знати, як користуватися Objects та його методами. Ці фреймворки використовують об'єкти для отримання та обробки вводу користувача. Нові випуски JavaScript приносять нові методи для Об’єктів, які роблять їх більш цікавими. Ось нові методи Object:

object.assign ()

Метод Object.assign () має кілька завдань. Він може копіювати об'єкт, клонувати з іншого об'єкта або об'єднувати два або більше об'єктів.

  • скопіюйте значення з іншого об'єкта:
  • Клонуйте об’єкт у новий об’єкт
  • Крім того, ви можете об'єднати повторювані властивості з Object.assign (), встановивши дві порожні дужки як перший аргумент:

Object.entries ()

Метод Object.entries () повертає ключі та значення об'єкта як масив.

Object.getOwnPropertyDescriptors ()

Object.getOwnPropertyDescriptors дозволяють отримати дескриптор властивостей для об’єкта.

Дуже корисно перевірити властивість дескриптора об’єкта, наприклад, перевірити, чи можна його записувати чи перелічувати.

Нові методи Array

Нові випуски JavaScript надали нові методи для масивів. Ось нові методи масиву:

Array.includes ()

Array.includes () дозволяє нам перевірити, чи існує властивість у масиві. Ви бачите різницю між старим кодом та новим синтаксисом (ES6). Новий метод є коротким і більш читабельним.

Array.find ()

Array.find () допомагає нам знайти елемент у масиві. Як аргумент приймає функцію зворотного виклику. Функція зворотного дзвінка надає більше можливостей для пошуку та вилучення складних даних.

Якщо властивість, яку ми шукаємо, існує, вона повертає знайдене значення. В іншому випадку він повертається невизначеним.

Array.findIndex ()

Array.findIndex () повертає індекс знайденого елемента замість значення.

Array.values ​​()

Цей новий метод повертає ітератор масиву значень, щоб ми могли запустити цикл for для вилучення кожного значення масиву.

Array.entries ()

Array.entries () повертає як ключ, так і значення у форматі Array.

Array.from ()

Array.from () був представлений у випуску ES6. Він може робити кілька речей, запускаючи на даних функцію map (). Він може перетворити рядок у масив або навіть створити новий масив з даних.

Array.keys ()

Як випливає з назви, цей метод повертає ключі масиву.

Нові String методи

Нові випуски JavaScript надали нові String методи. Ось нові String методи:

String.repeat ()

Метод String.repeat () дозволяє повторити рядок.

String.includes ()

String.includes () працює як Array.includes (). Він повертає логічне значення, якщо введене значення існує.

Нові методи Number

Нові випуски JavaScript надали нові методи Number. Ось нові методи Number:

Number.isNaN ()

Цей метод був випущений в оновленні ES6. Він перевіряє передане значення Number і повертає true, якщо значення NaN. В іншому випадку він повертає false. Цей метод натхненний класичною функцією isNAN () у JavaScript.

Number.isInteger ()

Як і попередній метод, Number.isInteger () перевіряє, чи передане значення є цілим чи ні. Він поверне true, якщо значення є цілим числом, і false, якщо це не так.

Number.isSafeInteger ()

Ви завжди можете перевірити введення даних користувачів, щоб переконатися, що це число. Number.isSafeInteger () перевіряє, чи є номер безпечним.

Дізнайтеся більше тут

Number.isFinite ()

Number.isFinite () перевіряє, чи передане значення є кінцевим числом чи ні.

Підтримка браузера

Нові методи Number майже підтримуються основним браузером, за винятком Opera Mini та IE-11. Підтримка показана на зображенні нижче:

Нові конкретні об'єкти

JavaScript постачається з новими специфічними функціями, які дозволяють нам писати більш продуктивний код. Ось нові конкретні об’єктні методи:

Проксі () об’єкт

Проксі - одне з чудових доповнень до JavaScript. Це створює власну поведінку для нашого коду. За допомогою проксі-сервера ви можете обробляти:

  • перевірка даних користувачів
  • корекція даних
  • пошук власності
  • доручення
  • перерахування
  • виклик функції

Перевірте інші способи використання проксі та його методів тут.

Для розуміння проксі ми збираємося написати два приклади.

Приклад 1:

У цьому прикладі ми перевіряємо дані, отримуючи їх від користувача. Ми спробуємо визначити поведінку невизначеної помилки.

Як ви бачите у прикладі вище userInfo.favCar повертається undefined. Що робити, якщо ми хочемо обробити це повідомлення про помилку? Якщо ми хочемо створити власну поведінку для помилки, наприклад, відображаючи інше повідомлення замість невизначеного, ми можемо використовувати Proxy у цьому випадку.

Ми визначили новий проксі-сервер і дали йому два аргументи - об’єкт та обробник. Обробник запускає деякий код перевірки та перевіряє, чи існує властивість в об'єкті. Він повертає властивість, якщо воно існує. В іншому випадку він повертає повідомлення, яке ми визначили, і це називається пошуком властивостей.

Приклад 2:

У цьому прикладі ми створимо перевірку для певного значення в об’єкті, використовуючи метод set .

У цьому прикладі ми можемо перевірити тип даних і повернути нову TypeError (). Це значно полегшує налагодження. Ви можете зрозуміти більше за допомогою цієї корисної статті.

Підтримка браузера

Проксі працює досить добре для всіх основних браузерів, як ви бачите нижче:

Об'єкт Set ()

Об'єкт Set - це нова функція в JavaScript. Це дозволяє нам зберігати унікальні значення. У ньому є маса методів, в які можна грати. Метод Object.add дозволяє додати нову властивість до об’єкта. Object.delete видаляє властивість з об'єкта. Object.clear очищає всі властивості від об’єкта. Наведений нижче приклад пояснює об'єктні методи.

Дізнайтеся більше про об’єкт Set () тут.

Підведенню

Ми щойно розглянули нові вбудовані методи, представлені JavaScript. З цими новими чудовими функціями я більше не використовую старий синтаксис та методи у своєму коді. Нові методи дозволяють витончено писати досвідчений та продуктивний код JavaScript.

Ви також можете переглянути мої статті про новий синтаксис ES6, щоб оновити свої навички роботи з JavaScript.

Ви можете знайти мене в Twitter та Instagram

Попередні статті:

  • JavaScript ES6 - Пишіть менше, робіть більше
  • Дізнайтеся Bootstrap 4 за 30 хв, створивши веб-сайт Landing
  • Angular 6 та його нові функції, все пояснено за три хвилини
  • Як використовувати маршрутизацію у Vue.js, щоб створити кращу взаємодію з користувачем
  • Ось найпопулярніші способи зробити HTTP-запит у JavaScript
  • Дізнайтеся, як створити свою першу програму Angular за 20 хвилин