Оптимизируйте свой код JavaScript, используя современные методы сокращения, советы и приемы.

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

Сегодня я делюсь шпаргалкой, которая очень помогла мне сократить часть кода, а также сделать его более читабельным.

Примечание. Иногда сокращение затрудняет понимание кода разработчиком, если он о нем не знает 😊 .

Тогда перейдем к списку.

1. Если стенография

Вам скучно использовать множество операторов If? Давайте проверим какой-нибудь вариант, который может здесь помочь

//longhand
if (fruit === 'apple' || fruit === 'banana' || fruit === 'orange' || fruit ==='mango') {
    //logic
}
//shorthand
if (['apple', 'banana', 'orange', 'mango'].includes(fruit)) {
   //logic
}

2. Если… иначе Сокращение

Это может помочь, когда у нас есть операторы if-else. (убедитесь, что у вас есть максимум 2–3 if ... иначе код будет менее читабельным)

// Longhand
let mychoice: boolean;
if (money > 100) {
    mychoice= true;
} else {
    mychoice= false;
}
// Shorthand
let mychoice= (money > 10) ? true : false;
//or we can use directly
let mychoice= money > 10;
console.log(mychoice);

вложенные условия выглядят так

let salary = 300,
checking = (salary > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(checking); // "greater than 100"

3. Объявления переменных

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

//Longhand 
let data1;
let data2= 1;
//Shorthand 
let data1, data2= 1;

4. Проверка ненулевых значений

Что, если мы хотим проверить, что переменная не равна нулю? Теперь мы можем снова избавиться от записи всех условий.

// Longhand
if (data1 !== null || data1!== undefined || data1 !== '') {
    let data2 = data1;
}
// Shorthand
let data2 = data1 || '';

5. Назначение значений по умолчанию

let data1 = null,
    data2 = test1 || '';
console.log("null check", data2); // output will be ""

6. Проверка неопределенного значения

let data1 = undefined,
    data2 = data1 || '';
console.log("undefined check", data2); // output will be ""

Проверка нормального значения

let data1 = 'data',
    data2 = data1 || '';
console.log(data); // output: 'data'

(Примечание: мы также можем использовать оператор ?? для темы 4,5 и 6)

7. Нулевой оператор

Этот оператор возвращает значение правой части, если левая часть равна нулю или не определена.

const data= null ?? 'data';
console.log(data);
// expected output: "data"
const data1 = 1 ?? 4;
console.log(data1);
// expected output: 1

8. Присвоение значений

//Longhand 
let data1, data2, data3;
data1 = 1;
data2 = 2;
data3 = 3;
//Shorthand 
let [data1, data2, data3] = [1, 2, 3];

9. Операторы присваивания

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

// Longhand
data1 = data1 + 1;
data2 = data2 - 1;
data3 = data3 * 30;
// Shorthand
data1++;
data2--;
data3 *= 30;

10. Нулевые проверки

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

// Longhand
if (data1 === true) or if (data1 !== "") or if (data1 !== null)
// Shorthand //
if (test1)

Примечание. Если test1 имеет какое-либо значение, оно попадет в логику после цикла if, этот оператор в основном используется для нулевых или неопределенных проверок.

11. Оператор AND (&&)

Если мы хотим избежать одного оператора if, то это сокращение будет полезно.

//Longhand 
if (test1) {
 callMethod(); 
}
//Shorthand 
test1 && callMethod();

12. Вернуть стенографию

Это поможет избежать большого фрагмента кода, который специально возвращается для вызова методов на основе операторов возврата.

// Longhand
let value;
function returnMe() {
    if (!(value === undefined)) {
        return value;
    } else {
        return callFunction('value');
    }
}
var data = returnMe();
console.log(data); //output value
function callFunction(val) {
    console.log(val);
}

// Shorthand
function returnMe() {
    return value || callFunction('value');
}

13. Стрелочные функции

//Longhand 
function add(a, b) { 
   return a + b; 
} 
//Shorthand 
const add = (a, b) => a + b;

Давайте проверим еще один пример

function function(value) {
  console.log('value', value);
}
function= value => console.log('value', value);

14. Короткие вызовы функций

Мы можем использовать тернарный оператор для выполнения этих функций.

// Longhand
function data1() {
    console.log('data1');
};
function data2() {
    console.log('data2');
};
var data3 = 1;
if (data3 == 1) {
    data1();
} else {
    data2();
} //data1
// Shorthand
(data3 === 1 ? data1 : data2)(); //data1

15. Оптимизация статуса коммутатора

Если вы хотите оптимизировать операторы переключения, это может помочь.

// Longhand
switch (data) {
    case 1:
        data1();
        break;
    case 2:
        data2();
        break;
    case 3:
        data();
        break;
        // And so on...
}
// Shorthand
var data = {
    1: data1,
    2: data2,
    3: data
};
const val = 1
data[val]();
function data1() {
    console.log("data1");
}
function data2() {
    console.log("data2");
}
function data() {
    console.log("data");
}

16. Неявный возврат

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

//longhand
function calculate(diameter) {
  return Math.PI * diameter
}
//shorthand
calculate = diameter => (
  Math.PI * diameter;
)

17. Показатели с десятичным основанием

// Longhand
for (var i = 0; i < 100000; i++) { ... }
// Shorthand
for (var i = 0; i < 1e5; i++) {

18. Значения параметров по умолчанию

//Longhand
function add(data1, data2) {
    if (data1 === undefined) data1 = 1;
    if (data2 === undefined) data2 = 2;
    return data1 + data2;
}
//shorthand
add = (data1 = 1, data2 = 2) => data1 + data2;
console.log(add()); //output: 3

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

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

//longhand
// joining arrays using concat
const testdata= [1, 2, 3];
const values = [4 ,5 , 6].concat(data);
//shorthand
// joining arrays
const testdata = [1, 2, 3];
const values = [4 ,5 , 6, ...testdata];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

Для клонирования мы также можем использовать оператор распространения.

//longhand
// cloning arrays
const data1 = [1, 2, 3];
const data2 = data1.slice()
//shorthand
// cloning arrays
const data1 = [1, 2, 3];
const data2 = [...data1];

20. Шаблонные литералы

Если вы ищете сокращение для добавления нескольких значений в строку, то это сокращение для вас.

//longhand
const literal = 'Hi ' + data1 + ' ' + data2 + '.'
//shorthand
const literal= `Hi ${data1} ${data2}`;

21. Многострочные струны

//longhand
const literal = 'abc abc abc abc abc abc\n\t'
    + 'val test,test test test test\n\t'
//shorthand
const literal = `abc abc abc abc abc abc
         val test,test test test test`

22. Передача собственности объекта

let data1 = 'abcd'; 
let data2 = 'efgh';
//Longhand 
let data = {data1: data1, data2: data2}; 
//Shorthand 
let data = {data1, data2};

23. Преобразование чисел

//Longhand 
let test1 = parseInt('12'); 
let test2 = parseFloat('2.33');
//Shorthand 
let test1 = +'12'; 
let test2 = +'2.33';

24. Деструктурирующее присвоение

//longhand
const data1 = this.data.data1;
const data2 = this.data.data2;
const data2 = this.data.data3;
//shorthand
const { data1, data2, data3 } = this.data;

25. Метод Array.find

Один из методов из массива, который находит первые совпавшие значения из массива.

const data = [{
        type: 'data1',
        name: 'abc'
    },
    {
        type: 'data2',
        name: 'cde'
    },
    {
        type: 'data1',
        name: 'fgh'
    },
]
function datafinddata(name) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].type === 'data1' && data[i].name === name) {
            return data[i];
        }
    }
}
//Shorthand
filteredData = data.find(data => data.type === 'data1' && data.name === 'fgh');
console.log(filteredData); // { type: 'data1', name: 'fgh' }

