Существует множество браузеров с разными языками сценариев. Одним из них является JScript от Microsoft. Как веб-разработчики, мы должны убедиться, что разработанный нами скрипт сможет работать в этих браузерах. EcmaScript (обычно сокращенно ES) был создан, чтобы сделать язык стандартом для многих различных языков сценариев, поэтому веб-страницы, написанные на ES, могут правильно работать в различных типах существующих браузеров.

ES — это стандарт написания кода или спецификации языка в Ecma-262, созданный Ecma International. Ecma International — организация, занимающаяся разработкой стандартов для информационных и коммуникационных систем и технологий, а Ecma-262 создан специально для скриптовых языков. ES обновляется (почти) каждый год. Первая версия EcmaScript, ES1, была выпущена в 1997 году и продолжала развиваться в ES6 в 2015 году. После ES6 название версии ES было изменено в зависимости от года ее выпуска. Не удивляйтесь, если вы прочтете где-нибудь в Интернете слова «ES6 или ES2015», потому что они относятся к одной и той же версии ES. На сегодняшний день последней версией является ES2021.

Каждая версия ES приносит новые функции кода, а также улучшает ранее существовавшие функции. Это может помочь разработчику писать код проще и эффективнее. В этой статье я попытаюсь обобщить некоторые полезные функции, которые мы можем получить от ES6 до ES2021. Все эти функции позволят вам работать более эффективно. Держите большой палец, прокручивая экран вниз, чтобы узнать о них больше!

А. Экмаскрипт 6

ES6, безусловно, является самым большим улучшением JS с 1996 года. Он был представлен в 2015 году. В этой версии есть много функций, таких как деструктуризация, оператор распространения, параметр rest, параметр по умолчанию, литералы шаблонов, стрелочные функции и цикл for…of. .

1. … Оператор

Мы можем использовать оператор … двумя способами:

а. Оператор спреда

Оператор распространения можно использовать для копирования массива или объекта путем их объединения или деструктурирования. В приведенном ниже примере показано, как объединить два массива с помощью оператора распространения.

const groupOne = ['Niragi', 'Chisiya', 'Arisu']
const groupTwo = ['Ann', 'Usagi', 'Kuina']

const combineGroup = [...groupOne, ...groupTwo]

В приведенном выше примере мы видим массив, содержащий некоторые значения, такие как «Нираги», «Чисия» и «Арису», а другой содержит значение «Энн», «Усаги» и «Куина». Мы объединим значения в обоих массивах в один с помощью оператора распространения. Вывод будет таким:

Niragi, Chisiya, Arisu, Ann, Usagi, Kuina

В процессе копирования массива или объекта с помощью оператора распространения в фоновом режиме происходят два процесса на основе следующих условий:

1. Глубокое копирование всего объекта/массива для тех, у которых нет вложенного элемента.

2. Если объект/массив имеет вложенные элементы, сначала выполняется глубокое копирование самого внешнего элемента, а затем поверхностное копированиевложенных элементов.

Мы также можем использовать оператор распространения для деструктуризации массива. В приведенном ниже примере у нас есть массив чисел. Мы хотим скопировать его и деструктурировать данные «1» и «2»… но пусть остальные будут. Мы можем использовать номер спреда, и результат будет таким:

const numbers = [1, 2, 3, 4, 5, 6]
const [one, two, ...rest] = numbers

// output:
// one : 1
// two : 2
// rest : 3,4,5,6

б. Остаточный параметр функции

Иногда создавать различные функции, а затем определять каждый параметр вручную, вводя их один за другим, кажется таким скучным. Вы когда-нибудь задумывались, можете ли вы работать более эффективно, используя функцию остаточный параметр, которая есть в ES6 и более поздних версиях, для создания функции с динамическим количеством параметров? Синтаксис остальных параметров позволяет функции принимать неопределенное количество аргументов в виде массива и предоставляет способ представления функции с переменным числом аргументов в JS. Это означает, что вам не нужно переписывать свой код вручную снова и снова.

Вот пример того, насколько эффективно использование параметра rest. До ES6 вам нужно было написать несколько функций для выполнения одной и той же задачи, как показано ниже:

function firstFunc(param) {
    // do some task...
}
function secondFunc(param1, param2) {
    // do some task...
}
function thirdFunc(param1, param2, param3) {
    // do some task...
}

Это пустая трата времени, особенно когда у вас огромное количество или неопределенное количество параметров, не так ли? Используя ES6, вы можете использовать оператор…, чтобы упростить свою работу, компилируя огромное количество параметров в функцию. Просто напишите параметр следующим образом:

