JavaScript заметки

Async Await в языке JavaScript Async Await позволяет выполнять то же самое, что мы выполнили с помощью генераторов и промисов, но с меньшими усилиями: var request = require('request'); function getJSON(url) { return new Promise(function(resolve, reject) { request(url, function(error, response, body) { resolve(body); }); }); } async function main() { var data = await getJSON(); console.log(data); // NOT undefined! } #функции

где-то в офисе скиллбокс Что? Снова слили?! Да как же они ЗА***И 🤬 Да, слили, и не только вас, скиллы, а ещё и терабайты курсов других топовых онлайн школ. Мы не боимся, бан неизбежен. Но пока наш канал существует, ловите ссылки: SkillBox.rar (Размер: 593 ГБ) GeekBrains.rar (Размер: 342 ГБ) Udemy.rar (Размер: 223 ГБ) ЯндексПрактикум.rar (Размер: 447 ГБ) SkillFactory.rar (Размер: 199 ГБ) ТопКниги.rar (Размер: 103 ГБ)

WeakMaps Чтобы хранить частные версии данны можем использовать WeakMaps для хранения наших значений: let _age = new WeakMap(); class Person { constructor(age) { _age.set(this, age); } incrementAge() { let age = _age.get(this) + 1; _age.set(this, age); if (age > 50) { console.log('Midlife crisis'); } } } Самое интересное в использовании WeakMaps для хранения наших личных данных заключается в том, что их ключи не выдают имена свойств, которые можно увидеть с помощью Reflect.ownKeys(): > const person = new Person(50); > person.incrementAge(); // 'Midlife crisis' > Reflect.ownKeys(person); // [] #функции

Maps в языке JavaScript Maps позволяют нам устанавливать, получать и искать значения (и многое другое).

let map = new Map();
> map.set('name', 'david');
> map.get('name'); // david
> map.has('name'); // true

Самая удивительная часть Maps - это то, что мы больше не ограничиваемся использованием строк. Теперь мы можем использовать любой тип в качестве ключа, и он не будет привязан к типу для строки. let map = new Map([ ['name', 'david'], [true, 'false'], [1, 'one'], [{}, 'object'], [function () {}, 'function'] ]); for (let key of map.keys()) { console.log(typeof key); // > string, boolean, number, object, function } Примечание. Использование функций или объектов не будет работать при проверке равенства с использованием таких методов, как map.get(). Таким образом, придерживайтесь примитивных значений, таких как строки, булевы и числа. #функции

Frontend-разработчики создали каналы, в которых ежедневно выходят полезные посты. Специалист по JavaScript - образовательный канал по JS человеческим языком, с повседневными практическими заметками по языку. Сеньор Помидор - канал для frontend программистов, с примерами лучших решений на HTML|CSS|JS. Figma - Templates - канал, где собраны примеры реальных макетов в Figma, которые заказчики присылают на вёрстку.

Symbol.for(key) Symbol.for(key) создает символ, который по-прежнему неизменен и уникален, но может быть просмотрен глобально. Два идентичных вызова Symbol.for(key) возвращают один и тот же символ.

Symbol('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol('foo') // false
Symbol.for('foo') === Symbol.for('foo') // true

Примечательным примером использования Symbol для взаимодействия является Symbol.iterator, который существует во всех повторяющихся типах в ES6: массивы, строки, генераторы и т. д. #функции

Symbol( ) Вызов Symbol () или Symbol (описание) создаст уникальный символ, который не может быть просмотрен глобально. const refreshComponent = Symbol(); React.Component.prototype[refreshComponent] = () => { // делать что-нибудь } #функции

Оператор распространения В ES5 мы могли найти максимальные значения в массиве, используя метод apply на Math.max следующим образом:

Math.max.apply(null, [-1, 100, 9001, -32]); // 9001

В ES6 мы используется оператор распространения для передачи массива значений, которые выступают параметрами для функции:

Math.max(...[-1, 100, 9001, -32]); // 9001

Мы можем легко конкатенировать литералы массивов:

let cities = ['San Francisco', 'Los Angeles'];
let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

#операторы

Модули в языке JavaScript До ES6 мы использовали библиотеки, такие как Browserify, для создания модулей на стороне клиента. С ES6 мы можем напрямую использовать модули всех типов (AMD и CommonJS). Экспорт в CommonJS module.exports = 1; module.exports = { foo: 'bar' }; module.exports = ['foo', 'bar']; module.exports = function bar () {}; #модули

Станьте востребованным фронтенд-разработчиком уже в 2023 году. Сделайте шаг в новую жизнь прямо сейчас. Записывайтесь на курс от Хекслета и получайте скидку 10% и подарок на выбор: депозит 20 000 ₽, базовая подписка на 5 месяцев или премиум-подписка на 1 месяц. Вы также можете порадовать не только себя, но и близкого человека. Воспользуйтесь уникальным предложением для двоих: купите вторую профессию со скидкой 40%. Оцените формат и решите, стоит ли продолжать. Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации! На профессии «Фронтенд-разработчик» вы: ✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно. ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров. ✔️Научитесь работать с чужим кодом и оформлять пул-реквесты в Open Sours проектах. Шагните в новую профессию. Успейте оставить заявку до 31 декабря, чтобы получить новогодние подарки.

Деструктуризация Деструктуризация позволяет нам извлекать значения из массивов или объектов и хранить их в переменных. Деструктурированные массивы

var arr = [1, 2, 3, 4];
var a = arr[0];
var b = arr[1];
var c = arr[2];
var d = arr[3];
let [a, b, c, d] = [1, 2, 3, 4];

console.log(a); // 1
console.log(b); // 2

Деструктурированные объекты var luke = { occupation: 'jedi', father: 'anakin' }; var occupation = luke.occupation; // 'jedi' var father = luke.father; // 'anakin' let luke = { occupation: 'jedi', father: 'anakin' }; let {occupation, father} = luke; console.log(occupation); // 'jedi' console.log(father); // 'anakin' #объекты #массивы

Литералы шаблонов в языке JavaScript Используя литералы шаблонов, мы можем задавать строки со специальными символами, без необходимости их явного сокрытия.

var text = "This string contains "double quotes" which are escaped.";
let text = This string contains "double quotes" which don't need to be escaped anymore.;

Литералы шаблонов также поддерживают интерполяцию, что упрощает конкатенацию строк и значений:

var name = 'Tiger';
var age = 13;

console.log('My cat is named ' + name + ' and is ' + age + ' years old.');

Еще проще: const name = 'Tiger'; const age = 13; console.log(My cat is named ${name} and is ${age} years old.); #функции

.repeat( )

function repeat(string, count) {
    var strings = [];
    while(strings.length < count) {
        strings.push(string);
    }
    return strings.join('');
}

Теперь у нас есть доступ к реализации: // String.repeat(numberOfRepetitions) 'meow'.repeat(3); // 'meowmeowmeow' #функции

.includes( )

var string = 'food';
var substring = 'foo';

console.log(string.indexOf(substring) > -1);

Чтобы обозначить ограничение строки, мы можем просто использовать .includes(), который вернет логическое значение, вместо проверки > -1: const string = 'food'; const substring = 'foo'; console.log(string.includes(substring)); #методы

Замена IIFEs блоками Проблема использования немедленно вызываемых функций, заключалась в том, что нужно было задавать значения переменным в пределах области функции. Теперь у нас есть возможность создавать блочные области, которые не ограничены исключительно функциональной областью.

(function () {
    var food = 'Meow Mix';
}());

console.log(food); // Reference Error

А теперь используем блочную область: { let food = 'Meow Mix'; }; console.log(food); // Reference Error #функции

mdc Если вы пробовали гуглить что-нибудь по JavaScript на эту тему, то добавьте в запрос "mdc" тогда первые результаты будут от Mozilla Developer Center. Например: Google:

 javascript array sort mdc

(в большинстве случаев можно исключить "javascript") UPD: Mozilla Developer Center был переименован в Mozilla Developer Network. Ключевое слово "mdc" работает по-прежнему, но возможно вскоре нужно будет использовать "mdn". #полезно

Свойства объекта Вы можете получить доступ к свойствам объекта с помощью [] вместо '.'. Это позволяет найти свойство, которое соответствует переменной.

obj = {a:"test"}; 
var propname = "a"; 
var b = obj[propname]; // "test"

Также вы можете использовать это для получения/установки значения свойства, если его название неразрешенный идентификатор. obj["class"] = "test"; // class - зарезервированное слово; obj.class было бы недоступно. obj["two words"] = "test2"; // использования оператора . невозможно с пробелом. #объекты

Область действия в JavaScript JavaScript не имеет области действия блока:

var x = 1; 
{ var x = 2; } 
alert(x); // выводит 2

#общее

Значения по умолчанию Вы можете использовать оператор || в выражении присваивания для предоставления значения по умолчанию:

var a = b || c;

Переменная a получит значение c только если b = false (то есть если null, false, undefined, 0, empty string, или NaN), иначе a получит значение b. Это часто полезно в функциях, когда вы хотите присвоить значение по умолчанию аргументу в случае, если оно не указано: function example(arg1) { arg1 || (arg1 = 'default value'); } #операторы

Оператор in Вы можете использовать оператор in для того чтобы проверить есть ли такой ключ у объекта:

var x = 1; 
var y = 3; 
var list = {0:0, 1:0, 2:0};
x in list; //true 
y in list; //false 
1 in list; //true 
y in {3:0, 4:0, 5:0}; //true

Если вы посчитаете, что литералы объекта недостаточно хорошо выглядят, то вы можете комбинировать их с помощью функции без параметров: function list() { var x = {}; for(var i=0; i < arguments.length; ++i) x[arguments[i]] = 0; return x } 5 in list(1,2,3,4,5) //true #операторы