26. Побитовый индекс сокращения

Что, если мы сможем объединить метод indexof с сокращением? Побитовые индексы выполняют за нас ту же работу.

//longhand
if (data.indexOf(item) > -1) { // item found
}
if (data.indexOf(item) === -1) { // item not found
}
//shorthand
if (~data.indexOf(item)) { // item found
}
if (!~data.indexOf(item)) { // item not found
}

мы также можем использовать функцию include.

if (data.includes(item)) { 
// true if the item found
}

27. Object.entries ()

Эта функция помогает преобразовать объект в массив объектов.

const data = {
    data1: 'abc',
    data2: 'cde',
    data3: 'efg'
};
const arr = Object.entries(data);
console.log(arr);
//[
    ['data1', 'abc'],
    ['data2', 'cde'],
    ['data3', 'efg']
]

28. Object.values ​​() и Object.keys ()

Может быть полезно перебрать значения объекта.

const data = {
    data1: 'abc',
    data2: 'cde'
};
const arr = Object.values(data);
console.log(arr);
//[ 'abc', 'cde']

Object.keys () может быть полезен для перебора ключей от объекта.

const data = {
    data1: 'abc',
    data2: 'cde'
};
const arr = Object.keys(data);
console.log(arr);
//[ 'data1', 'data2']

29. Двойное побитовое сокращение

(Побитовый оператор с двойным НЕ работает только для 32-битных целых чисел)

// Longhand
Math.floor(1.9) === 1 // true
// Shorthand
~~1.9 === 1 // true

30. Повторите строку несколько раз.

Этот строковый метод может быть полезен для повторения одного и того же строкового значения снова и снова.

//longhand 
let data = '';
for (let i = 0; i < 5; i++) {
    data += 'data ';
}
console.log(str); // data data data data data 
//shorthand 
'data '.repeat(5);

31. Найдите максимальное и минимальное число в массиве.

const data = [1, 4, 3]; 
Math.max(…data); // 4
Math.min(…data); // 1

32. Получить символ из строки

let str = 'test';
//Longhand 
str.charAt(2); // s
//Shorthand 
Note: this is only works if we know the index of matched character
str[2]; // c

33. Стенография власти

//longhand
Math.pow(2,2); // 4
//shorthand
2**2 // 4

Больше контента на plainenglish.io

Если вам понравилось и вы хотите получать больше подобного контента, пожалуйста, сделайте подписку

Дальнейшее чтение:



Наиболее часто используемые строковые методы в JavaScript
Последние вопросы собеседования по программированию на JavaScript, 2021 javascript.plainenglish.io





Недавно представленные функции JavaScript для расширения ваших знаний
Оптимизируйте код JavaScript с помощью новых функций ES2021. javascript.plainenglish.io





100 основных вопросов, которые вы должны подготовить к следующему собеседованию по Angular (1–10)
Самые распространенные вопросы на собеседовании по Angular 2021 javascript.plainenglish.io