function myDynamicFunction(...params) {
    console.log(params.length)
}

myDynamicFunction(100, 23, 97, 'Clinton', 0.5, 'Thomas')
// output: 6

2. Цикл for-of

Цикл For-of позволяет нам перебирать итерируемую структуру данных, такую ​​как массивы, строки, карты, списки узлов и т. д.

Предположим, у нас есть эта итерируемая структура данных (в виде массива):

const names = ['Alexander', 'Trent', 'Arnold']

Давайте возьмем пример, мы хотим преобразовать этот массив в строку. Без использования цикла For-of мы напишем код с использованием обычного цикла For:

let fullName = ''
for(let i = 0; i < names.length; i++) {
    fullName += names[i] + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

Используя цикл For-of, он будет более простым и читаемым:

let fullName = ''
for(let name of names) {
    fullName += name + ' '
}

console.log(fullName)
// output : Alexander Trent Arnold

3. Метод include()

Метод includes() — это новый метод в ES6, позволяющий определить, содержит ли строка определенное значение. Если значение найдено, вывод будет true, а если не найден, вывод будет false.

const sentence = "Some of popular Javascript frameworks are React, Vue, Angular, and Svelte"
console.log(sentence.includes('React'))

// output: true

Метод includes() можно использовать не только для строк, но и в таком массиве:

const frameworks = ['React', 'Vue', 'Svelte', 'Angular']
console.log(frameworks.includes('React'))

// output: true

Примечание.

Метод includes() чувствителен к регистру. Поэтому, если мы напишем 'react' вместо 'React' в коде, вывод будет false.

4. Метод поиска() массива

Метод Array find() — еще один новый метод в ES6. Мы можем использовать его для поиска первого элемента в массиве, который соответствует определенному условию. Этот метод принимает функцию только в качестве параметра. В приведенном ниже примере мы хотим найти некоторые элементы в массиве со значениями больше 30. Было найдено два значения, это 37 и 98. Но мы берем только первый элемент.

const numbers = [10, 25, 37, 4, 98]
let first = numbers.find((value, index) => {
    return value > 30
})

console.log(first);
// output : 37

5. Метод массива findIndex()

В отличие от метода find(), метод findIndex() возвращает только номер индекса элемента в массиве, а не значение. Посмотрите на пример кода ниже. У нас есть параметр для значения меньше ‹10. Найдено только одно значение, это «4». На выходе будет показан номер индекса.

const numbers = [10, 25, 37, 4, 98]
let getIndex = numbers.findIndex((value, index) => {
    return value < 10
})

console.log(getIndex);
// output : 3

Помните, что языки программирования считают все, начиная с 0, поэтому в приведенном выше примере возвращается 3.

Б. Экмаскрипт 2017

6. Объект.записи()

Функция Object.entries() просто создаст копию итерируемого объекта (не вложенного объекта) и превратит его в двумерный массив JS. Каждый подмассив двумерного массива JS содержит пару ключей и значений объекта. Это пример итерируемого объекта, который мы хотим преобразовать в двумерный массив JS. В этом случае мы хотим скопировать ключ «имя» и пару значений «Лионель Месси» в новый массив, используя метод Object.entries().

const player = {
  name: 'Lionel Messi',
  nationality: 'Argentina',
  club: 'Paris Saint Germain',
  backNumber: 30
}

let playerArr = Object.entries(player)

Вывод будет таким:

[
    [
        "name",
        "Lionel Messi"
    ],
    [
        "nationality",
        "Argentina"
    ],
    [
        "club",
        "Paris Saint Germain"
    ],
    [
        "backNumber",
        30
    ]
]

С. Экмаскрипт 2019

7. Объект.fromEntries()

Если Object.entries() преобразует объект в двумерный массив, Object.fromEntries() делает иначе. Он преобразует двумерный массив в объект. Посмотрите на код ниже. Это пример двумерного массива, который мы хотим преобразовать в объект, поместив Object.fromEntries().

const cars = [
  ["ferrari", 5600],
  ["audi", 7200],
  ["bugatti", 9800]
]

let carsObj = Object.fromEntries(cars)

Вывод carsObj будет таким:

{ferrari: 5600, audi: 7200, bugatti: 9800}

Легко, не так ли? Отныне нам не нужно создавать функцию вручную только для преобразования массива в объект.

​Совет для профессионалов. Вы можете использовать эту функцию для печати того, что содержит formData.

8. Плоский массив()

Я могу сказать, что метод flat() преобразует двумерный массив в одномерный. Этот процесс похож на «выравнивание» массива. Вот почему он называется методом flat(). По сути, его можно использовать для объединения некоторых групп данных в одну большую. В приведенном ниже примере у нас есть три группы данных. Мы используем метод flat() для объединения данных в массивах.

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();
// output : [1, 2, 3, 4, 5, 6]

Д. ЭкмаСкрипт 2020

9. Нулевой оператор объединения (??)

Вы когда-нибудь пробовали (или хотя бы слышали) о тернарном операторе Javascript? Если нет, то прочтите статью здесь, прежде чем продолжить чтение.

Прочитав статью, вы уже знаете, что использование тернарного оператора уже сэкономило ваше время и сократило некоторые строки кода. Но что, если мы выполним это условие?

let someVar = obj['a_long_object_key_name'] ? obj['a_long_object_key_name'] : 'Default Value'

Несмотря на то, что мы уже используем тернарный оператор, написанный здесь код менее эффективен и менее читаем. Мы можем использовать оператор ??, чтобы сделать его проще. Теоретически это похоже на тернарный оператор, но он будет напрямую возвращать сам первый аргумент, если он не нулевой (состояние, когда переменная имеет неопределенное или нулевое значение). Я приведу вам пример, чтобы увидеть, как вы собираетесь его использовать.

let someVar = obj['a_long_object_key_name'] ?? 'Default Value'

Здесь, используя нулевой оператор объединения, мы избегаем повторной записи одного и того же «длинного» ключа объекта. Технически он будет делать то же самое, что и предыдущий пример, но более читабельно. Это круто, не так ли?

10. Необязательный оператор цепочки (?.)

Иногда мы сталкиваемся с проблемой, когда динамическая переменная возвращает nullish. В результате переменная определяется как ошибка, и программа перестает работать. Необязательный оператор цепочки (?.) возвращает ошибку как неопределенную. В приведенном ниже примере мы собираемся получить столбец ввода, но предположим, что элемент ввода не существует.

// assume the input element doesn't exist, so it will be undefined
const inputNotes = $('#imaginary_input');
const inputLength = inputNotes.val().length

Здесь мы используем цепочку методов, чтобы сначала получить значение из переменной inputNotes. После этого считаем длину входного значения. Но в процессе получения данных мы не можем найти ввод или ввод не существует. В результате произошла ошибка, потому что мы не можем получить значение несуществующего элемента ввода и выполнение кода остановлено. Здесь мы можем использовать оператор ?. после имени переменной (или ключа объекта), чтобы проверить, является ли оно нулевым или нет.

Используя необязательный оператор цепочки, он не будет продолжать цепочку методов, когда переменная равна нулю. Вместо того, чтобы выдавать ошибку, он напрямую назначит ее в ‘undefined’ переменной inputLength, и выполнение кода продолжится (не остановлено). Посмотрите на изображение ниже для более четкого представления:

Д. ЭкмаСкрипт 2021

11. Строка replaceAll()

Ранее в Javascript уже была функция replace(). К сожалению, его нельзя использовать для нескольких одинаковых значений. Он заменяет только первое совпадающее значение, поэтому нам нужно использовать его повторно, чтобы заменить несколько одинаковых слов (одно за другим).

Посмотрите на пример ниже:

Хорошая новость заключается в том, что ES2021 дает вам решение, добавляя функцию replaceAll(). С помощью этой функции мы можем заменить все совпадающие значения одновременно.

Замена вещей теперь быстрее и проще, не так ли?

12. Числовые разделители

Последняя функция, которую мы обсуждаем в этой статье, — это числовые разделители. Эта функция даст людям преимущество в чтении длинных и больших чисел в вашем коде. Раньше нам приходилось писать длинные числа без разделения вот так:

const reallyBigNumber = 10000000000

Без запятых или точек разработчикам будет немного сложно прочитать значение. В ES2021 есть функция, позволяющая использовать знак подчеркивания (_) для разделения числа. Мы можем поместить его внутрь, чтобы он был более удобочитаемым для людей.

Пример:

const reallyBigNumber = 10_000_000_000

Javascript рассматривает это подчеркивание как обычное число, когда вы его используете или распечатываете.

Заключение

Каждое обновление версии EcmaScript всегда приносит новые интересные и полезные функции, облегчающие и повышающие эффективность работы разработчиков с кодом и обработкой данных. Важно помнить, что мы должны постоянно обновлять наши знания и информацию о том, что там происходит. Продолжайте учиться, продолжайте практиковаться и становитесь лучше с каждым днем.