​Как отсортировать массив в JavaScript?

Сортировка массивов в JavaScript делается через метод array.sort()

Сортировка массива в алфавитном порядке:

 var myarray=["Bob", "Bully", "Amy"]
 myarray.sort() // Массив становится ["Amy", "Bob", "Bully"]

А теперь, посмотрите на то, что случится когда мы вызовем array.sort() на массиве из чисел:

 var myarray=[7, 40, 300]
 myarray.sort() //Теперь он становится таким [300,40,7]

Хотя 7 в численном порядке меньше, чем 40 или 300, в лексикографическом порядке, семёрка больше, таким образом она оказывается правее всех в отсортированном массиве. Всегда имейте в виду, что по-дефолту array.sort() сортирует элементы в лексикографическом порядке.

array.sort() допускает дополнительные параметры в виде функций
Формат такой функции будет выглядеть таким образом:

 function sortfunction(a, b){
  //Тут сравнивается a и b, и возвращается -1, 0 или 1.
  //Если возвращается -1, то число смещается влево
  //Если вернется 1, то число смещается вправо
  //Если 0, то остается на месте
 }
 array.sort(sortfunction)

Когда такая функция передаётся в array.sort(), элементы массива сортируются, основываясь на взаимосвязи между ними.

👉 @frontendInterview

👉 @frontendInterview

Как обрезать текст в блоке после n-ной строки?

Cвойство line clamp усекает текст до определенного количества строк.
Синтаксис

 .module {
   line-clamp: [none | integer];
 }

В текущем варианте спецификации line-clamp принимает следующие значения:
1. none: не устанавливает максимальное количество строк, и в результате усечение не происходит.
2. integer: устанавливает максимальное количество строк перед усечением контента, а затем отображает многоточие (…) в конце последней строки.

Эй, а не могу я сделать это с помощью text-overflow?
text-overflow действительно имеет значение ellipsis, которое будет обрезать текст:
.truncate {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
Но text-overflow обрежет текст только в первой строке, а если вам нужно вывести две или более, можно использовать line-clamp

👉 @frontendInterview

Появился топовый курс с акцентом на практику для Middle фронтенд-разработчиков!

Тимлиды с опытом работы в Яндексе, Вконтакте, TON и Frogly научат создавать масштабные продукты уровня ведущих международных компаний. На курсе вам предстоит с нуля построить новостную ленту и превратить её в рабочий production-ready сервис.

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

За 5 месяцев обучения вы получите все знания и навыки, необходимые для работы над крупными проектами в крутой команде. Вы познакомитесь с best practices современной фронтенд-разработки, разберётесь, как устроен веб, научитесь разговаривать на одном языке с Backend, QA и DevOps специалистами и даже сможете делать их работу самостоятельно.

Записывайтесь на курс по ссылке до 16 сентября — по промокоду вы получите скидку 10%. Также на сайте доступна бесплатная демоверсия — можете начать с неё. Ждём вас!

👉 @frontendInterview

👉 @frontendInterview

JavaScript Next

Благодаря множеству новых функций, код на JavaScript теперь выглядит лаконичнее, его удобнее отлаживать и легко понимать. Эта книга представляет собой практическое руководство по новым фичам, представленным в JavaScript, начиная с версии 6 ECMAScript и заканчивая ECMAScript 9.

👉 @frontendInterview

What is between?

Вам даны два числа: a и b, причем a < b. Создайте функцию, которая вернет массив целых чисел, находящихся в промежутке между этими числами, включая их самих.

Пример:
a = 1
b = 4
--> [1, 2, 3, 4]

👉 @frontendInterview

​Как удалить элемент из массива в JavaScript?

Удаление последнего элемента массива

 const fruits = ["Яблоко", "Банан", "Апельсин"]
 const last = fruits.pop(); // удалим Апельсин (из конца)
 // ["Яблоко", "Банан"];

Удаление первого элемента массива
const first = fruits.shift(); // удалим Яблоко (из начала)
// ["Банан"];

Удаление нескольких элементов, начиная с определённого индекса
arr.splice(str) – это универсальный «швейцарский нож» для работы с массивами. Умеет всё: добавлять, удалять и заменять элементы.

 arr.splice(index[, deleteCount, elem1, ..., elemN])

Он начинает с позиции index, удаляет deleteCount элементов и вставляет elem1, ..., elemN на их место. Возвращает массив из удалённых элементов.

 let arr = ["Я", "изучаю", "JavaScript"];
 arr.splice(1, 1); // начиная с позиции 1, удалить 1 элемент
 // осталось ["Я", "JavaScript"]

Метод arr.slice намного проще, чем похожий на него arr.splice.
Его синтаксис:

 arr.slice([start], [end])

Он возвращает новый массив, в который копирует элементы, начиная с индекса start и до end (не включая end). Оба индекса start и end могут быть отрицательными. В таком случае отсчёт будет осуществляться с конца массива.
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s (копирует с 1 до 3)
alert( arr.slice(-2) ); // s,t (копирует с -2 до конца)

👉 @frontendInterview

👉 @frontendInterview

​Как работают методы push(), pop(), shift() и unshift() в JS?

Метод push() позволяет добавлять элементы в конец массива. Он модифицирует массив, и, после завершения работы, возвращает элемент, добавленный в массив.
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr);
// [1, 2, 3, 4, 5]
console.log(pushed);
// 5

Метод pop() удаляет из массива последний элемент. Он модифицирует массив и возвращает удалённый из него элемент.
let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr);
// [1, 2, 3]
console.log(popped);
// 4

Метод shift() удаляет из массива первый элемент и возвращает его. Он тоже модифицирует массив, для которого его вызывают.
let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr);
// [2, 3, 4]
console.log(shifted);
// 1

Метод unshift() добавляет один или большее количество элементов в начало массива. Он, опять же, модифицирует массив. При этом, в отличие от трёх других рассмотренных здесь методов, он возвращает новую длину массива.
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr);
// [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted);
// 7

👉 @frontendInterview

👉 @frontendInterview

​Как работают методы find(), findIndex() и indexOf() в JS?

Метод find() возвращает первый элемент массива, соответствующий заданному критерию. Этот метод, найдя первый подходящий элемент, не продолжает поиск по массиву.
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

Метод findIndex() очень похож на find(), но он, вместо того, чтобы возвращать первый подходящий элемент массива, возвращает индекс такого элемента. Для того чтобы лучше понять этот метод — взгляните на следующий пример, в котором используется массив строковых значений.
const arr = ["Nick", "Frank", "Joe", "Frank"];
const foundIndex = arr.findIndex(el => el === "Frank");
console.log(foundIndex);
// 1

Метод indexOf() очень похож на метод findIndex(), но он принимает в качестве аргумента не функцию, а обычное значение. Использовать его можно в том случае, если при поиске нужного элемента массива не нужна сложная логика.
const arr = ["Nick", "Frank", "Joe", "Frank"];
const foundIndex = arr.indexOf("Frank");
console.log(foundIndex);
// 1

👉 @frontendInterview

👉 @frontendInterview