Javascript

​Чистые функции в JavaScript: руководство для начинающих

Функция — это повторно используемый блок кода, который принимает аргументы и возвращает вычисленное значение. А чистая функция всегда возвращает одно и то же значение при одинаковых аргументах и не создает побочных эффектов.

Давайте более подробно рассмотрим, что такое чистые функции и почему они полезны:

https://dmitripavlutin.com/javascript-pure-function/

#javascript

Что было добавлено в ECMAScript в 2023 году

ECMAScript — это стандарт языка программирования JavaScript, который устанавливает правила, синтаксис и другие критерии создания JavaScript-кода.

ECMAScript ежегодно дополняется сообществом разработчиков JavaScript и соответствует стандартам ECMA International.
Эти обновления позволяют создавать более качественные и быстрые веб-приложения, а также обеспечивают возможность масштабирования и поддержки кода в будущем.

Обновления помогают большинству веб-приложений стать более мощными и производительными, что расширяет возможности для создания инновационных и уникальных приложений на основе JavaScript.

Вот, какие функции были добавлены в ECMAScript в 2023 году.

1. Поиск элемента в массиве
Эта функция позволяет найти нужный элемент — от первого до последнего — в массиве с помощью установленного условия.

const array = [{a: 1, b: 1}, {a: 2, b: 2}, {a: 3, b: 3}, {a: 4, b: 4}]

console.log(array.findLast(n => n)); //result -> {a: 4,b: 4 }

console.log(array.findLast(n => n.a * 5 === 20)); // result -> {a:4,b:4} as the condition is true so it returns the last element.

console.log(array.findLast(n => n.a * 5 === 21)); //result -> undefined as the condition is false so return undefined instead of {a:4,b:4}.

console.log(array.findLastIndex(n => n.a * 5 === 21)); // result -> -1 as the condition is not justified for returning the last element.

console.log(array.findLastIndex(n => n.a * 5 === 20)); // result -> 3 which is the index of the last element as the condition is true.

2. Грамматика Hashbang
Эта функция позволит нам использовать Hashbang/Shebang в некоторых CLI.

Shebang представлен #! и представляет собой специальную строку в начале скрипта, которая сообщает операционной системе, какой интерпретатор использовать при выполнении скрипта.

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(2*3);

#!/usr/bin/env node
// in the Module Goal
export {};
console.log(2*2);

Строка #!/usr/bin/env node вызывает исходный файл Node.js напрямую как исполняемый файл.

3. Символы-ключи в WeakMap
Теперь можно использовать уникальные символы в качестве ключей.

До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности.

Symbol — это единственный примитивный тип в ECMAScript, который позволяет использовать для него уникальные значения. Использовать Symbol теперь можно и в качестве ключа вместо создания нового объекта с помощью WeakMap.

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

4. Изменить массив через копирование
Обновление предоставляет дополнительные методы в Array.prototype для внесения изменений в массив, возвращая его новую копию с изменением вместо обновления исходного массива.

Новые введенные функции Array.prototype:

Array.prototype.toReversed()
Array.prototype.toSorted(compareFn)
Array.prototype.toSpliced (start, deleteCount, … items)
Array.prototype.with(index, value)
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toReversed */

const reversed = numbers.toReversed();
console.log("reversed", reversed); // "reversed", [9, 8, 7, 6, 5, 4, 3, 2, 1]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSorted */
const sortedArr = numbers.toSorted();
console.log("sorted", sortedArr); // "sorted", [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]
/* with */
const replaceWith = numbers.with(1, 100);
console.log("with", replaceWith); // "with", [1, 100, 3, 4, 5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

/* toSpliced */
const splicedArr = numbers.toSpliced(0, 4);
console.log("toSpliced", splicedArr); // "toSpliced", [5, 6, 7, 8, 9]
console.log("original", numbers); // "original", [1, 2, 3, 4, 5, 6, 7, 8, 9]

@javascriptv

iOS Notifications — анимированные оповещения в стиле iOS. Реализованы с помощью SCSS и TypeScript.

https://codepen.io/ykadosh/pen/ZERjpRJ

@javascriptv

Login & Sign Up Form Concept — концепт формы авторизации и регистрации на сайте. Переключение между двумя видами взаимодействия происходит с приятной анимацией.

https://codepen.io/ZuthLonble/pen/RwNZgbR

@javascriptv

​Введение в JavaScript Temporal API

Реализация объекта Date() в JavaScript была скопирована непосредственно из Java в 1995 году. Два года спустя Java отказалась от неё, но в JavaScript она осталась для обратной совместимости. При этом Date() крайне неудобен и часто непредсказуем, а API оставляет желать лучшего.

К счастью, есть Temporal API, которое решает эту проблему. Подробнее о нём:

https://webdevblog.ru/vvedenie-v-javascript-temporal-api/

#javascript

💡Задача "Ближайшая сумма трех"

Условие задачи: дан целочисленный массив и целевое значение суммы. Необходимо найти три числа из массива, которые либо в результате суммирования равны значению целевой суммы либо же максимально близки к ней по модулю.

