Обмен значений переменных

С помощью техники деструктуризации, это сделать очень просто

let fire = '';
let fruit = '';

[fruit, fire] = [fire, fruit];
console.log(fire, fruit);

#переменные

isArray

Ещё один полезный метод, на этот раз позволяющий определить, являются ли входящие данные массивом

let emojis = ['', '️', '', ''];
console.log(Array.isArray(emojis));

let obj = {};
console.log(Array.isArray(obj));

#массив

"undefined" против "null"

"undefined" – присутствует у переменной, которая была объявлена, но значение для неё задано не было
"null" – обозначает пустое или несуществующее значение, которое явно присваивается переменной

"undefined" и "null" не равны при строгом сравнивании:

undefined === null // false

#массив

Получение фрагментов url-адреса

Объект "window.location" имеет набор полезных методов и свойств. С помощью них мы можем получить данные про протокол, хост, порт, домен и тому подобное из url-адреса браузера.

Одно из свойств, которое мне кажется очень полезным

window.location.search

Свойство "search" возвращает фрагмент строки url-адреса, находящийся после вопросительного знака: "?project=js".

Для получения параметров запроса, помимо "location.search" можно использовать ещё один полезный API, называемый "URLSearchParams".

let project = new URLSearchParams(location.search).get('project');

В результате получаем "js"

#url

Фильтр уникальных значений

Тип Set был введен в ES6, и наряду с оператором «spread» ... мы можем использовать его для создания нового массива с уникальными значениями.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

До ES6 фильтрация уникальных значений потребовала бы гораздо больше кода, чем сейчас!

Этот трюк работает для массивов, содержащих примитивные типы: undefined, null, boolean, string и number. (Если бы у вас был массив, содержащий объекты, функции или дополнительные массивы, вам понадобился бы другой подход!)

#массив

Кешируем длину массива в циклах

Когда нас учат циклам for, нам рекомендуется следовать этой стандартной структуре:

for (let i = 0; i < array.length; i++){
  console.log(i);
}

Однако, используя этот синтаксис, цикл for пересматривает длину массива при каждой итерации.

Иногда это может быть полезно, но в большинстве случаев лучше и эффективнее кэшировать длину массива, так что к ней нужно обратиться только 1 раз. Мы можем сделать это, определив переменную length



for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

Этот код почти такой же лаконичный, как и приведенный выше, но он работает таким образом, что при увеличении размера массива мы не теряем время на перепроверку array.length.

#цикл

Вычисление короткого замыкания

Тернарный оператор - это быстрый способ написать простые (а иногда и не очень простые) условные конструкции, например:

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Но иногда даже тернарный оператор получается сложнее, чем нужно. Вместо него мы можем использовать логические операторы «и» && и «или» || для более точной оценки определенных выражений. Его часто называют «коротким замыканием».

#оператор

Преобразование в Boolean

Помимо обычных логических значений true и false, JavaScript также обрабатывает все другие значения как «правдивые» или «ложные».

Если не указано иное, все значения в JavaScript являются «правдивыми» за исключением 0, "", null, undefined, NaN и, конечно false - которые являются «falsy».

Мы можем легко переключаться между true и false, используя отрицательный оператор !, который также преобразует тип в "boolean" .

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;

Этот тип преобразования типов может быть полезен в условных выражениях, хотя единственная причина, по которой вы бы решили определить false как !1, это если бы вы играли в code golf!

#типы

Преобразование в String

Чтобы быстро преобразовать число в строку, мы можем использовать оператор конкатенации + , за которым следует пустой набор кавычек "" .

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

#типы

Преобразование в Number

Можно быстро сделать с помощью оператора сложения + .

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Это также может быть использовано для преобразования boolean в числа, как показано ниже:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Могут быть контексты, в которых оператор + будет интерпретироваться как оператор конкатенации, а не как оператор сложения. В таком кейсе (вы хотите вернуть целое число, а не с плавающей точкой), вы можете использовать тильды: ~~ .

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Хотя я не могу придумать много вариантов использования, но побитовый оператор NOT также можно использовать в логических значениях: ~true = -2 и ~false = -1 .

#типы

Быстрое возведение в степень

Начиная с ES7 стало возможным использовать оператор возведения в степень ** как сокращение для степеней, что быстрее, чем запись Math.pow(2, 3). Это простой материал, но он попал в список, потому что не так много учебных содержит этот оператор!

console.log(2 ** 3); // Result: 8

