Сократите свой код с помощью этих лучших советов
Написание более чистого кода JavaScript часто требует сокращения длины вашего кода, что может иметь несколько преимуществ. Во-первых, более короткий код обычно легче читать и понимать, что делает его более удобным для сопровождения и менее подверженным ошибкам. Это особенно важно в командной среде, где несколько человек могут работать над одной кодовой базой. Во-вторых, более короткий код может быть более эффективным как с точки зрения объема занимаемого им пространства, так и с точки зрения времени, необходимого для его выполнения. Наконец, более короткий код может быть более гибким и адаптируемым, поскольку он менее подвержен ненужным деталям и его легче модифицировать в соответствии с меняющимися требованиями. Стремясь писать более короткий код, вы можете улучшить качество и удобство сопровождения своей кодовой базы. Давайте погрузимся!
Стрелочные функции
Стрелочные функции — это более краткий синтаксис для написания функций в JavaScript. Это анонимные функции, которые часто используются вместо обычных функций для написания более короткого и лаконичного кода. Стрелочные функции можно использовать во многих местах, как и обычные функции, в том числе в качестве методов в объектах, в обратных вызовах и даже в качестве генераторов. Некоторые из ключевых особенностей стрелочных функций включают в себя тот факт, что они не имеют собственного значения this, их нельзя использовать в качестве конструкторов и у них нет свойства прототипа. Кроме того, стрелочные функции могут быть написаны в «лексическом» стиле, что означает, что они наследуют значение this окружающего контекста. Это может сделать их особенно полезными для написания функций обратного вызова. Например, вы можете использовать стрелочную функцию следующим образом:
const numbers = [1, 2, 3, 4, 5];
// Previously we had to write functions like this
const squareNumbers = numbers.map(function(x) {
return x * x;
});
// we begin by changing the function keyword to an
// arrow by removing the function keyword and adding
// the "fat arrow" syntax with equals and greater than
const squareNumbers = numbers.map((x) => {
return x * x;
});
// we can remove the parentheses around x if there is only one parameter
const squareNumbers = numbers.map(x => {
return x * x;
});
// we can remove the curly braces and the return keyword if the function
// body is a single expression
const squareNumbers = numbers.map(x => x * x);
// We can also access any item in the array by adding the
// index at the end of the statement
const squareNumbers = numbers.map(x => x * x)[0];
// All of these functions are equivalent and will return the same result
console.log(squareNumbers); // [1, 4, 9, 16, 25]
В целом, стрелочные функции — это мощный и полезный инструмент для написания лаконичного и элегантного кода на JavaScript.
Разрушение
В JavaScript деструктуризация — это функция, позволяющая легко извлекать значения из массивов или объектов и присваивать их переменным. Это удобный способ создания переменных из массива или свойств объекта, который может помочь вам написать более лаконичный и читаемый код. Например, допустим, у вас есть массив с двумя элементами, и вы хотите создать две переменные из этих элементов. Вы можете сделать это, используя деструктурирование следующим образом:
const numbers = [1, 2]; const [first, second] = numbers; console.log(first); // Output: 1 console.log(second); // Output: 2
Это можно сделать и с предметами. Например, допустим, у вас есть объект с двумя свойствами, и вы хотите создать две переменные из этих свойств. Вы можете сделать это, используя деструктурирование следующим образом:
const person = {
name: "John",
age: 30
};
const { name, age } = person;
console.log(name); // Output: "John"
console.log(age); // Output: 30
Деструктуризация — это мощная и удобная функция JavaScript, которая может сделать ваш код более читабельным и простым в написании.
Сокращение значения свойства
Сокращение значения свойства — это функция JavaScript, которая позволяет создавать объект из набора переменных с тем же именем, что и свойства объекта. Это удобный способ написать более лаконичный и читаемый код, если вы хотите создать объект из набора переменных.
Например, допустим, у вас есть две переменные, name и age, и вы хотите создать объект из этих переменных. Вы можете сделать это, используя сокращение свойства-значения, например:
const name = "John";
const age = 30;
const person = { name, age };
console.log(person); // Output: { name: "John", age: 30 }
Как видите, это гораздо более лаконично и читабельно, чем альтернатива, которая заключалась бы в записи объекта следующим образом:
const person = {
name: name,
age: age
};
Сокращение значения свойства может быть очень полезным при работе с объектами и может помочь вам написать более краткий и читаемый код. Эта функция особенно полезна при работе с большими и сложными структурами данных.
Строки шаблона
В JavaScript шаблонные строки — это способ создания строковых литералов, которые могут охватывать несколько строк текста и включать встроенные выражения. Эти строки разделяются обратными кавычками (`), а не одинарными или двойными кавычками, которые обычно используются в JavaScript.
Вот пример строки шаблона:
const name = "John Doe";
const message = `Hello, ${name}!`;
Как видите, строка шаблона включает заполнитель ${name}, который будет заменен значением переменной name при оценке строки. Это позволяет создавать динамические строки, которые могут включать значения переменных и выражений.
Строки шаблона также поддерживают интерполяцию строк, что позволяет включать результат выражения непосредственно в строку. Например:
const x = 10;
const y = 20;
const message = `The sum of x and y is ${x + y}.`;
В этом случае заполнитель ${x + y} будет заменен результатом выражения x + y, равным 30. Это может быть удобным способом включения сложных выражений в ваши строки без необходимости объединения нескольких строк вместе.
Как видите, эта строка включает в себя разрывы строк и несколько строк текста, но все еще содержится в одной строке. Когда строка вычисляется, разрывы строк и пробелы сохраняются, что позволяет создавать более читаемые и удобные для форматирования строки. Это пример многострочного сообщения:
const message = `This is a multiline template string. It can span multiple lines and include line breaks.`;
В целом строки шаблона обеспечивают более читаемый и удобный способ создания строк в JavaScript, особенно при работе со сложными выражениями или многострочными строками.
Оператор спреда
Оператор распространения в JavaScript позволяет вам разложить массив или объект на его отдельные элементы. Например, если у вас есть массив с именем myArray и вы хотите добавить его элементы в другой массив с именем newArray, вы можете использовать оператор расширения, чтобы сделать это следующим образом:
const myArray = [1, 2, 3]; const newArray = [4, 5, 6]; newArray = [...myArray, ...newArray];
Это добавит элементы myArray к началу newArray, в результате чего newArray будет содержать элементы [1, 2, 3, 4, 5, 6]. Оператор распространения также может использоваться для расширения объектов аналогичным образом.
Вот пример использования оператора распространения для объединения двух объектов:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
Это приведет к тому, что mergedObj будет содержать ключи и значения как obj1, так и obj2, поэтому он будет иметь свойства a, b, c и d.
Вот некоторые другие вещи, которые вы можете сделать с оператором распространения:
Вы можете использовать его для создания поверхностной копии массива или объекта. Это означает, что вы можете создать новый массив или объект, содержащий те же элементы или свойства, что и исходный, но изменения в новом массиве или объекте не повлияют на исходный. Например:
const myArray = [1, 2, 3]; const copyOfArray = [...myArray]; // changes to copyOfArray won't affect myArray copyOfArray.push(4);
Вы можете использовать оператор распространения для передачи элементов массива в качестве отдельных аргументов функции. Часто это удобнее, чем передавать весь массив в качестве одного аргумента. Например:
const myArray = [1, 2, 3]; // instead of calling the function like this: myFunction(myArray); // you can use the spread operator to call it like this: myFunction(...myArray);
Вы можете использовать оператор расширения для преобразования строки в массив символов. Например:
const myString = 'hello'; const myArray = [...myString]; // myArray will be ['h', 'e', 'l', 'l', 'o']
Это всего лишь несколько примеров того, что вы можете делать с оператором спреда. Это очень универсальный инструмент, который может сделать ваш код более кратким и читабельным.
Мы обсудили несколько возможностей современного JavaScript, которые могут сделать ваш код более кратким и читабельным. Эти функции включают функции стрелок, которые обеспечивают компактный синтаксис для определения функций; деструктуризация, позволяющая извлекать значения из массивов или объектов и присваивать их переменным; сокращенное обозначение значения свойства, которое позволяет создавать объекты, указывая их свойства и значения без повторения имен свойств; шаблонные строки, упрощающие создание строковых литералов, включающих динамические выражения; и оператор расширения, который позволяет вам разложить массив или объект на его отдельные элементы. Удачного кодирования!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
