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

Содержание

Функциональное наследование

С помощью функционального наследования в JavaScript можно создать потомки объектов и расширить их возможности новыми методами:

// Базовая функция
function Drinks(data) {
    var that = {}; // Создаем пустой объект
    that.name = data.name; // Добавляем свойство "name"
    return that; // Возвращаем объект
};

// Функция, которая наследуется от базовой функции
function Coffee(data) {
    // создаем объект "Drinks"
    var that = Drinks(data);
    // Расширяем базовый объект, добавляем функцию "giveName"
    that.giveName = function() {
    return 'This is ' + that.name;
    };
    return that;
};

// Пример
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Результат: "This is Cappuccino"

Сопоставление массивов без .map()

.map() - довольно сложный метод, который можно использовать, в том числе, и для сопоставления массивов. Альтернативой является метод .from():

let dogs = [
    { name: 'Rio', age: 2 },
    { name: 'Mac', age: 3 },
    { name: 'Bruno', age: 5 },
    { name: 'Jucas', age: 10 },
    { name: 'Furr', age: 8 },
    { name: 'Blu', age: 7 },
]

let dogsNames = Array.from(dogs, ({name}) => name);
console.log(dogsNames);
// Результат [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”]

Преобразуем число в строку и строку в число

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

let num = 4
let newNum = num.toString();

А строки в число, так:

let num = "4"
let stringNumber = Number(num);

Но есть и более интересные варианты:

let num = 15;
let numString = num + ""; // число в строку
let stringNum = +s; // строка в число

Изменяем длину массива или удаляем его

В JavaScript мы можем передать аргумент методу length() и изменить длину массива:

let array_values = [1, 2, 3, 4, 5, 6, 7, 8];  
console.log(array_values.length); 
// 8

array_values.length = 5;  
console.log(array_values.length); 
// 5 

console.log(array_values); 
// [1, 2, 3, 4, 5]

или вовсе удалить его:

let array_values = [1, 2, 3, 4, 5, 6, 7,8]; 
console.log(array_values.length); 
// 8

array_values.length = 0;   
console.log(array_values.length); 
// 0

console.log(array_values); 
// []

Меняем значения переменных с помощью деструктуризации

Деструктуризация в JavaScript нужна для извлечения значений элементов массива в переменные, но ее можно использовать для быстрой смены местами значений переменных:

let a = 1, b = 2;
[a, b] = [b, a];
console.log(a); // result -> 2
console.log(b); // result -> 1

Удаляем дубли из массива

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

onst array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3];
const filteredArray = [...new Set(array)];
console.log(filteredArray) // [1, 3, 2, true, false, "Kio"]

Упрощаем цикл for

Создавая цикл в JavaScript, можно писать намного меньше кода:

const names = ["Kio", "Rio", "Mac"];

// Длинный вариант
for (let i = 0; i < names.length; i++) {
  const name = names[i];
  console.log(name);
}

// Короткий вариант
for (let name of names) console.log(name);

Узнаем время выполнения скрипта

В JavaScript довольно просто узнать, сколько времени уходит на выполнение фрагмента кода:

const firstTime = performance.now();
// Какой-то код
const secondTime = performance.now();

console.log(`The something function took ${secondTime - firstTime} milliseconds.`);

Спасибо за внимание.

Написано по материалам статьи Garvit Motwani “8 JavaScript Tips & Tricks That No One Teaches”.