Не следует его путать с ^ символом, обычно используемым для записи показателей степени, т.к в JavaScript он является побитовым оператором XOR.

До ES7 сокращение существовало только для степеней с основанием 2 с использованием оператора побитового сдвига влево << :

// The following expressions are equivalent:
Math.pow(2, n);
2 << (n - 1);
2**n;

Например, 2 << 3 = 16 эквивалентно 2 ** 4 = 16 .

#операция

Быстрое преобразование Float в Integer

Если вы хотите преобразовать число с плавающей точкой в целое число, вы можете использовать Math.floor(), Math.ceil() или Math.round(). Но есть также более быстрый способ обрезать число с плавающей точкой до целого числа, используя | оператор побитового ИЛИ.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Поведение | зависит от того, имеете ли вы дело с положительными или отрицательными числами, поэтому лучше использовать его вы точно уверены в операндах.

Если n положительно, n | 0 округляется в большую сторону. Если n отрицательное - округляется в меньшую. Чтобы выразиться точнее, эта операция удаляет все, что следует после десятичной точки, усекая число с плавающей точкой до целого числа.

Причины, по которым эти конкретные операции работают, заключаются в том, что после принудительного преобразования в целое число, значение остается неизменным.

#операция

Удалить последние цифры

Побитовый оператор ИЛИ также можно использовать для удаления любого количества цифр из конца целого числа. Это означает, что нам не нужно использовать подобный код для преобразования между типами:

let str = "1553"; 
Number(str.substring(0, str.length - 1));

Вместо этого побитовый оператор OR позволяет нам сделать так:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

#операция

Удалить последние цифры

Побитовый оператор ИЛИ также можно использовать для удаления любого количества цифр из конца целого числа. Это означает, что нам не нужно использовать подобный код для преобразования между типами:

let str = "1553"; 
Number(str.substring(0, str.length - 1));

Вместо этого побитовый оператор OR позволяет нам сделать так:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

#операции

Быстрое преобразование Float в Integer

Если вы хотите преобразовать число с плавающей точкой в целое число, вы можете использовать Math.floor(), Math.ceil() или Math.round(). Но есть также более быстрый способ обрезать число с плавающей точкой до целого числа, используя | оператор побитового ИЛИ.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Поведение | зависит от того, имеете ли вы дело с положительными или отрицательными числами, поэтому лучше использовать его вы точно уверены в операндах.

Если n положительно, n | 0 округляется в большую сторону. Если n отрицательное - округляется в меньшую. Чтобы выразиться точнее, эта операция удаляет все, что следует после десятичной точки, усекая число с плавающей точкой до целого числа.

Причины, по которым эти конкретные операции работают, заключаются в том, что после принудительного преобразования в целое число, значение остается неизменным.

#типы

Получить n последних элементов массива

Метод массива slice() может принимать отрицательные целые числа, и при наличии он будет принимать значения с конца массива, а не с начала.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

#массивы

Автоматический биндинг в классах

Мы можем использовать стрелочную нотацию ES6 в методах класса, и при этом подразумевается привязка. Это сохраняет несколько строк кода в нашем конструкторе классов, и мы можем с радостью попрощаться с повторяющимися выражениями, такими как
this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
export default class App extends Compononent {
constructor(props) {
super(props);
this.state = {};
}
myMethod = () => {
// This method is bound implicitly!
}
render() {
return (
<>
<div>
{this.myMethod()}
</div>
</>
)
}
};

#классы

Обрезание массива

Если вы хотите удалить значения из конца массива деструктивно, есть более быстрые альтернативы, чем использование splice() .

Например, если вы знаете размер вашего исходного массива, вы можете переопределить его свойство length следующим образом:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

Это особенно краткое решение. Тем не менее, я обнаружил, что время выполнения slice() метода еще быстрее. Если ваша главная цель - скорость, подумайте об этом:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);
console.log(array); // Result: [0, 1, 2, 3]

#массивы

Получить n последних элементов массива

Метод массива slice() может принимать отрицательные целые числа, и при наличии он будет принимать значения с конца массива, а не с начала.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

#массивы

Работа с аргументами функции

Вам не нужно определять параметры для функции. Вы можете просто использовать массиво-подобный объект функции argument.

function sum() {
var retval = 0;
for (var i = 0, len = arguments.length; i < len; ++i) {
retval += arguments[i];
}
return retval;
}
sum(1, 2, 3) // вернет 6

#аргументы