Според мен задължително знание
В тази статия компилирам някои от „техниките“ на JavaScript, които обикновено използвам в ежедневието си, спестявайки много време. Надявам се да ги намерите за полезни!
1. Създайте генерична функция
Нека си представим, че искаме да разработим обща функция, дадени някои параметри и функция. След това тази функция се изпълнява с тези параметри.
Например, калкулатор с N параметъра и N операции. Можете лесно да постигнете това с помощта на оператора за разпространение и функцията за намаляване:
function calculator(operation, ...numbers) {
return operation(...numbers);
}
function add(...numbers) {
return numbers.reduce( (total, num) => total + num, 0);
}
function subtract(...numbers) {
return numbers.reduce( (total, num) => total - num, 0);
}
function multiply(...numbers) {
return numbers.reduce( (total, num) => total * num, 1);
}
console.log(calculator(add, 1, 2, 3, 4, 5));
console.log(calculator(subtract, 10, 2, 1));
console.log(calculator(multiply, 2, 2, 2, 2));
2. Превключване с диапазони
Понякога вероятно бихте намерили за полезно да използвате диапазони в изречение Switch. Ето пример как да го направите:
function chooseSportByTemperature(fahrenheit) {
let sport;
switch (true) {
case (fahrenheit >= 15 && fahrenheit <=20):
sport = 'Running';
break;
case (fahrenheit > 20 && fahrenheit <= 30):
sport = 'Cycling';
break;
case (fahrenheit > 30):
sport = 'Stay in home';
break;
default:
sport = 'Sex';
}
return sport;
}
3. Групиране на множество случаи на превключване
Изчистен начин за групиране на падежни изречения:
function setMyValueByValue(value) {
let myValue;
switch (value)
{
case "value1":
case "value2":
case "value3":
myValue = "My value 1-2-3"
break;
case "value4":
myValue = "My value 4"
break;
default:
myValue = "Default value"
}
return myValue;
}
console.log(setMyValueByValue("value1"));
console.log(setMyValueByValue("value2"));
console.log(setMyValueByValue("value3"));
console.log(setMyValueByValue("value4"));
console.log(setMyValueByValue("value5"));
4. Изчакайте до множество асинхронни функции с async/await
Възможно е да изчакате завършването на множество асинхронни функции, като използвате (Promise.all) вътре в асинхронната функция.
function resolveAfter1Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 1000);
});
}
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
function resolveAfter3Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 3000);
});
}
function resolveAfter4Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 4000);
});
}
async function asyncFunction() {
console.log('start');
const result = await Promise.all(
[resolveAfter1Seconds(),
resolveAfter2Seconds(),
resolveAfter3Seconds(),
resolveAfter4Seconds()])
console.log(result); //resolved after 4 seconds !
console.log('end');
}
asyncFunction();
5. Изравняване на двумерни масиви в една стъпка
const multidimensionalArray = [1,2, [3, 4], [5, 6], 7, [8] ]; const flatArray = (original) => [].concat(...original); const flattenedArray = flatArray(multidimensionalArray);
6. Изравняване на многомерни масиви в една стъпка
Използвайки метода flat(), можем да създадем нов масив с всички елементи на подмасив, свързани в него рекурсивно до определената дълбочина.
const multidimensionalArray = [0, 1, 2, [[[3, 4, 5]]]]; console.log(multidimensionalArray.flat()); console.log(multidimensionalArray.flat(3)); //depth 3.
7. Създавайте чисти обекти в JavaScript
Често е интересно да се създават чисти JavaScript обекти, които не наследяват никакви свойства на обекта. Постигането на това е толкова просто, колкото да направите следното:
const car = {type:"Ford", model:"250", color:"black"};
console.log(car);
console.log(car.constructor);
console.log(car.toString);
console.log(car.hasOwnProperty);
const pureCar = Object.create(null); console.log(pureCar); console.log(pureCar.__proto__); console.log(pureCar.constructor); console.log(pureCar.toString); console.log(pureCar.hasOwnProperty);
8. Премахнете дублиращите се елементи в масив в една стъпка
За да премахнете дублиращи се елементи в масив, можете да използвате деструктуриране и ES6 Set:
const removeDuplicatesFromArray = arr => [...new Set(arr)]; removeDuplicatesFromArray([1,1,2,3,4,4,4,true,true,'foo','foo']);
9. Показване в конзолата, когато дадена страница е започнала и приключила със зареждането
<script>
window.onload=() =>{console.log('Start');}
window.onunload=() =>{console.log('Finish');}
</script>
Or better:
<script>
window.onload=() =>{console.time('pageLoadingTime');}
window.onunload=() =>{console.timeEnd('pageLoadingTime');}
</script>
Можете също така да използвате функциите console.time(‘уникално име’) и console.timeEnd(‘уникално име’), които стартират и завършват таймер, за да проследите колко време отнема дадена операция.
10. Бутон за отпечатване на текущата страница
<input type="button" value="Print this page!" onclick="window.print()">
11. Закръгляване на числа
Можем да закръглим до най-близкото цяло число, да закръглим надолу или нагоре. JavaScript използва три метода, за да постигне това: Math
let myNumber= 1.56789; myNumber = myNumber.toFixed(2);
Резултатът е низ, който трябва да бъде предаден на функцията parseFloat(), за да върне число. За съжаление, това е много бавно. Но ако имате нужда от точност, това е по-добрият начин.
Друг начин да направите това е да използвате Math.round за закръгляване до най-близкото цяло число:
let myNumber= 1.56789; Math.round(myNumber);
Или Math.floor(), който закръгля надолу и Math.ceil() закръгля нагоре.
Имайте предвид, че закръгляването не е същото като отрязването:
let myNumber= 1.56789; Math.trunc(myNumber);
Math.trunc() премахва всички дробни цифри.
12. Изпразване на масив
Толкова лесно, колкото присвояването на нулева стойност на неговото свойство за дължина:
let myArray = [1,2,3,4,5,6,7,8,9,10]; myArray.length = 0;
Заключение
Надявам се тази статия да ви е била полезна и приятна. Като комбинираме това, което езикът ни носи, често постигаме мощни и практични неща, като например създаване на общ калкулатор в няколко стъпки.
Още в: Още 12 нови супер полезни трика в JavaScript
Благодаря, че ме прочетохте! Пази се!
