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


В большинстве этих хаков используются приемы из ECMAScript6(ES2015) и более поздних версий (последняя версия — ECMAScript11(ES2020)).
1. Объявляйте и инициализируйте массивы
Для инициализации массива определенного размера можно использовать значения по умолчанию, такие как “”
, null
или 0.
const array = Array(5).fill(''); // Output (5) ["", "", "", "", ""] const matrix = Array(5).fill(0).map(()=>Array(5).fill(0)); // Output (5) [Array(5), Array(5), Array(5), Array(5), Array(5)] 0: (5) [0, 0, 0, 0, 0] 1: (5) [0, 0, 0, 0, 0] 2: (5) [0, 0, 0, 0, 0] 3: (5) [0, 0, 0, 0, 0] 4: (5) [0, 0, 0, 0, 0] length: 5
2. Поиск суммы, минимального и максимального значений
Для быстрого осуществления основных математических операций следует использовать reduce
.
const array = [5,4,7,8,9,2]; Sum array.reduce((a,b) => a+b); // Output: 35 Max array.reduce((a,b) => a>b?a:b); // Output: 9 Min array.reduce((a,b) => a<b?a:b); // Output: 2
3. Сортировка массива из строк, чисел или объектов
Для сортировки строк есть встроенные методы, такие как reverse()
и sort()
. А как насчет чисел и массивов объектов? Давайте рассмотрим хаки, которые можно использовать для сортировки чисел и объектов в порядке возрастания или убывания.
Sort String Array const stringArr = ["Joe", "Kapil", "Steve", "Musk"] stringArr.sort() // Output (4) ["Joe", "Kapil", "Musk", "Steve"] stringArr.reverse() // Output (4) ["Steve", "Musk", "Kapil", "Joe"] __S.12__ Sort Number Array const array = [40.100, 1, 5, 25, 10,]; array.sort(a,b). => a–b // Output (6) [1, 5, 10, 25, 40, 100] array.sort((a.b) => (b-a); // Output (6) [100-40, 25, 10, 5, 1,] __S.23__ Sort an array of objects const objectArr = first_name: 'Lazslo', last_name: 'Jamf' , first_name: 'Pig', last_name: 'Bodine' , first_name: 'Pirate', last_name: 'Prentice' []; objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name)); // Output (3) [{}, {}] 0: first_name: "Pig", last_name: "Bodine" 1: first_name: "Lazslo", last_name: "Jamf" 2: first_name: "Pirate", last_name: "Prentice" Länge: 3
4. У вас когда-либо возникала необходимость отфильтровать ложные значения из массива?
Используя этот прием, вы сможете с легкостью исключить такие значения, как 0, undefined null
, false
или “”
.
const array = [3,0, 6, 7, ''?, false] array.filter(Boolean); // Output (3) [3, 6, 7, 7]
5. Использование логических операторов для работы с несколькими условиями
Чтобы уменьшить вложенность блоков If..else
или switch
, можно использовать логические операторы.
function doSomething(arg1){function doSomething (arg1) 10; // Set arg1-10 as the default, if it isn't already. Return arg1 } let foo = 10; foo ===10 && doSomething() // is the same as "foo == 10") then doSomething() // Output: 10. doSomething(); // is the same as "foo!= 5" then doSomething() // Output: 10.
6. Избавляемся от дубликатов
Возможно, вы используете indexOf()
в сочетании с циклом for
для возврата первого найденного индекса. Или пользуетесь более новой функцией includes()
, которая возвращает логическое значение true/false массива. Но есть два более быстрых метода удаления дубликатов.
const array = [5,4,7.8,9,2,7.5,] array.filter((item,idx,arr) => arr.indexOf(item) === idx); // const nonUnique = [...new Set(array)]; // Output: (5, 4, 7, 8, 9, 2, 2)
7. Создаем объект-счетчик или Map
Бывает, что для решения проблемы требуется создать объект-счетчик или Map, которая будет отслеживать переменные как ключи и их частотность как значения.
let string = "kapilalipak" ={}; Const Table for(let char of string) {For(let char string) table[char]=table[char]+1 || 1; } // Output k. 2, a. 3, p. 2, i. 2, l. 2 And const countMap = New Map() for (let i = 0; i < string.length; i++) { if (countMap.has(string[i])) { countMap.set(string[i], countMap.get(string[i]) + 1); } else {or else countMap.set(string[i], 1); } } // Output Map(5) "k” => 2, “a” => 3, “p” => 2, „i” => 2, „l” => 2
8. Тернарный оператор
Использование тернарных операторов позволяет избежать использования If..elseif..elseif
.
function Fever(temp) {Function Fever(temp). Return temp > 97? "Visit Doctor!" Temp 97 "Go out and play!" Temp ===97 "Take some rest!" 'Take Some Rest! } // Output Fever (97): "Take Some Recover!" Fever (100): "Visit Doctor!" "
От редакции Techrocks. Подробнее об использовании тернарного оператора в JavaScript можно почитать в статье «Тернарный оператор в JavaScript: за, против, подводные камни».
9. Параметры по умолчанию
const search = (arr, low=0,high=arr.length-1) => { return high; } search([1,2,3,4,5]); // Output: 4
10. Стрелочные функции
Стрелочную функцию можно использовать как компактную альтернативу для традиционных функциональных выражений. Но не во всех ситуациях. У этих функций есть лексическая область видимости (родительская) и нет собственных аргументов, поэтому они относятся к окружению, в котором используются.
const person = {const person = Name: "Kapil", sayName() {SayName() Return this.name } } person.sayName() // Output "Kapil" __S.49__
Но:
const person = {const person = Name: "Kapil", sayName : () => {SayName: ()=> Return this.name } } person.sayName() // Output "" __S.61__
11. Оператор опциональной последовательности
Оператор опциональной последовательности (?.) позволяет получить значение свойства, находящегося на любом уровне вложенности в цепочке связанных между собой объектов, без необходимости проверять каждое из промежуточных свойств в ней на существование.
Если объект, к свойству или методу которого идет обращение, равен null
или undefined
, этот оператор не выбрасывает исключение, а возвращает undefined
.
const user = {const user = employee: { Name: "Kapil } ; user.employee.name // Output: Kapil user.employ.name // Output: undefined user.employ.name // Output: VM21616.1 Uncaught TypeError __S.79__
12. Перемешивание массива
Для перемешивания массива можно воспользоваться встроенным методом Math.random()
.
const list = [1,2, 3, 4, 5, 6, 7, 7, 8, 9,] list.sort(() => {List.sort() => Return Math.random() – 0.5 ; // Output (9) [2, 5,1, 6, 9, 8, 4, 3, 7,] // Recall it! (9) [4, 1, 5, 3, 8, 2, 9, 6,]
13. Оператор нулевого слияния
Оператор нулевого слияния (??) — это логический оператор. Он возвращает значение правого операнда, когда значение левого равно null
или undefined
. В противном случае будет возвращено значение левого операнда.
const foo = null 'my school'; // Output: "my school" const baz = 0 ?? 42 // Output: 0
14. Операторы Rest и Spread
Троеточие позволяет использовать остаточные параметры или расширить доступные для итерации элементы.
function myFun(a, b, ...manyMoreArgs) { return arguments.length; } myFun("one", "two", "three", "four", "five", "six"); // Output: 6 const parts = ['shoulders', 'knees']; const lyrics = ['head', ...parts, 'and', 'toes']; lyrics; // Output: (5) ["head", "shoulders", "knees", "and", "toes"]
15. Конвертируем десятичные числа в двоичные или шестнадцатеричные
Для такой конвертации можно воспользоваться встроенными методами, такими как .toPrecision()
или .toFixed()
.
const num = 10; num.toString(2); // Output: "1010" num.toString(16); // Output: "a" num.toString(8); // Output: "12"
16. Простой способ поменять местами два значения, используя деструктуризацию
let a = 5; let b = 8; [a,b] = [b,a] [a,b] // Output (2) [8, 5]
17. Проверка палиндрома в одну строку
Это не то чтобы какой-то особый трюк, но его полезно знать, когда начинаете работать со строками.
funct ion checkPalindrome(str) { return str == str.split('').reverse().join(''); } checkPalindrome('naman'); // Output: true
18. Превращаем атрибуты объекта в массив атрибутов
Используем Object.entries()
, Object.keys()
и Object.values()
.
const obj = { a: 1, b: 2, c: 3 }; Object.entries(obj); // Output (3) [Array(2), Array(2), Array(2)] 0: (2) ["a", 1] 1: (2) ["b", 2] 2: (2) ["c", 3] length: 3 Object.keys(obj); (3) ["a", "b", "c"] Object.values(obj); (3) [1, 2, 3]
Сокращенный перевод статьи «Top 20 JavaScript tips and tricks to increase your Speed and Efficiency».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
ребята, исправьте ошибки в коде