8 способов улучшить свой JavaScript код начинающему
ฝัง
- เผยแพร่เมื่อ 8 มิ.ย. 2020
- Мы продолжаем серию видео как улучшить свой код JavaScript начинающему. В этом видео я покажу 8 способов улучшить свой код JS если вы новичек в программировании. Рассмотрим фрагменты кода с примерами написания как было и как стало. Также покажу решение нескольких задачи на JavaScript. Если вы еще не применяете в своем коде программирования JavaScript стрелочные функции, шаблонные строки, модули, spread оператор, то вам обязательно к просмотру данное видео.
![1. CS50 на русском: Лекция #1 [Гарвард, Основы программирования, осень 2015 год]](http://i.ytimg.com/vi/SW_UCzFO7X0/mqdefault.jpg)
Благодарю Вас за видео.
Спасибо 😊
Хороший видос, спасибо
Каждый раз учусь чему то новому у тебя. Спасибо автор🤗
Это классно
Отличное видео.
Крутое видео, спасибо! Сделай видео про объекты пожалуйста!
9:50 Вместо str.split('') лучше использовать Array.from(str) - это позволит избежать проблем с многобайтовыми символами (например - emoji).
Но даже при использовании Array.from останутся проблемы с другими спецсимволами UTF-8. Нужно это иметь ввиду.
Формат огонь
Супер 👏🏻
Про #1 нужно было сказать, что у шаблонных строк есть одно важное преимущество - многострочность!!!
Про fill не знал, спасибо
Смысла от этого не много)
Даже сложно представить где в реальной жизни тебе пригодиться массив заполненный одинаковыми данными.
Оууу, на самом деле пригодится. Я бы мог конечно большие примеры делать, но видео было бы не 12 мин, а пол часа 😬😬
@@ITime_shorts решая code wars, стыкался с такой нуждой
Массив также можно забить нужным количеством одинаковых данных через цикл for. Если нужны рандомные, то я обычно делаю так:
let arr = new Array(10)
for(let i = 0; i < arr.length; i++) {
let str = `${Math.random}`
arr[i] = str.split("")[2]
}
Числа получаются случайными
6:06 Ошибка в утверждении "Проще работать с объектами и классами через ключевое слово *this*".
С объектами конечно проще работать (но не всегда), а вот с классами есть проблема:
Если объявить метод как стрелочный, то его нельзя будет переопределить в классе-потомке с вызовом этого метода у предка через super.
Особенно, это поставит в тупик новичка, который бездумно использовал новомодные фичи es6 в иерархии классов и теперь сидит над ошибкой
`Uncaught TypeError: (intermediate value).method1 is not a function` и не знает, что не так.
ТАКОЙ КАЙФ
Спасибо большое за вдохновение! Это круто
Ооо, спасибо на добром слове
Классное видео, можете сказать как называется ваша тема на VS?
Доброго времени суток. Спасибо за видео-урок.
Может в будущих видео Вы рассмотрите 3-и примера реализации рекурсии в функциях, от простого к сложному?
А еще видео по массивам объектов, поиск определённого значения свойства объекта. Как пример массив пользователей, каждый пользователь - объект с тремя свойствами { name: Pavel, login: user0, password: 123 }. Если введенные пользователем значения совпадают со значениями свойств login и password - появится alert с приветствием и значением свойства name.
По let и const, можно заметить, что если это объект или массив то данные можно изменять.
нельзя, константа есть константа, в случаи с обьектами переменная хранит ссылку на обьект, но не сам обьект, по этой ссылке ты можешь изменить данные обьекта, но ты не сможешь изменить ссылку на обьект которая хранится в константе
strrev и забытые ";" - как раз то, что надо новичкам для написания идеально чистого кода =)
У меня jshint ругается если не ставлю ;
Зачем cars.length в скобки оборачивать было в последнем примере? Там где рандомный элемент массива выбирался.
#5 про какие фигурные скобки идет речь, участок кода, где в данном примере он? Глобальный блок?
Расскажи про связку React, GraphQL, Apollo.
Окей
Когда практические уроки по JS?
Так уже есть же
Я новичок. Спасибо за видео🖥
👍🏻👍🏻👍🏻
По const немного не дотянул... Const всего лишь означает, что объект нельзя переназначить. Но если сделать const ar = [1,2]; , то можно будет потом сделать ar[0] = 3; и если в консоли вывести ar, то будет [3, 2]. То же самое и с объектами. Но вот сделать потом ar = "New Value" уже нельзя, т.к. было использовано const
Можно практический пример, где может понадобится .fill()? А в остальном - что-то в этот раз слишком базовые истины. Новички вроде меня сразу и учат ES6 - стрелочные функции, spread, const, let, тернарные операторы и прочее... а не переучиваются на новый синтаксис.
Практический пример: Нужно создать массив Uint32 определённого размера, со значениями 1 во всех ячейках (по-умолчанию, значения 0).
var uint32_len16 = new Uint32Array(16).fill(1);
console.log(uint32_len16);
Если брать простой массив - то другой пример из практики: нужно создать массив строк определённого размера. По-умолчанию, каждый элемент массива - пустая строка.
var strArr = new Array(20).fill('');
console.log(strArr);
Хорошее видео! Только не обратные ковычки, это называется апостроф! Спасибо за видео!
Спасибо ✌🏻
Бэктик ещё
с тайм-кодами было бы здорово
Сделайте:)
@@SuprunAlexey извольте, ваш канал
@@SuprunAlexey Странный подход программиста, предоставляющего свой продукт.
Небось и всякие переходы к определениям пишешь сам плагинами для VSCode?
Или не пользуешься?
Какой-то урок по ES6 получился, а не то как улучшить код)
Начинающим идеально подходит, не все понимают суть ES6
@Igor Sudenko Что плохо! Очень плохо.
На 6 минуте было сказано, что при помощи стрелочных функций можно легко работать с объектами и классами через this.
Автор видео забыл сказать, про то, что у них по факту нет этого ключевого слова. Для работы с this в стрелочных функциях лучше всего будет присвоить this какой-нибудь переменной.
Пример:
const obj = {
name: 'Robert Martin',
hi: ['hello', 'hey'],
sayHi() {
const self = this // (!)
this.hi.forEaxh(str => console.log(name + hi)
}
}
Более подробно про стрелочные функции можно прочитать здесь: learn.javascript.ru/arrow-functions
В стрелочной функции this берется из контекста ее объявления.
Если она была объявлена внутри метода объекта, то this в ней будет указывать на тот объект.
есть еще более изящный способ сократить блок IF, это оператор &&. Я через него делаю даже замену ELSE. И все в одну строку!
let test = 2;
let result = !!test && (test === 2) && !console.log('is ok!'); // проверяем test и что он равен 2, если все верно, то выводим сообщение
console.log(result); // выводим результат выполнения предыдущей строки - КРУТЬ! правда?
Не хочу показаться токсичным говном, но блок if, как по мне изящней выглядит
@@user-zn5ky3fw5h в основном да, согласен. Однако, мой пример (заменим лог на рандом):
let result = !!test && (test === 2) && Math.random(); // если test существует и равен 2, то в result запишем рандомное число от 0 до 1, иначе запишем false
с IF будет выглядеть вот так:
let result; // чтобы переменная присвоила значения внутри блока, ее надо объявить вне этого блока
if (test && test === 2) { // проверяем что test существует и равен двум
result = Math.random(); // запоминаем результат работы в result
} else {
result = false; // test не объявлен, или он не равен двум
};
Полагаю, из данного примера видно, на сколько код стал избыточным при использовании IF. Бывают задачи в которых блоки нужны. Но чаще всего с IF-ом огород городить приходится... Например:
if (meColor) {
element.style.backgroundColor = '#b22222';
} else {
element.style.backgroundColor = '#006400';
}
;
или вот так, без него:
element.style.backgroundColor = (!!meColor && '#b22222') || '#006400';
Надеюсь, выгода оптимизации очевидна. В добавок, интерпретатор выполнит такой код быстрее, без создания конструкции блока, что еще и память сэкономит.
@@LikeOnFilm зачем же так усложнять? Здесь намного выгоднее использовать тернарный оператор: element.style.backgroundColor = meColor? '#b22222': '#006400'. А теперь сравните со своей записью. Даже if-else блок в вашем примере выглядит значительно более читаемо. Я согласен с выражением про оптимизацию кода, но не в случаях, когда жертвуется читаемость.
P.s. работаю frontend разрабом недавно, если тред читает опытный программист, пожалуйста, поделитесь мнением.
P.s.s.: во всех ваших примерах выгоднее использовать тернарный оператор, он и более читаемый и не влечёт создание блоков if-else. Ваш способ можно использовать при работе с фреймворками - при условном рендеринге (и то не полностью, т.к. нет false-части), например в реакте
{ shouldRender && }
отрендерится при shouldRender===true.
А зачем двойные восклицательные знаки? с таким успехом их и десять штук можно поставить. Просто test вместо !!test Плюс вывести то он выведет, но сам result будет возвращать булевое значение, что не всегда удобно. Мне больше нравится тернарный (?)
А если написать console.log(), то можно выводить что-то в консоль 😂
v
Ок
теперь ясен уровень помоек ютуба) 183 тыс. подписчиков, а он тернарные операторы рассказывает, я ору
Что тебе не так?
@@SuprunAlexey а я причем тут? Просто ору с таких как ты, которые абузят популярность будучи бесполезным челиком)
Ну так а ты подумай что аудитория канала новички, и какая информация им полезна. А так то почитай вопросы под видео, которые люди задают и поймёшь что видимо есть определенная аудитория людей для которых эти видео. А бесполезный увы тут ты со своим комментарием:)
@Fetrix клоун)
868 просмотров•Премьера состоялась 112 минут назад
Удивительно
2:18 Ошибка. Переменная *b* создаётся в глобальной области видимости, а не как *const* (как автор очевидно хотел).