Шпаргалка по JavaScript: 8 полезных советов

  • 5 января, 13:25
  • 4010
  • 0

JavaScript, без сомнения, является одним из самых популярных языков в мире. Сообщество разработчиков собрало некоторые трюки и советы после использования JS в течение довольно долгого времени. Сегодня  поделимся с вами 8 советами и трюками!

Итак, приступим к работе

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

Функциональное наследование — это процесс получения объектов путем применения функции дополнения к экземпляру объекта. Функция предоставляет область закрытия, которую можно использовать для сохранения конфиденциальности некоторых данных. Функция дополнения использует расширение динамического объекта для расширения экземпляра объекта новыми свойствами и методами.

Они выглядят так:

// Base function
function Drinks(data) {  var that = {}; // Create an empty object  that.name = data.name; // Add it a "name" property  return that; // Return the object
};

// Fuction which inherits from the base function
function Coffee(data) {  // Create the Drinks object  var that = Drinks(data);  // Extend base object  that.giveName = function() {    return 'This is ' + that.name;  };  return that;
};

// Usage
var firstCoffee = Coffee({ name: 'Cappuccino' });
console.log(firstCoffee.giveName());
// Output: "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); // returns [“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 + ""; // number to string
let stringNum = +s; // string to number


Использование length для изменения размера и очистки массива

В 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


Удаление дубликатов из массива

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

const 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"]


Сокращение от Loop

Вы можете написать меньше кода для цикла, как показано ниже:

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

// Long Version
for (let i = 0; i < names.length; i++) {  const name = names[i];  console.log(name);
}

// Short Version
for (let name of names) console.log(name);


Производительность

В JS вы  можете получить время, в течение которого код был выполнен, так, как это делает Google:

Выглядит это так:

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

Надеемся, что эти советы были полезны и помогут в вашей работе


0 комментариев
Сортировка:
Добавить комментарий

IT Новости