Каждый массив имеет единственное решение.

Пример:

Ввод: nums = [-1,2,1,-4], target = 1
Вывод: 2
Объяснение: (-1 + 2 + 1 = 2)

Ввод: nums = [0,0,0], target = 1
Вывод: 0


Решение:
1. Сортировка входного массива
2. Используйте два указателя влево и вправо для вычисления локальной суммы, сравните цель с локальной суммой

/**
* @param {number[]} nums
* @param {number} target
* @return {number}
*/
var threeSumClosest = function(nums, target) {
nums.sort((a,b)=>a-b);
let closest = Infinity;
for (let i=0;i<nums.length-2;i++) {
let left = i+1; right = nums.length-1;
while (left < right) {
let localSum = nums[i] + nums[left] + nums[right];
if (Math.abs(localSum - target) < Math.abs(closest - target)) closest = localSum;
if (localSum > target) right--;
else left++;
}
}
return closest;
};

Пишите свое решение в комментариях👇

@javascriptv

4 функциональные концепции, которые следует знать каждому разработчику JavaScript

Функциональное программирование — один из философских подходов при разработке программного обеспечения, который захватил мир JavaScript. Несмотря на то что функциональное программирование берет начало из таких языков, как Haskell и Lisp, оно все больше ассоциируется с разработчиками JavaScript, и не зря. Как мы вскоре узнаем, JavaScript нативно реализует все функциональные концепции, о которых будет идти речь в этой статье. Возможно, вы уже используете некоторые из этих методов, даже не подозревая об этом.

Но что именно они собой представляют и как разработчики JavaScript используют их для улучшения кода? Рассмотрим 4 концепции функционального программирования, которые можно легко реализовать в JavaScript.

•Читать

@javascriptv

🔥 100+ уникальных шаблонов CSS | Лучшая коллекция

https://css-pattern.com/

@javascriptv

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO

#js #анимация #css #javascript

@javascriptv

💡Задача "Подсчет хороших узлов в двоичном дереве"

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

Качественным элементом считается такой узел, значение которого больше значения родительского узла.

Пример:

Ввод: root = [3,1,4,3,null,1,5]
Вывод: 4
Объяснение: *качественные узлы помечены голубым цветом на вложении.

Решение:

// Time complexity: O(n)
// Space complexity: O(n)

var goodNodes = function(root) {
let count = 0;

function dfs(root, max) {
if (root == null)
return;

if (root.val >= max) {
max = root.val;
count++;
}

dfs(root.left, max);
dfs(root.right, max);
}

dfs(root, root.val);
return count;
};

Пишите свое решение в комментариях👇

@javascriptv

TOASTS

Отличный пример реализации всплывающих уведомлений: информационное, предупреждающее уведомления и уведомление об успехе.

#javascript #css

https://codepen.io/mrtrimble/pen/mdEgzzR

@javascriptv

💡Задача "Максимально раздвижное окно"

Условие: дан целочисленный массив, а также размер k подмассива, начинающегося от левой границы, и заканчивающегося в процессе выполнения алгоритма у правой границы. На каждом шаге можно просматривать k последовательных элементов скользящего массива. На каждом шаге надо определить максимальное значение скользящего.

Пример:

Ввод: nums = [1,3,-1,-3,5,3,6,7], k = 3
Вывод: [3,3,5,5,6,7]

Объяснение:
Скользящее на каждой итерации Max
-------------------------- -----
[1 3 -1] -3 5 3 6 7 3
1 [3 -1 -3] 5 3 6 7 3
1 3 [-1 -3 5] 3 6 7 5
1 3 -1 [-3 5 3] 6 7 5
1 3 -1 -3 [5 3 6] 7 6
1 3 -1 -3 5 [3 6 7] 7

Ввод: nums = [1], k = 1
Вывод: [1]

Решение

Пишите свое решение в комментариях👇

@javascriptv

​Руководство по Solid JS

Solid JS — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов. Она однократно компилирует шаблоны, а при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

Видео-руководство по Solid JS на примерах знакомит со всеми аспектами использования этой библиотеки:

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gU_GvFygZFu0aBysPilkbB

#js

💡Задача "Поиск в повернутом отсортированном массиве"

Условие: дан массив, сдвинутый относительно опорного элемента, который неизвестен ( массив после сдвига относительно опорного элемента имеет следующий вид: [nums[k], nums[k+1], ..., nums[n-1], nums[0], nums[1], ..., nums[k-1]])

Массив [0,1,2,4,5,6,7], имея опорный элемент 3, будет выглядеть следующим образом: [4,5,6,7,0,1,2].

Необходимо осуществить поиск целевого элемента в сдвинутом массиве, определив его индекс, или же вывести -1 при его отсутствии.

Решение должно быть за O(log n) по времени.

Пример:

Ввод: nums = [4,5,6,7,0,1,2], target = 0

Вывод: 4

Ввод: nums = [4,5,6,7,0,1,2], target = 3

Вывод: -1

Решение

Пишите свое решение в комментариях👇

@javascriptv

