8 советов и рекомендаций для разработчиков JavaScript

8 советов и рекомендаций для разработчиков JavaScript Изучение

Статистически доказано, что JavaScript является наиболее широко используемым языком программистов во всем мире. Одной из наиболее важных причин этого является то, что он удобен для разработчиков. Недавнее исследование показало, что число разработчиков JavaScript резко возросло за последние 4 года, и в настоящее время из 1,8 миллиарда веб-сайтов 95% работают с JavaScript. Помимо популярности новейших инструментов и методологий, JavaScript удалось сохранить 4-е место по популярности.

Разработчики нашли суперкрутые приемы и советы, которые облегчают работу и делают процесс кодирования беспроблемным. Но, будучи разработчиком, вы должны знать простые советы и приемы для работы над любым проектом, соблюдая правила гигиены. Во-первых, давайте поймем, почему Javascript очень требователен в глобальном масштабе.

Почему JavaScript предпочтительнее во всем мире?

Разработчики JavaScript не только имеют больше возможностей для создания приложений с полным стеком с использованием одного языка, но также имеют различные преимущества при написании кода на JavaScript, помимо его полной поддержки от сервера до клиентской стороны, от внешнего интерфейса до внутреннего интерфейса все может быть обработано отдельно с помощью помощью JavaScript.

Эти предложения не только улучшат ваши навыки кодирования, но и сделают ваши приложения более быстрыми и удобными для пользователя.

Теперь мы обсудим 8 советов и приемов по улучшению вашего программирования на JavaScript, которые помогут сэкономить время и улучшить качество кода.

8 советов и рекомендаций для разработчиков JavaScript

1. Для сравнения лучше использовать тройное равенство (===) вместо двойного равенства (==)

Double Equals (==) проверяет свободно, т.е. автоматически преобразует тип данных везде, где это необходимо. В то время как тройка равна (===) строго проверяет равенство, т.е. проверяет и значение, и тип данных. Таким образом, мы всегда должны использовать тройное равенство для сравнения двух объектов.

Читайте также:  10 распространенных уязвимостей безопасности веб-приложений и способы их предотвращения

Javascript

// is false, because it checks the
// datatype of both LHS and RHS
[1] === 1  
 
// is true, because it typecasts the 
// left value, which is 1, equal to RHS.
[1] == 1     
 
// is false, because LHS is a
// character while RHS is a Int.
'2' === 2     
 
// is true, due to 
// the typecasting. 
'2' == 2    
 
'undefined'=='undefined' // is true
'undefined' === 'undefined' // is true
 
0 == false  // is true
0 === false // is false
  • Двойное равенство (==) также называется приблизительно равным. Он выполняет преобразования типов при сравнении двух вещей.
  • Тройное равенство (===) также называется строго равным. Поскольку он не печатает конверсии при сравнении двух вещей.

2. Используйте SET для получения уникальных значений

В заданном массиве в JavaScript (версия ES6), если в нем есть повторяющиеся значения и мы хотим получить все уникальные значения, мы можем сохранить этот массив в объекте SET, который представлен в версии ES6.

Javascript

// arr is the array with duplicate integers
const arr = [10,10,20,20,30];
// Now store this array in a set called new_arr 
const new_arr = [...new Set(arr)];
 
// Print the new_arr
console.log(new_arr); // Result: [10, 20, 30]

Выход:

[10, 20, 30]

Без Set тот же процесс занимает много времени. Мы должны перебирать массив и сохранять уникальные элементы в новом объекте один за другим.

3. Прямые операции в Console.log()

Мы можем напрямую выполнять операции с самим console.log(). Нам не нужно сначала вычислять, прежде чем печатать его в консоли. Он может выполнять сложение, вычитание, умножение, деление, возведение в степень, приращение, уменьшение и логические операции на самой консоли.

Javascript

var a = 10;   
var b = 20;  
 
