Вы будете удивлены номером 9!
В этой статье я собрал несколько советов и трюков JavaScript, которые, по я полагаю, может сделать вас лучшим разработчиком JavaScript. Ни в одном порядке, вот семь (?) Хитрость JavaScript!
1. Преобразование в номера
JavaScript это свободно набранный язык , что означает, что нам не нужно явно указывать виды переменных. JavaScript также свободно тип – преобразует значения в тип в зависимости от контекста их использования.
Преобразование значений на цифры, особенно строки к числам, является общим требованием, и могут использоваться многие методы.
Унарный + оператор
Наиболее краткий метод для преобразования типов в числа – это Унарный + Оператор :
+"42" // 42
Унарная операция – это операция только с одним операндом. Этот операнд приходит либо до или после оператора.
Оператор Унари Плюс Предшествует своему операнду и оценивает его операнду, но пытается преобразовать его в номер, если это еще не так. Вот несколько примеров того, как это ведет себя:
+true // 1 +false // 0 +null // 0
Но, что если мы хотим быть более явным в нашем коде?
Количество
Номер это примитивный объект обертки, используемый для представления и манипулирования номерами. При использовании в качестве функции Номер (значение) Преобразует строку или другое значение на номер числа. Если значение не может быть преобразовано, он возвращает Нан (Не число).
Number('42') // 42
Number('1.3') // 1.3
Number('tax') // NaN
паринт
Parсент () берет строку в качестве первого аргумента и основание, на которую будет преобразована эта строка. Этот метод всегда возвращает целое число.
parseInt('1234', 10) // 1234
parseInt('11 players', 10) // 11
parseInt('player 2', 10) // NaN
parseInt('10.81', 10) // 10
Parсент () пытается получить номер из строки, которая не только содержит номер, но если строка не запускается с номера, вы получите Нан Отказ
пара
Если мы хотим сохранить десятичную часть, а не только целочисленную часть, мы можем использовать Parsefloat () Это имеет строку в качестве аргумента и возвращает эквивалент номер точки поплавка.
parseFloat('10.42') // 10.42
parseFloat('10.00') // 10
Есть несколько способов преобразования в цифры, но это более распространенные.
2. Управляющие объекты
Разрушение это огромная часть ES6 и то, что вы, вероятно, собираетесь использовать часто. Это позволяет нам извлечь данные из объектов и присвоение извлеченных данных в переменные:
const rectangle = { h: 100, w: 200 };
const { h, w } = rectangle;
Мы можем переименовать переменные, если хотим:
const { h: height, w: width} = rectangle;
console.log(height); // 100
Еще одна удобная вещь, которую мы могли бы сделать, это разрушать возвращенный объект функцией и выбрать, какие значения мы хотим использовать:
function getPerson() {
return {
firstName: 'Max',
lastName: 'Best',
age: 42
}
}
const { age } = getPerson();
console.log(age); // 42
Таким образом, с деструктурией мы можем вернуть несколько значений из функции, возвращая объект и выбирая куски, которые мы хотим возвращаться.
Удаление недвижимости в неизменном порядке требует небольшого трюка, предоставленного аналогом спреда, Отдых Оператор, который написан с тремя точками (…) как распространение. Однако в этом случае мы распространяем оставшиеся свойства в новый объект.
const { age:_ , ...person } = getPerson();
console.log(person); // {firstName: "Max", lastName: "Best"}
Теперь человек Объект содержит все свойства от Original Person Object, кроме возраст Отказ
3. Поднимите две переменные
Используя то, что мы узнали в последнем трюке, делает переменные переменные так просто, как:
let me = 'happy', you = 'sad'; [me, you] = [you, me]; // me = 'sad', you = 'happy'
Приведенный выше код создает массив [вы, я] и немедленно разрушит их в противоположных переменных.
Нет необходимости в переменных температурах больше!
4. Настройка по умолчанию
Мы все видели их. Бесконечные, если утверждения проверяют, были ли значения установлены. Что если я сказал, что есть лучший способ? Ну, это именно то, что я говорю, значения по умолчанию.
Переменные
Нульский коалиспильный оператор ( ?? ) является логическим оператором, который возвращает свою правую сторону операнда, когда операнда левого стороны – нулевой или undefined и в противном случае возвращает свой левый операнд. Мы можем использовать это для установки значений по умолчанию, например, когда мы получим список, который еще не был установлен на массив:
const bookList = receivedBooks ?? [];
Параметры
Мы могли бы использовать Оператор нуля коамиска установить по умолчанию для переменных в функциях, но есть лучший способ, Параметры по умолчанию :
function calculateArea(width, height = 100) {
return width * height;
}
const area = calculateArea(50);
console.log(area); // 5000
Здесь мы устанавливаем значение по умолчанию для Высота до 100 и рассчитать площадь, отправляя только в ширина Отказ
Объекты
Еще один трюк, когда деструктивные объекты устанавливают значения по умолчанию:
const rectangle = { height: 400 };
const { height = 750, width = 500 } = rectangle;
console.log(height); // 400 - comes from rectangle object
console.log(width); // 500 - fallback to default
ES6 Разрушение значений по умолчанию Наклона только тогда, если значение является undefined Отказ
5. Случайное число от интервала
Есть времена, когда нам нужно случайное число, которое будет генерироваться в диапазоне. Math.random () Функция помогает нам генерировать случайное число, а затем мы можем преобразовать его в диапазон, который мы хотим:
const randomIntFromInterval = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
Есть еще один трюк, запеченный в этом, если вы посмотрите на то, как создается функция.
6. Удалить дубликаты массива
Тип набора объектов, введенный в ES6, позволяет хранить уникальные значения. Вместе с оператором распространения ( ... ) мы можем использовать его для создания нового массива только с уникальными значениями:
const uniqueArray = [...new Set(array)]
Мы создаем набор из массива и потому что каждое значение в комплекте должно быть уникальным, мы удалим все дубликаты. Затем мы преобразуем задание на новый массив, используя оператор SPRECT.
7. Динамические имена свойств
ES6 принес нам компьютерные имена свойств, которые позволяют ключевым ключам объектных литералов для использования выражений. Окружая ключ с кронштейнами [], мы можем использовать переменные в качестве клавиш недвижимости:
const type = "fruit";
const item = {
[type]: "kiwi"
};
console.log(item); // {fruit: "kiwi"}
Это полезно в ситуации, когда вы хотите, чтобы ключ был создан на лету.
Мы можем получить доступ к значению с обозначением кронштейна:
item[type]; // "kiwi" item["fruit"] // "kiwi"
Или с точечной записью:
item.fruit; // "kiwi"
8. Бонусный трюк
Если мы хотим добавить новый элемент на массив Без мутации (Что мы обычно хотим избегать), мы можем создать новый массив, используя ES6 Распространение оператора и кусочек .
const insert = (arr, index, newItem) => [ ...arr.slice(0, index), // first half of array newItem, // new item ...arr.slice(index) // rest of array ]; const items = ['S', 'L', 'C', 'E'] const result = insert(items, 2, 'I'); console.log(result); // ["S", "L", "I", "C", "E"]
9.
Почему было 6 боится 7?
Потому что 7 ел 9.
Я надеюсь, что вы найдете некоторые из этих хитростей JavaScript полезны и стоит добавлять к каждому ежедневным арсенале. И помните, что быть ответственным гораздо важнее, чем быть эффективным.
Оригинал: “https://dev.to/this-is-learning/7-useful-javascript-tricks-and-tips-4lp1”