const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 5]
for (let i = 0; i < array.length; i++){
console.log(i);
}
for (let i = 0, length = array.length; i < length; i++){
console.log(i);
}
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // [0, 1, 2, 3]
Если понравился пост, добавь
И, мы обязательно разберем данный вопрос подробнее!
CodeBase | Frontend |#js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍3
CodeBase | Frontend | #ide
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, SCSS, TS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
CodeBase | Frontend | #Stylus
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: HTML, CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥6❤2
Псевдокласс
:empty
используется для выбора пустых элементов. Пустыми считаются элементы без потомков и текста.🗣 В реальных проектах этот селектор сильно помогает, когда нет возможности управлять элементом, но точно знаешь, что иногда он может быть пустым. Использование псевдокласса :empty позволяет убрать лишние отступы или рамки, которые могут быть у пустого элемента.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS, TypeScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
String — это обёртка над примитивным строковым типом, которая содержит дополнительные методы работы со строками:
new String()
:const primitive = 'приветики'
const str = new String('приветики')
trim()
Для множественных замен и поиска удобнее всего пользоваться регулярными выражениями, но это отдельный микроязык, который нужно учить.
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, CSS, JavaScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6
::marker
— псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.Создадим ненумерованный список
<ul>
и установим синий цвет точки для каждого элемента <li>
:<ul>
<li>Цвет точек</li>
<li>этого ненумерованного списка</li>
<li>#2e9aff</li>
</ul>
li::marker {
color: #2e9aff;
}
Псевдоэлемент ::marker работает только на элементах списка.
::before
, ::after
, ::first-letter
, ::first-line
.::marker
необходимо указывать с двумя двоеточиями.CodeBase | Frontend | #html
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5❤2👏2🥰1
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💩3
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, CSS
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8👎1
Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора
if...else
.const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять
(A) ? (B) : (C)
Где A — условие, B — первое выражение, C — второе выражение.
Если первый операнд A вычисляется в истинное выражение
true
, то оператор вернёт выражение B. Если в false
— вернёт выражение C.const num = 10
const result = num > 10 ? 'Число больше 10' :
num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'
В этом случае запись идентична использованию конструкций
if...else if ... else
. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. 🗣️ Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.
CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🤯3🤔2
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2👎2❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Технологии: SVG, SCSS, JavaScript
CodeBase | Frontend | #animate
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥1😁1
Селекторы по атрибутам в CSS — это мощный инструмент для стилизации элементов на основе наличия или значений атрибутов. Они позволяют сделать стили более гибкими и динамичными.
[attribute]
: применяет стиль к элементам с указанным атрибутом. Например:[disabled] { opacity: 0.5; }
[attribute="value"]
: стилизует элементы с определённым значением атрибута:[type="text"] { border: 1px solid blue; }
[attribute^="value"]
— начинается с, [attribute$="value"]
— заканчивается на, [attribute*="value"]
— содержит.[href^="https"] { color: green; }
Этот код применит зелёный цвет ко всем ссылкам, начинающимся с https.
CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
CodeBase | Frontend | #tool
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5