Image Hover — карточки с эффектом при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/littlesnippets/pen/wzerbP

@javascriptv

💡Задача "Самый короткий мост"

Условие: на вход подается матрица, в которой 1 - суша, 0 - вода.

Остров представляет из себя совокупность частей суши, соединенных в четырех направлениях. На решетке существуют только два острова.

Можно изменить 0 на 1 для соединения двух островов в один.

Необходимо посчитать количество смен нулей на единицу для соединения двух островов.

Пример:

Ввод: grid = [[0,1],[1,0]]

Вывод: 1

Объяснение:

Ввод: grid = [[0,1,0],[0,0,0],[0,0,1]]

Вывод: 2

Решение

Пишите свое решение в комментариях👇

@javascriptv

Инструменты фронтенд-разработчика — ESLint

ESLint — это популярный JavaScript-линтер с открытым исходным кодом, который используется для анализа кода и выявления в нём ошибок.

Также ESLint предоставляет разработчикам набор правил, которые могут быть настроены в соответствии с конкретными потребностями проекта или команды. По сути, благодаря этому инструменту намного проще поддерживать стилистику кода и избегать базовых ошибок:

https://eslint.org/

#js

@javascriptv

WebGL Apple Cards — красивые анимированные карточки с эффектом при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/smpnjn/pen/mdrWPpK

@javascriptv

💡Задача "Коко ест бананы"

Условие: обезьяна по имени Коко любит бананы. Есть n кол-во связок бананов, где i-ая связка содержит piles[i] бананов. Смотритель зоопарка ушел и вернется через h часов.

Коко может поедать бананы с скоростью k бананов в час. Если в связке менее k бананов, она поедает всю связку и более в этот час не ест.

Коко кушает медленно, но уверенно: обезьяна нацелена на съедение всех бананов до возвращения смотрителя.

Необходимо вычислить минимальное число k, такое что все бананы будут съедены за h часов.

Пример:

Ввод: piles = [3,6,7,11], h = 8

Вывод: 4

Ввод: piles = [30,11,23,4,20], h = 5

Вывод: 30

Решение:

/**
* @param {number[]} piles
* @param {number} speed
* @param {number} h
* @return {boolean}
*/
const canEatAll = (piles, speed, h) => {
let totalTime = 0;
for (const bananas of piles) {
totalTime += Math.ceil(bananas / speed);
if (totalTime > h) {
return false;
}
}
return true;
};

/**
* @param {number[]} piles
* @param {number} h
* @return {number}
*/
var minEatingSpeed = function (piles, h) {
let left = 1, right = Math.max(...piles);
while (left <= right) {
const mid = Math.floor(left + (right - left) / 2);
if (canEatAll(piles, mid, h)) {
right = mid - 1;
} else {
left = mid + 1;
}
}
return left;
};

Пишите свое решение в комментариях👇

@javascriptv

📌 Задача с leetcode. Max Area of Island

Максимальная площадь острова

Сложность: Средняя

Условие задачи: Условие задачи:

Дан двумерный массив размера m x n. "1" отвечает за сушу, "0" - за океан. Необходимо опеределить максмимальную площадь острова из островов, расположенных на карте.

Островом считается территория, образованная из "1", расположенных сверху, справа, снизу и слева относительно друг друга.

Пример:

Ввод: grid = [[0,0,1,0,0,0,0,1,0,0,0,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,1,1,0,1,0,0,0,0,0,0,0,0],[0,1,0,0,1,1,0,0,1,0,1,0,0],[0,1,0,0,1,1,0,0,1,1,1,0,0],[0,0,0,0,0,0,0,0,0,0,1,0,0],[0,0,0,0,0,0,0,1,1,1,0,0,0],[0,0,0,0,0,0,0,1,1,0,0,0,0]]

Вывод: 6

Ввод: grid = [[0,0,0,0,0,0,0,0]]

Вывод: 0

Решение

/**
* @param {number[][]} grid
* @return {number}
*/
var maxAreaOfIsland = function(grid) {
const ROWS = grid.length, COLUMNS = grid[0].length;

const DFS = (row, column) => {
const stack = [[row, column]];
let currRow, currColumn, resultArea = 0;
while (stack.length !== 0){
[currRow, currColumn] = stack.pop();
if (grid[currRow][currColumn] !== 1)
continue;

grid[currRow][currColumn] = 2;
resultArea++;
if (currRow + 1 < ROWS)
stack.push([currRow + 1, currColumn]);
if (currRow - 1 >= 0)
stack.push([currRow - 1, currColumn]);
if (currColumn + 1 < COLUMNS)
stack.push([currRow, currColumn + 1]);
if (currColumn - 1 >= 0)
stack.push([currRow, currColumn - 1]);
}
return resultArea;
};

let maxArea = 0;
for (let r = 0; r < ROWS; r++){
for (let c = 0; c < COLUMNS; c++){
if (grid[r][c] === 1){
maxArea = Math.max(maxArea, DFS(r, c));
}
}
}
return maxArea;
};

Пишите свое решение в комментариях👇

@javascriptv