JavaScript заметки

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 #операторы

Журнал Академии Яндекса — интересно об IT Помогает молодым IT-специалистам работать с удовольствием и эффективно → Расскажет, как попасть в компанию, которая вдохновляет. → Научит правильно организовать работу, расти в глазах коллег (и профессионально). → Поможет на лету решать проблемы, стать своим в сообществе и работать без стресса. → Покажет, как устроена работа в Яндексе изнутри — с точки зрения команд, продуктов и технологий. → Подсветит гиковские темы: от старых компьютерных игр до редких языков программирования. Подписывайтесь, чтобы не пропустить свежие публикации!

Функции в JavaScript В частности функции могут быть переданы как параметры, например Array.filter() является функцией обратного вызова:

[1, 2, -1].filter(function(element, index, array) { 
   return element > 0 }); // -> [1,2]

Также вы можете объявить "private" функцию, которая существует только в области действия определенной функции: function PrintName() { var privateFunction = function() { return "Steve"; }; return privateFunction(); } #функции

Операторы === и !== Всегда используйте === и !== вместо == и !=. alert('' == '0'); //false alert(0 == ''); // true alert(0 =='0'); // true == не является транзитивным. Если вы используете === , то оно как и ожидалось будет возвращать false для всех вышеперечисленных случаев. #операторы

Работа с аргументами функции Вам не нужно определять параметры для функции. Вы можете просто использовать массиво-подобный объект функции 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 #аргументы

Получить 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]

#массивы