// Addition 
console.log("Addition of a and b: " + (a + b) );        
// Subtraction
console.log("Subtraction: " + (a - b) );   
// Multiplication
console.log("Multiplication between a and b: " + (a * b) );  
// Division
console.log("The Quotient will be: " + (b / a) );  
// Modulo, when a is divided by b
console.log((a % b));
// pre-increment   
console.log("Value of a after pre-increment: "  + (++a) );
// post-increment   
console.log("Value of a after post-increment: " + (a++) ); 
// pre-decrement   
console.log("Value of b after pre-decrement: "  + (--b) ); 
// post-decrement   
console.log("Value of b after post-decrement: " + (b--) );  
// Exponentiation
console.log("2 raise to the power 3: " + (2**3);

Выход:

Addition of a and b: 30
Subtraction : -10
Multiplication between a and b: 200
The Quotient will be: 2 
The Modulo when b is divided with a: 10
Value of a after pre-increment: 11
Value of a after post-increment: 11
Value of b after pre-decrement: 19
Value of b after post-decrement: 19
2 raise to the power 3: 8

4. Уменьшить длину массива

Длину массива можно уменьшить с помощью функции длины ( array.length ).

Предположим, есть массив размером 10. И вам нужны первые k элементов, где (k < 10) массива. Мы можем уменьшить длину массива, чтобы получить массив уменьшенного размера.

Например:

Array: [ 11, 12, 122, 133, 152], size= 4;

И нам нужен массив размером 2. Следовательно, массив будет: [ 11,12 ].

Javascript

var array = [1, 2, 5, 78, 98]
console.log("The array of size ",array.length)
// size of the array is 4
array.length=4;
console.log("The array of size ", array.length,"is :",array) 
 
// size of the array is 3
array.length=3;
console.log("The array of size ", array.length,"is :",array)
 
//size of the array is 2
array.length=2; 
console.log("The array of size ", array.length,"is :",array)

Выход

The array of size  5
The array of size  4 is : [ 1, 2, 5, 78 ]
The array of size  3 is : [ 1, 2, 5 ]
The array of size  2 is : [ 1, 2 ]

5. Используйте «Срез», чтобы получить выбранные элементы в массиве.

Метод Slice используется в массивах для получения выбранных элементов из массива. Он возвращает новый массив, содержащий выбранные элементы, но исходный массив остается неизменным.

Синтаксис:

 array.slice(start, end)

Он принимает два параметра.

Первый — это start, значение которого по умолчанию равно 0, и он может принимать как отрицательные, так и положительные массивы. Положительные значения начинаются с начала массива, а отрицательные — с конца массива.

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

Javascript

const name = ["GFG", "GEEK", "geek", "GEEKSFGEEKS", "gfg"];
const name11 = name.slice(1, 2);
console.log(name11)
const name1 = name.slice(1, 3);
console.log(name1)
const name2 = name.slice(-2,-1);
console.log(name2)
const name3 = name.slice(-1);
console.log(name3)

Выход

[ 'GEEK' ]
[ 'GEEK', 'geek' ]
[ 'GEEKSFGEEKS' ]
[ 'gfg' ]

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

Помнить? Копирование массива A в массив B индекс за индексом. Этот беспокойный и медленный процесс преобразуется в очень простую и одноэтапную операцию с использованием оператора Spread. Оператор Spread позволяет нам копировать итерируемый объект и распространять его на другой аналогичный объект. Он копирует свойства существующего объекта в другой.

Оператор распространения в JavaScript можно использовать в трех местах:

  • О работе с массивом:Предположим, у нас есть массив, и вам нужно изменить ключ в нем в определенной позиции. Эту задачу легко решить с помощью оператора use Spread.
  • В списке аргументов функции:Всякий раз, когда в функции есть несколько аргументов, мы можем вызывать их все, сокращая синтаксис аргумента.
  • Литерал объекта:Всякий раз, когда нужно выполнить слияние, поверхностное клонирование или выполнение подобных операций над объектами, этот оператор Spread можно легко выполнить с помощью оператора Spread с гораздо более коротким синтаксисом. Единственным недостатком является то, что при использовании оператора распространения нельзя мутировать объект.

Javascript

function product(a, b, c){
return a*b*c;
}
const num = [1,2,3,4,5,9,8];
console.log("the product of array's three elements are -:", product(...num));

Выход

the product of array's three elements are -: 6

7. Использование ключевого слова «Это»

Ключевое слово This, несомненно, является одним из самых сложных, но наиболее полезных понятий продвинутого JavaScript. Это ключевое слово определяет текущую строку контекста выполнения кода, т.е. это ключевое слово хранит значение текущего контекста выполнения программы JavaScript.

Вызов функции может быть выполнен различными способами, но ключевое слово This относится к текущему контексту выполнения. Значение This зависит от привязки среды выполнения. Он изменяется каждый раз при вызове функции.

Всякий раз, когда существует неявная привязка, для ссылки на объект во время вызова мы можем использовать ключевое слово This. Это привязывает ключевое слово к этому текущему объекту.

Синтаксис:

  let article = {
         article_name: 'JavaScript tips and tricks',
         author: 'Anurag Mishra',
         intro: function() {
                 concole.log('${this.article_name} is written by ${author}');
     }
  };
    article.intro();

Выход:

JavaScript tips and tricks is written by Anurag Mishra

8. Использование функции стрелки

С обновлением JavaScript до ES6 самым влиятельным изменением стала концепция стрелочных функций. Большинство продвинутых языков используют стрелочные функции для сокращения синтаксиса и выполнения более крупных функций в меньшем блоке кода.

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

Контекст внутри стрелочной функции определяется лексически.

Javascript

const names = ['GFG', 'gfg', 'Geeksforgeeks', 'Geek'];
console.log("The length of each string in the names array is: ", names.map(name => name.length));

Выход

Длина каждой строки в массиве имен: [ 3, 3, 13, 4 ]

Заключение

JavaScript — очень удобный язык программирования. Есть несколько других важных концепций, которые доступны только в продвинутых языках, таких как JavaScript. Обновление ES6 принесло с собой изменение спектра и сделало JavaScript чрезвычайно популярным. Появление стрелочных функций, использование операторов среза и спреда, а также другие недавно добавленные соглашения подобны вишенке на торте. Из-за его масштабного присутствия во всех технологических стеках и множестве фреймворков эти функции становятся еще более важными, поскольку они используются во всех из них.

Оцените статью
bestprogrammer.ru
Добавить комментарий